From e33852b3335ca66ac5f660255da516639599122e Mon Sep 17 00:00:00 2001 From: Bernardo Sunderhus Date: Thu, 21 Sep 2023 16:36:23 +0000 Subject: [PATCH] feat: adds customizeSelector to createCustomFocusIndicatorStyle method --- ...-1c26ce6a-008b-4296-8065-b09240c6b9ed.json | 7 +++++ .../react-tabster/etc/react-tabster.api.md | 5 ++-- .../react-tabster/src/focus/constants.ts | 1 + .../focus/createCustomFocusIndicatorStyle.ts | 28 +++++++++++++------ .../src/focus/createFocusOutlineStyle.ts | 3 +- 5 files changed, 32 insertions(+), 12 deletions(-) create mode 100644 change/@fluentui-react-tabster-1c26ce6a-008b-4296-8065-b09240c6b9ed.json diff --git a/change/@fluentui-react-tabster-1c26ce6a-008b-4296-8065-b09240c6b9ed.json b/change/@fluentui-react-tabster-1c26ce6a-008b-4296-8065-b09240c6b9ed.json new file mode 100644 index 00000000000000..6f71d8f408015e --- /dev/null +++ b/change/@fluentui-react-tabster-1c26ce6a-008b-4296-8065-b09240c6b9ed.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: adds suffixes to selectors on focus creator methods", + "packageName": "@fluentui/react-tabster", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-tabster/etc/react-tabster.api.md b/packages/react-components/react-tabster/etc/react-tabster.api.md index a070af1637ed9d..0f4a485a4aa464 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -14,17 +14,18 @@ import { Types } from 'tabster'; export function applyFocusVisiblePolyfill(scope: HTMLElement, targetWindow: Window): () => void; // @public -export function createCustomFocusIndicatorStyle(style: TStyle, { selector }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle; +export function createCustomFocusIndicatorStyle(style: TStyle, { selector: selectorType, customizeSelector, }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle; // @public (undocumented) export interface CreateCustomFocusIndicatorStyleOptions { + customizeSelector?: (selector: string) => string; // @deprecated enableOutline?: boolean; selector?: 'focus' | 'focus-within'; } // @public -export const createFocusOutlineStyle: ({ enableOutline, selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle; +export const createFocusOutlineStyle: ({ enableOutline, selector, customizeSelector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle; // @public (undocumented) export interface CreateFocusOutlineStyleOptions extends Omit { diff --git a/packages/react-components/react-tabster/src/focus/constants.ts b/packages/react-components/react-tabster/src/focus/constants.ts index cfc2f30c2d37bf..ee66ad0ba25fff 100644 --- a/packages/react-components/react-tabster/src/focus/constants.ts +++ b/packages/react-components/react-tabster/src/focus/constants.ts @@ -13,4 +13,5 @@ export const FOCUS_WITHIN_ATTR = 'data-fui-focus-within'; export const defaultOptions = { style: {}, selector: 'focus', + customizeSelector: (selector: string) => selector, } as const; diff --git a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts index 3a41a328a0f75b..78e226b3729c9e 100644 --- a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts +++ b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts @@ -11,8 +11,13 @@ export interface CreateCustomFocusIndicatorStyleOptions { * Control if the indicator appears when the corresponding element is focused, * or any child is focused within the corresponding element. * @default 'focus' + * @alias selectorType */ selector?: 'focus' | 'focus-within'; + /** + * Customizes the selector provided based on the selector type. + */ + customizeSelector?: (selector: string) => string; /** * Enables the browser default outline style * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden @@ -30,14 +35,19 @@ export interface CreateCustomFocusIndicatorStyleOptions { */ export function createCustomFocusIndicatorStyle( style: TStyle, - { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions, + { + selector: selectorType = defaultOptions.selector, + customizeSelector = defaultOptions.customizeSelector, + }: CreateCustomFocusIndicatorStyleOptions = defaultOptions, ): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle { - return { - ...(selector === 'focus' && { - [`&[${FOCUS_VISIBLE_ATTR}]`]: style, - }), - ...(selector === 'focus-within' && { - [`&[${FOCUS_WITHIN_ATTR}]:${selector}`]: style, - }), - }; + return { [customizeSelector(createBaseSelector(selectorType))]: style }; +} + +function createBaseSelector(selectorType: 'focus' | 'focus-within'): string { + switch (selectorType) { + case 'focus': + return `&[${FOCUS_VISIBLE_ATTR}]`; + case 'focus-within': + return `&[${FOCUS_WITHIN_ATTR}]:focus-within`; + } } diff --git a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts index 63698527f86eb1..f44053c980b37d 100644 --- a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts +++ b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts @@ -88,6 +88,7 @@ const getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle export const createFocusOutlineStyle = ({ enableOutline = false, selector = defaultOptions.selector, + customizeSelector, style = defaultOptions.style, }: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({ ':focus': { @@ -105,6 +106,6 @@ export const createFocusOutlineStyle = ({ outlineWidth: '2px', ...style, }), - { selector }, + { selector, customizeSelector }, ), });