From d50ea32b297ecd7f5fdb9c00921539f027fa48d3 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 21 Dec 2022 18:27:50 -0800 Subject: [PATCH 01/11] fix: use outlineColor instead of outlineStyle to avoid overriding HCM styles --- .../src/focus/createCustomFocusIndicatorStyle.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts index 832e4ec3a2042..37a86c8f18669 100644 --- a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts +++ b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts @@ -31,10 +31,10 @@ export function createCustomFocusIndicatorStyle Date: Wed, 21 Dec 2022 19:32:56 -0800 Subject: [PATCH 02/11] fix: createCustomFocusIndicatorStyle sets outlineColor: transparent instead of outlineStyle: none to avoid removing HCM focus visibility --- .../react-button/src/components/Button/useButtonStyles.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts index 6dc0b1cb21b2d..3881a0ef8ad22 100644 --- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts +++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts @@ -108,7 +108,9 @@ const useRootBaseClassName = makeResetStyles({ ...createCustomFocusIndicatorStyle({ borderColor: tokens.colorTransparentStroke, borderRadius: tokens.borderRadiusMedium, - outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`, + outlineColor: tokens.colorTransparentStroke, + outlineStyle: 'solid', + outlineWidth: tokens.strokeWidthThick, boxShadow: ` ${tokens.shadow4}, 0 0 0 2px ${tokens.colorStrokeFocus2} From 59a2f4ee8d22f228dfd88de5f45eb1e25f15039b Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 21 Dec 2022 19:39:23 -0800 Subject: [PATCH 03/11] change files --- ...-react-button-8ca77ada-4641-4654-bed4-57a8e79c6b78.json | 7 +++++++ ...react-tabster-02d60995-a4bb-4daa-ad07-7f16a7569e0f.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-button-8ca77ada-4641-4654-bed4-57a8e79c6b78.json create mode 100644 change/@fluentui-react-tabster-02d60995-a4bb-4daa-ad07-7f16a7569e0f.json diff --git a/change/@fluentui-react-button-8ca77ada-4641-4654-bed4-57a8e79c6b78.json b/change/@fluentui-react-button-8ca77ada-4641-4654-bed4-57a8e79c6b78.json new file mode 100644 index 0000000000000..aced6b56894d0 --- /dev/null +++ b/change/@fluentui-react-button-8ca77ada-4641-4654-bed4-57a8e79c6b78.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: use individual outlineX CSS props instead of the compound outline prop\"", + "packageName": "@fluentui/react-button", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabster-02d60995-a4bb-4daa-ad07-7f16a7569e0f.json b/change/@fluentui-react-tabster-02d60995-a4bb-4daa-ad07-7f16a7569e0f.json new file mode 100644 index 0000000000000..d5912bb78cbc7 --- /dev/null +++ b/change/@fluentui-react-tabster-02d60995-a4bb-4daa-ad07-7f16a7569e0f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: do not use outlineStyle: none in createCustomFocusIndicatorStyle", + "packageName": "@fluentui/react-tabster", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} From e6cabc20827b1e241950f8908bff1cd076c5a879 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 27 Dec 2022 08:53:34 -0800 Subject: [PATCH 04/11] update createCustomFocusIndicatorStyle to not disabled outline, moved to createFocusOutlineStyle --- .../src/components/Button/useButtonStyles.ts | 4 +--- .../src/focus/createCustomFocusIndicatorStyle.ts | 12 +----------- .../src/focus/createFocusOutlineStyle.ts | 15 ++++++++++++--- 3 files changed, 14 insertions(+), 17 deletions(-) diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts index 3881a0ef8ad22..ca1c256fe9d9d 100644 --- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts +++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts @@ -108,13 +108,11 @@ const useRootBaseClassName = makeResetStyles({ ...createCustomFocusIndicatorStyle({ borderColor: tokens.colorTransparentStroke, borderRadius: tokens.borderRadiusMedium, - outlineColor: tokens.colorTransparentStroke, - outlineStyle: 'solid', - outlineWidth: tokens.strokeWidthThick, boxShadow: ` ${tokens.shadow4}, 0 0 0 2px ${tokens.colorStrokeFocus2} `, + ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorTransparentStroke), zIndex: 1, }), }); diff --git a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts index 37a86c8f18669..0d23789836884 100644 --- a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts +++ b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts @@ -24,19 +24,9 @@ export interface CreateCustomFocusIndicatorStyleOptions { */ export function createCustomFocusIndicatorStyle( style: TStyle, - { - selector = defaultOptions.selector, - enableOutline = false, - }: CreateCustomFocusIndicatorStyleOptions = defaultOptions, + { selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions, ): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle { return { - ':focus': { - outlineColor: enableOutline ? undefined : 'transparent', - }, - ':focus-visible': { - outlineColor: enableOutline ? undefined : 'transparent', - }, - ...(selector === 'focus' && { [`&[${FOCUS_VISIBLE_ATTR}]`]: style, }), diff --git a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts index 10f0d030b1caf..13c358832c1e8 100644 --- a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts +++ b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts @@ -66,10 +66,18 @@ const getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle * @returns focus outline styles object for @see makeStyles */ export const createFocusOutlineStyle = ({ + enableOutline = false, selector = defaultOptions.selector, style = defaultOptions.style, -}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => - createCustomFocusIndicatorStyle( +}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({ + ':focus': { + outlineStyle: enableOutline ? undefined : 'none', + }, + ':focus-visible': { + outlineStyle: enableOutline ? undefined : 'none', + }, + + ...createCustomFocusIndicatorStyle( getFocusOutlineStyles({ outlineColor: tokens.colorStrokeFocus2, outlineRadius: tokens.borderRadiusMedium, @@ -78,4 +86,5 @@ export const createFocusOutlineStyle = ({ ...style, }), { selector }, - ); + ), +}); From 29f1400631faba7d2aecf2239b046c188cc652e6 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 27 Dec 2022 08:56:34 -0800 Subject: [PATCH 05/11] change files --- ...react-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json} | 2 +- ...react-tabster-02d60995-a4bb-4daa-ad07-7f16a7569e0f.json | 7 ------- ...react-tabster-febe226f-524c-446a-a2b1-769b8ba7180f.json | 7 +++++++ 3 files changed, 8 insertions(+), 8 deletions(-) rename change/{@fluentui-react-button-8ca77ada-4641-4654-bed4-57a8e79c6b78.json => @fluentui-react-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json} (59%) delete mode 100644 change/@fluentui-react-tabster-02d60995-a4bb-4daa-ad07-7f16a7569e0f.json create mode 100644 change/@fluentui-react-tabster-febe226f-524c-446a-a2b1-769b8ba7180f.json diff --git a/change/@fluentui-react-button-8ca77ada-4641-4654-bed4-57a8e79c6b78.json b/change/@fluentui-react-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json similarity index 59% rename from change/@fluentui-react-button-8ca77ada-4641-4654-bed4-57a8e79c6b78.json rename to change/@fluentui-react-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json index aced6b56894d0..4a1fc692489c8 100644 --- a/change/@fluentui-react-button-8ca77ada-4641-4654-bed4-57a8e79c6b78.json +++ b/change/@fluentui-react-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "fix: use individual outlineX CSS props instead of the compound outline prop\"", + "comment": "chore: use outline shorthand instead of compound prop for consistency", "packageName": "@fluentui/react-button", "email": "sarah.higley@microsoft.com", "dependentChangeType": "patch" diff --git a/change/@fluentui-react-tabster-02d60995-a4bb-4daa-ad07-7f16a7569e0f.json b/change/@fluentui-react-tabster-02d60995-a4bb-4daa-ad07-7f16a7569e0f.json deleted file mode 100644 index d5912bb78cbc7..0000000000000 --- a/change/@fluentui-react-tabster-02d60995-a4bb-4daa-ad07-7f16a7569e0f.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: do not use outlineStyle: none in createCustomFocusIndicatorStyle", - "packageName": "@fluentui/react-tabster", - "email": "sarah.higley@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-tabster-febe226f-524c-446a-a2b1-769b8ba7180f.json b/change/@fluentui-react-tabster-febe226f-524c-446a-a2b1-769b8ba7180f.json new file mode 100644 index 0000000000000..249f14184b62e --- /dev/null +++ b/change/@fluentui-react-tabster-febe226f-524c-446a-a2b1-769b8ba7180f.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix: move `outlineStyle: none` out of createCustomFocusIndicatorStyle and to createFocusOutlineStyle", + "packageName": "@fluentui/react-tabster", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} From 1df7247acba844730df3f8baa23546afbaf9f774 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 27 Dec 2022 10:04:11 -0800 Subject: [PATCH 06/11] update api --- .../react-components/react-tabster/etc/react-tabster.api.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 a492d34543bc4..44ffb7e5a48ee 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -14,7 +14,7 @@ import { Types } from 'tabster'; export function applyFocusVisiblePolyfill(scope: HTMLElement, win: Window): () => void; // @public -export function createCustomFocusIndicatorStyle(style: TStyle, { selector, enableOutline, }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle; +export function createCustomFocusIndicatorStyle(style: TStyle, { selector }?: CreateCustomFocusIndicatorStyleOptions): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle; // @public (undocumented) export interface CreateCustomFocusIndicatorStyleOptions { @@ -24,7 +24,7 @@ export interface CreateCustomFocusIndicatorStyleOptions { } // @public -export const createFocusOutlineStyle: ({ selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle; +export const createFocusOutlineStyle: ({ enableOutline, selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle; // @public (undocumented) export interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions { From 1f9cbb4a5c53f7b8e88d8fc65343e62b880eb5ed Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 10 Jan 2023 17:48:28 -0800 Subject: [PATCH 07/11] deprecate enableOutline, remove enableOutline logic from focusOutlineStyle. Reverts changes in button outline style --- ...-react-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json | 7 ------- .../react-button/src/components/Button/useButtonStyles.ts | 2 +- .../src/focus/createCustomFocusIndicatorStyle.ts | 3 ++- .../react-tabster/src/focus/createFocusOutlineStyle.ts | 5 ++--- 4 files changed, 5 insertions(+), 12 deletions(-) delete mode 100644 change/@fluentui-react-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json diff --git a/change/@fluentui-react-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json b/change/@fluentui-react-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json deleted file mode 100644 index 4a1fc692489c8..0000000000000 --- a/change/@fluentui-react-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "chore: use outline shorthand instead of compound prop for consistency", - "packageName": "@fluentui/react-button", - "email": "sarah.higley@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts index ca1c256fe9d9d..6dc0b1cb21b2d 100644 --- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts +++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts @@ -108,11 +108,11 @@ const useRootBaseClassName = makeResetStyles({ ...createCustomFocusIndicatorStyle({ borderColor: tokens.colorTransparentStroke, borderRadius: tokens.borderRadiusMedium, + outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`, boxShadow: ` ${tokens.shadow4}, 0 0 0 2px ${tokens.colorStrokeFocus2} `, - ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorTransparentStroke), zIndex: 1, }), }); diff --git a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts index 0d23789836884..7c5241fb7c8b8 100644 --- a/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts +++ b/packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts @@ -10,7 +10,8 @@ export interface CreateCustomFocusIndicatorStyleOptions { selector?: 'focus' | 'focus-within'; /** * Enables the browser default outline style - * @default false + * @deprecated The custom focus indicator no longer affects outline styles. Outline is overridden + * in the default focus indicator function, `createFocusOutlineStyle`. */ enableOutline?: boolean; } diff --git a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts index 13c358832c1e8..35c70e9564799 100644 --- a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts +++ b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts @@ -66,15 +66,14 @@ const getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle * @returns focus outline styles object for @see makeStyles */ export const createFocusOutlineStyle = ({ - enableOutline = false, selector = defaultOptions.selector, style = defaultOptions.style, }: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({ ':focus': { - outlineStyle: enableOutline ? undefined : 'none', + outlineStyle: 'none', }, ':focus-visible': { - outlineStyle: enableOutline ? undefined : 'none', + outlineStyle: 'none', }, ...createCustomFocusIndicatorStyle( From a35f9afc63d3e75b5d6546d2a2d1530c1c4915dc Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 10 Jan 2023 18:11:20 -0800 Subject: [PATCH 08/11] update api --- .../react-components/react-tabster/etc/react-tabster.api.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 44ffb7e5a48ee..b4dfb821a20b6 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -18,13 +18,14 @@ export function createCustomFocusIndicatorStyle GriffelStyle; +export const createFocusOutlineStyle: ({ selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle; // @public (undocumented) export interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions { From c77072f76dcb991db724d1e1c0803872a333af98 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Fri, 27 Jan 2023 00:24:57 -0800 Subject: [PATCH 09/11] add enableOutline back to createFocusOutlineStyle --- .../react-tabster/etc/react-tabster.api.md | 5 +++-- .../src/focus/createFocusOutlineStyle.ts | 12 +++++++++--- 2 files changed, 12 insertions(+), 5 deletions(-) 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 b4dfb821a20b6..fde0d57692fc8 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -25,10 +25,11 @@ export interface CreateCustomFocusIndicatorStyleOptions { } // @public -export const createFocusOutlineStyle: ({ selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle; +export const createFocusOutlineStyle: ({ enableOutline, selector, style, }?: CreateFocusOutlineStyleOptions) => GriffelStyle; // @public (undocumented) -export interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions { +export interface CreateFocusOutlineStyleOptions extends Omit { + enableOutline?: boolean; // (undocumented) style?: Partial; } diff --git a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts index 35c70e9564799..93b64b3a50561 100644 --- a/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts +++ b/packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts @@ -18,8 +18,13 @@ export type FocusOutlineStyleOptions = { outlineWidth: string; outlineOffset?: string | FocusOutlineOffset; }; -export interface CreateFocusOutlineStyleOptions extends CreateCustomFocusIndicatorStyleOptions { +export interface CreateFocusOutlineStyleOptions extends Omit { style?: Partial; + + /** + * Enables the browser default outline style + */ + enableOutline?: boolean; } /** @@ -66,14 +71,15 @@ const getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle * @returns focus outline styles object for @see makeStyles */ export const createFocusOutlineStyle = ({ + enableOutline = false, selector = defaultOptions.selector, style = defaultOptions.style, }: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({ ':focus': { - outlineStyle: 'none', + outlineStyle: enableOutline ? undefined : 'none', }, ':focus-visible': { - outlineStyle: 'none', + outlineStyle: enableOutline ? undefined : 'none', }, ...createCustomFocusIndicatorStyle( From 620ac7e75056657d578d67ee7adf8441e8200bb3 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Mon, 30 Jan 2023 13:08:24 -0800 Subject: [PATCH 10/11] remove now-unneeded enableOutline internal use, at outline:none to custom outlines --- .../AvatarGroupPopover/useAvatarGroupPopoverStyles.ts | 1 + .../react-link/src/components/Link/useLinkStyles.ts | 1 + .../src/components/TableCell/useTableCellStyles.ts | 2 +- .../components/TableHeaderCell/useTableHeaderCellStyles.ts | 2 +- .../src/components/TableRow/useTableRowStyles.ts | 6 +++--- .../TableSelectionCell/useTableSelectionCellStyles.ts | 2 +- 6 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts index 0350ad9c9dd5d..8cb91c8ccbc97 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts @@ -69,6 +69,7 @@ const useTriggerButtonStyles = makeStyles({ focusIndicator: createCustomFocusIndicatorStyle({ ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2), + outlineStyle: 'none', }), states: { diff --git a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts b/packages/react-components/react-link/src/components/Link/useLinkStyles.ts index 15f343ed72a2f..783663e7c6fd7 100644 --- a/packages/react-components/react-link/src/components/Link/useLinkStyles.ts +++ b/packages/react-components/react-link/src/components/Link/useLinkStyles.ts @@ -13,6 +13,7 @@ const useStyles = makeStyles({ textDecorationColor: tokens.colorStrokeFocus2, textDecorationLine: 'underline', textDecorationStyle: 'double', + outlineStyle: 'none', }), // Common styles. root: { diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts index 048555acd3b94..5ca0fb171f31f 100644 --- a/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts +++ b/packages/react-components/react-table/src/components/TableCell/useTableCellStyles.ts @@ -62,7 +62,7 @@ const useStyles = makeStyles({ ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2), ...shorthands.borderRadius(tokens.borderRadiusMedium), }, - { selector: 'focus', enableOutline: true }, + { selector: 'focus' }, ), }, }); diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts index b88f2c3f9b3df..260a05528122a 100644 --- a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts +++ b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts @@ -37,7 +37,7 @@ const useStyles = makeStyles({ ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2), ...shorthands.borderRadius(tokens.borderRadiusMedium), }, - { selector: 'focus-within', enableOutline: true }, + { selector: 'focus-within' }, ), }, diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts index 88c9b0e4d4377..3122a801a46bd 100644 --- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts +++ b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts @@ -41,14 +41,14 @@ const useStyles = makeStyles({ opacity: 1, }, }, - { selector: 'focus-within', enableOutline: true }, + { selector: 'focus-within' }, ), ...createCustomFocusIndicatorStyle( { ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2), ...shorthands.borderRadius(tokens.borderRadiusMedium), }, - { selector: 'focus', enableOutline: true }, + { selector: 'focus' }, ), }, @@ -64,7 +64,7 @@ const useStyles = makeStyles({ backgroundColor: tokens.colorSubtleBackgroundHover, }, - { selector: 'focus-within', enableOutline: true }, + { selector: 'focus-within' }, ), }, diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts index ff068b1269375..89243c85a0997 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts +++ b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts @@ -40,7 +40,7 @@ const useStyles = makeStyles({ ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2), ...shorthands.borderRadius(tokens.borderRadiusMedium), }, - { selector: 'focus', enableOutline: true }, + { selector: 'focus' }, ), }, From 3bd1cde391c875ddd6fd45c5c96da10fa10eeccc Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Mon, 30 Jan 2023 13:36:12 -0800 Subject: [PATCH 11/11] change files --- ...-react-avatar-c5eda590-5ce5-4e60-9278-1c3e2c262c93.json | 7 +++++++ ...ui-react-link-d5ee02fd-4fb1-447a-9c5a-29d224098eb1.json | 7 +++++++ ...i-react-table-7f1e5d71-db9b-4684-ae54-8f43917da2bb.json | 7 +++++++ 3 files changed, 21 insertions(+) create mode 100644 change/@fluentui-react-avatar-c5eda590-5ce5-4e60-9278-1c3e2c262c93.json create mode 100644 change/@fluentui-react-link-d5ee02fd-4fb1-447a-9c5a-29d224098eb1.json create mode 100644 change/@fluentui-react-table-7f1e5d71-db9b-4684-ae54-8f43917da2bb.json diff --git a/change/@fluentui-react-avatar-c5eda590-5ce5-4e60-9278-1c3e2c262c93.json b/change/@fluentui-react-avatar-c5eda590-5ce5-4e60-9278-1c3e2c262c93.json new file mode 100644 index 0000000000000..ded5653202609 --- /dev/null +++ b/change/@fluentui-react-avatar-c5eda590-5ce5-4e60-9278-1c3e2c262c93.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update createCustomFocusIndicator usage to specify outline: none", + "packageName": "@fluentui/react-avatar", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-link-d5ee02fd-4fb1-447a-9c5a-29d224098eb1.json b/change/@fluentui-react-link-d5ee02fd-4fb1-447a-9c5a-29d224098eb1.json new file mode 100644 index 0000000000000..14fd2c0050f4c --- /dev/null +++ b/change/@fluentui-react-link-d5ee02fd-4fb1-447a-9c5a-29d224098eb1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: update createCustomFocusIndicator usage to specify outline: none", + "packageName": "@fluentui/react-link", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-7f1e5d71-db9b-4684-ae54-8f43917da2bb.json b/change/@fluentui-react-table-7f1e5d71-db9b-4684-ae54-8f43917da2bb.json new file mode 100644 index 0000000000000..fed873db5f544 --- /dev/null +++ b/change/@fluentui-react-table-7f1e5d71-db9b-4684-ae54-8f43917da2bb.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: remove now-unnecessary enableOutline in createCustomFocusIndicator", + "packageName": "@fluentui/react-table", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +}