Possibility to pass extra selectors to createCustomFocusIndicatorStyle #25595

flora8984461 · 2022-11-09T19:42:58Z

flora8984461
Nov 9, 2022

According to the createCustomFocusIndicatorStyle

Can it allow adding children elements selectors and / or other elements selectors?

For example,
User passes params like this:

const children = "div" / ".classname" / "#someid" / "div .classname #someid" / etc.
createCustomFocusIndicatorStyle(style, { selector: 'focus' }, children)

And the implementation of the function can be like:

export const createCustomFocusIndicatorStyle = (
  style: GriffelStyle,
  {
    selector = defaultOptions.selector,
    enableOutline = false,
  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,
): GriffelStyle => ({
  `:focus ${children}`: {
    outlineStyle: enableOutline ? undefined : 'none',
  },
  ':focus-visible ${children}': {
    outlineStyle: enableOutline ? undefined : 'none',
  },

  ...(selector === 'focus' && {
    [`&[${FOCUS_VISIBLE_ATTR}] ${children}`]: style,
  }),
  ...(selector === 'focus-within' && {
    [`&[${FOCUS_WITHIN_ATTR}]:${selector} ${children}`]: style,
  }),
});

And use"+" sign so that the focus style can be applied to other elements as well.

const extra = "div" / ".classname" / "#someid" / "div .classname #someid" / etc.

export const createCustomFocusIndicatorStyle = (
  style: GriffelStyle,
  {
    selector = defaultOptions.selector,
    enableOutline = false,
  }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,
): GriffelStyle => ({
  `:focus+${extra}`: {
    outlineStyle: enableOutline ? undefined : 'none',
  },
  ':focus-visible+${extra}': {
    outlineStyle: enableOutline ? undefined : 'none',
  },

  ...(selector === 'focus' && {
    [`&[${FOCUS_VISIBLE_ATTR}]:focus+${extra}`]: style,
  }),
  ...(selector === 'focus-within' && {
    [`&[${FOCUS_WITHIN_ATTR}]:${selector}+${extra}`]: style,
  }),
});

Example sandbox

Although I can add the styles directly, and not to use createCustomFocusIndicatorStyle or createFocusOutlineStyle, I am curious about the thoughts here to add into the functions for convenience.

Thank you in advance for sharing any insights here. 😸