docs(blog): focus indicators #55
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
docs(blog): formatting chore: formatting
cooper-joe
force-pushed
the
blog-focus-styles
branch
from
a9e847c
to
85d8398
Compare
|
@cooper-joe hey! This one has been stuck for ages, is it still relevant enough? |
|
Hi @Topener. Yeah, I think it's still an interesting look behind the curtain into a design decision for our library. We're still using the approach discussed in the conclusion here, so still relevant in that sense. |
Topener
requested changes
Feb 24, 2023
| tags: [design, libraries, ui] | ||
| --- | ||
|
|
||
| How can we design effective and flexible focus indicators for a component library? |
There was a problem hiding this comment.
We're probably gonna need a longer intro here, so it also displays correct information in the blog post list/homepage. Maybe merge it with the section "What are focus indicators?"
|
|
||
| ## Focus indicators in DHIS2-ui | ||
|
|
||
| The DHIS2 component library, ui, offers prebuilt components for all kinds of DHIS2 applications. This helps internal and external teams build consistent user experiences. |
There was a problem hiding this comment.
Maybe rewrite this as
Suggested change
| The DHIS2 component library, ui, offers prebuilt components for all kinds of DHIS2 applications. This helps internal and external teams build consistent user experiences. | |
| The [DHIS2 UI component library](https://ui.dhis2.nu) provides a collection of pre-built components that can be used in various types of DHIS2 applications. By utilizing these pre-built components, both internal and external teams can ensure a consistent user experience across different DHIS2 applications.``` |
|
|
||
| The DHIS2 component library, ui, offers prebuilt components for all kinds of DHIS2 applications. This helps internal and external teams build consistent user experiences. | ||
|
|
||
| One of DHIS2-ui's guiding principles is to be flexible enough to handle all kinds of use cases. As much as possible, we don't want to limit the usefulness of the components. If a component utility is too narrow then it'll lead to more custom components and less consistency across the platform. |
There was a problem hiding this comment.
Suggested change
| One of DHIS2-ui's guiding principles is to be flexible enough to handle all kinds of use cases. As much as possible, we don't want to limit the usefulness of the components. If a component utility is too narrow then it'll lead to more custom components and less consistency across the platform. | |
| One of the core guiding principles of the DHIS2 UI library is to maintain a high level of flexibility that can accommodate a wide range of use cases. Our goal is to avoid imposing unnecessary limits on the usefulness of the components. If a component's functionality is too narrowly defined, it could result in the need for more custom components, which can lead to a less consistent user experience across the platform. |
| - are effective, they do the job well, in a huge number of unknown use cases? | ||
| - are flexible enough to work across all kinds of components? | ||
|
|
||
| In this blog post, we'll review the advantages and disadvantages of some available approaches. |
There was a problem hiding this comment.
Suggested change
| In this blog post, we'll review the advantages and disadvantages of some available approaches. | |
| In this article, we'll look at the advantages and disadvantages of some available approaches. |
|
|
||
| **Self-containment**: The outline doesn't interact with anything outside of the component bounds. This reduces the chances of subpar experiences from unexpected visual clashes. This makes the focus indicator more reliable, an important trait. | ||
|
|
||
| Being self-contained, a component's focus indicator can tested too. We don't need to imagine all the interactions with other elements that would be impossible to test for. |
There was a problem hiding this comment.
Suggested change
| Being self-contained, a component's focus indicator can tested too. We don't need to imagine all the interactions with other elements that would be impossible to test for. | |
| Being self-contained, a component's focus indicator can be tested too. We don't need to imagine all the interactions with other elements that would be impossible to test for. |
|
|
||
| ### Conclusion | ||
|
|
||
| As of writing, we've landed on the conclusion that **outlines inside the component** is the right approach for DHIS2-ui. |
There was a problem hiding this comment.
Suggested change
| As of writing, we've landed on the conclusion that **outlines inside the component** is the right approach for DHIS2-ui. | |
| After careful consideration, we have decided that incorporating **outlines inside each component** is the best approach for DHIS2-ui. Although this approach has some issues, they are limited to the boundary of the component, making it easier to address at the scale of our library and its uses. |
|
|
||
| As of writing, we've landed on the conclusion that **outlines inside the component** is the right approach for DHIS2-ui. | ||
|
|
||
| The issues with this approach noted above are a concern, but the fact that an issue exists only within the boundary of a component makes it easier to deal with on the scale of our library and its usages. |
There was a problem hiding this comment.
Suggested change
| The issues with this approach noted above are a concern, but the fact that an issue exists only within the boundary of a component makes it easier to deal with on the scale of our library and its usages. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a blog post discussing the design of effective focus indicators. This post relates to dhis2/ui#908.
Feedback is very welcome.