From 321434bd008dd07f02bcece3370f86a6d584d9e8 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 23 Aug 2023 17:44:08 +0200 Subject: [PATCH 1/2] styles --- .../useInteractionTagPrimaryStyles.styles.ts | 5 +++ .../src/components/Tag/useTagStyles.styles.ts | 41 +++++++++++++++++++ 2 files changed, 46 insertions(+) diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts index c3fcefdd60a6dc..d072e495c7ee61 100644 --- a/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts +++ b/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts @@ -9,6 +9,7 @@ import { useMediaStyles, usePrimaryTextStyles, useSecondaryTextStyles, + useTagWithSecondaryTextContrastStyles, } from '../Tag/useTagStyles.styles'; export const interactionTagPrimaryClassNames: SlotClassNames = { @@ -189,6 +190,8 @@ export const useInteractionTagPrimaryStyles_unstable = ( const primaryTextStyles = usePrimaryTextStyles(); const secondaryTextStyles = useSecondaryTextStyles(); + const tagWithSecondaryTextContrastStyles = useTagWithSecondaryTextContrastStyles(); + const { shape, size, appearance } = state; state.root.className = mergeClasses( @@ -203,6 +206,8 @@ export const useInteractionTagPrimaryStyles_unstable = ( state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], + state.secondaryText && tagWithSecondaryTextContrastStyles[shape], + state.root.className, ); diff --git a/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts index f1549943637100..06338e12c6d2e0 100644 --- a/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts +++ b/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts @@ -258,6 +258,43 @@ export const usePrimaryTextStyles = makeStyles({ }, }); +/** + * Styles for root slot under windows high contrast mode when Tag is with secondary text. + * Tag's primary text has negative margin that covers the border. Pseudo element is used to draw the border. + */ +export const useTagWithSecondaryTextContrastStyles = makeStyles({ + rounded: { + '@media (forced-colors: active)': { + position: 'relative', + '::before': { + content: '""', + ...shorthands.border(tokens.strokeWidthThin, 'solid'), + position: 'absolute', + top: '-1px', + left: '-1px', + right: '-1px', + bottom: '-1px', + ...shorthands.borderRadius(tokens.borderRadiusMedium), + }, + }, + }, + circular: { + '@media (forced-colors: active)': { + position: 'relative', + '::before': { + content: '""', + ...shorthands.border(tokens.strokeWidthThin, 'solid'), + position: 'absolute', + top: '-1px', + left: '-1px', + right: '-1px', + bottom: '-1px', + ...shorthands.borderRadius(tokens.borderRadiusCircular), + }, + }, + }, +}); + export const useSecondaryTextStyles = makeStyles({ base: { ...shorthands.gridArea('secondary'), @@ -283,6 +320,8 @@ export const useTagStyles_unstable = (state: TagState): TagState => { const primaryTextStyles = usePrimaryTextStyles(); const secondaryTextStyles = useSecondaryTextStyles(); + const tagWithSecondaryTextContrastStyles = useTagWithSecondaryTextContrastStyles(); + const { shape, size, appearance } = state; state.root.className = mergeClasses( @@ -297,6 +336,8 @@ export const useTagStyles_unstable = (state: TagState): TagState => { !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], + state.secondaryText && tagWithSecondaryTextContrastStyles[shape], + state.root.className, ); From 9492c6934065947bc3e0359d9f32c00006e68213 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 23 Aug 2023 17:46:14 +0200 Subject: [PATCH 2/2] chg --- ...-tags-preview-94eb29aa-e1eb-4bc6-a747-23edc4f50642.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-tags-preview-94eb29aa-e1eb-4bc6-a747-23edc4f50642.json diff --git a/change/@fluentui-react-tags-preview-94eb29aa-e1eb-4bc6-a747-23edc4f50642.json b/change/@fluentui-react-tags-preview-94eb29aa-e1eb-4bc6-a747-23edc4f50642.json new file mode 100644 index 00000000000000..8de4bb6b3d6b13 --- /dev/null +++ b/change/@fluentui-react-tags-preview-94eb29aa-e1eb-4bc6-a747-23edc4f50642.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: tag with secondary text has no top border under windows high contrast", + "packageName": "@fluentui/react-tags-preview", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +}