feat(theming): add focus styling utilities #1542
Conversation
|
|
||
| const palette = theme && theme.palette ? theme.palette : DEFAULT_THEME.palette; | ||
| const colors = theme && theme.colors ? theme.colors : DEFAULT_THEME.colors; | ||
| export const getColor = memoize( |
There was a problem hiding this comment.
Were there any performance concerns that prompted the lodash.memoize utility usage?
There was a problem hiding this comment.
Yes, calling out to these utilities results in repeat getColor calls in a lot of existing cases. But I think there's a massive savings potential overall.
| * ``` | ||
| */ | ||
| export const focusStyles = ({ | ||
| condition = true, |
There was a problem hiding this comment.
I'm curious, what advantage does the condition argument bring? The condition argument can be done in the context of the code where focusStyles is used; which reads clearer and less surface area to debug.
There was a problem hiding this comment.
See commit linked in description
|
|
||
| /* | ||
| * 1. Browser reset | ||
| * 2. High contrast mode hack |
There was a problem hiding this comment.
- Can you please share your resource/research on the high contrast mode hack? Very curious to learn more about this approach.
- Will there need to be other parts to this mechanism? An extension to the theme colors with a "high contrast color" token(s)?
| * @param {string} [options.shadowWidth='md'] Provides a theme object `shadowWidth` key for the cumulative width of the `box-shadow` | ||
| * @param {string} [options.spacerWidth='xs'] Provides a theme object `shadowWidth` for the white spacer | ||
| * @param {Object} [options.styles] Adds CSS property values to be rendered with `:focus-visible` | ||
| * @param {Object} options.theme Provides values used to resolve the desired color |
There was a problem hiding this comment.
| * @param {Object} options.theme Provides values used to resolve the desired color | |
| * @param {Object} [options.theme] Provides values used to resolve the desired color |
Assuming the brackets were left out on accident. :)
| import { math } from 'polished'; | ||
| import { FocusBoxShadowParameters, getFocusBoxShadow } from './getFocusBoxShadow'; | ||
|
|
||
| export const SELECTOR_FOCUS_VISIBLE = '&:focus-visible, &[data-garden-focus-visible="true"]'; |
Description
This PR adds
xsunits to theDEFAULT_THEMEto account for updated "spacer" focus styling, along with three new utilities:focusStyles(preferred) provides a CSS block with focusoutlinereset, focus-visiblebox-shadowstyling, and transparent outline hack for high contrast modegetFocusBoxShadow(fallback) in the case where existing code would be a tedious/surgical refactor, this utility provides the CSS value for thebox-shadowpropertySELECTOR_FOCUS_VISIBLEconstant that can be used together with theselectorparameter onfocusStyles:Detail
For performance concerns, the
getColorutility was memoized, resulting in an extensive diff due to thememoizefunction wrap.This PR contains two commits (rolled back), demonstrating real utility usage within a couple of key styled components:
focusStyles(note that the existing:focusblock should've also been removed)getFocusBoxShadow(focusStylescould be applied with extra effort)Checklist
demo is up-to-date (yarn start)renders as expected with reversed (RTL) direction?bedrock)