44 lines
1.6 KiB
JavaScript
44 lines
1.6 KiB
JavaScript
import { defaultOptions, FOCUS_VISIBLE_ATTR, FOCUS_WITHIN_ATTR } from './constants';
|
|
/**
|
|
* Creates a style for @see makeStyles that includes the necessary selectors for focus.
|
|
* Should be used only when @see createFocusOutlineStyle does not fit requirements
|
|
*
|
|
* If you're using `createCustomFocusIndicatorStyle` instead of `createFocusOutlineStyle`
|
|
* keep in mind that the default outline style is not going to be removed
|
|
* (as it is in `createFocusOutlineStyle`),
|
|
* and is your responsibility to manually remove it from your styles.
|
|
*
|
|
* @example
|
|
* ```ts
|
|
* // Link styles
|
|
* const useStyles = makeStyles({
|
|
focusIndicator: createCustomFocusIndicatorStyle({
|
|
textDecorationColor: tokens.colorStrokeFocus2,
|
|
textDecorationLine: 'underline',
|
|
textDecorationStyle: 'double',
|
|
outlineStyle: 'none',
|
|
}),
|
|
// Common styles.
|
|
root: {
|
|
// ❗️ DO NOT FORGET TO REMOVE THE DEFAULT OUTLINE STYLE
|
|
':focus-visible': {
|
|
outlineStyle: 'none',
|
|
},
|
|
* ```
|
|
*
|
|
* @param style - styling applied on focus, defaults to @see getDefaultFocusOutlineStyles
|
|
* @param options - Configure the style of the focus outline
|
|
*/ export function createCustomFocusIndicatorStyle(style, { selector: selectorType = defaultOptions.selector, customizeSelector = defaultOptions.customizeSelector } = defaultOptions) {
|
|
return {
|
|
[customizeSelector(createBaseSelector(selectorType))]: style
|
|
};
|
|
}
|
|
function createBaseSelector(selectorType) {
|
|
switch(selectorType){
|
|
case 'focus':
|
|
return `&[${FOCUS_VISIBLE_ATTR}]`;
|
|
case 'focus-within':
|
|
return `&[${FOCUS_WITHIN_ATTR}]:focus-within`;
|
|
}
|
|
}
|