From 063f74743dbc2abc72346e83289aa3c3385515d5 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 18 May 2023 17:59:25 +0200 Subject: [PATCH 1/9] WIP --- .../react-tags/src/components/Tag/useTag.tsx | 4 +- .../src/components/Tag/useTagStyles.styles.ts | 56 +++- .../src/components/TagButton/useTagButton.tsx | 4 +- .../TagButton/useTagButtonStyles.styles.ts | 55 +++- .../TagGroup/useTagGroupStyles.styles.ts | 4 + .../stories/Tag/TagDefault.stories.tsx | 268 +++++++++--------- .../TagGroup/TagGroupSizes.stories.tsx | 16 +- 7 files changed, 253 insertions(+), 154 deletions(-) diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.tsx b/packages/react-components/react-tags/src/components/Tag/useTag.tsx index 47c5e8428c45c..57d7727b5b24c 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx @@ -7,8 +7,8 @@ import { useTagGroupContext_unstable } from '../../contexts/TagGroupContext'; const tagAvatarSizeMap = { medium: 28, - small: 24, - 'extra-small': 20, + small: 20, + 'extra-small': 16, } as const; const tagAvatarShapeMap = { diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts index edc4c3943ba06..03dae50ab8afd 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts +++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts @@ -19,7 +19,8 @@ export const tagClassNames: SlotClassNames = { export const useTagBaseStyles = makeStyles({ media: { ...shorthands.gridArea('media'), - alignSelf: 'center', + display: 'flex', + alignItems: 'center', paddingLeft: tokens.spacingHorizontalXXS, paddingRight: tokens.spacingHorizontalS, }, @@ -27,8 +28,8 @@ export const useTagBaseStyles = makeStyles({ ...shorthands.gridArea('media'), display: 'flex', alignSelf: 'center', - paddingLeft: '6px', - paddingRight: '2px', + paddingLeft: tokens.spacingHorizontalSNudge, + paddingRight: tokens.spacingHorizontalXXS, }, primaryText: { gridColumnStart: 'primary', @@ -118,8 +119,8 @@ const useTagStyles = makeStyles({ display: 'flex', alignItems: 'center', fontSize: '20px', - paddingLeft: '2px', - paddingRight: '6px', + paddingLeft: tokens.spacingHorizontalXXS, + paddingRight: tokens.spacingHorizontalSNudge, }, // TODO add additional classes for fill/outline appearance, different sizes, and state @@ -129,7 +130,30 @@ const useSmallTagStyles = makeStyles({ root: { height: '24px', }, - // TODO add additional styles for sizes + dismissIcon: { + fontSize: '16px', + }, + primaryText: typographyStyles.caption1, +}); + +const useExtraSmallTagStyles = makeStyles({ + root: { + height: '20px', + }, + rootWithoutMedia: { + paddingLeft: tokens.spacingHorizontalSNudge, + }, + rootWithoutDismiss: { + paddingRight: tokens.spacingHorizontalSNudge, + }, + icon: { + paddingLeft: tokens.spacingHorizontalXS, + }, + dismissIcon: { + fontSize: '12px', + paddingRight: tokens.spacingHorizontalXS, + }, + primaryText: typographyStyles.caption1, }); /** @@ -139,7 +163,9 @@ export const useTagStyles_unstable = (state: TagState): TagState => { const baseStyles = useTagBaseStyles(); const resetButtonStyles = useResetButtonStyles(); const styles = useTagStyles(); + const smallStyles = useSmallTagStyles(); + const extraSmallStyles = useExtraSmallTagStyles(); state.root.className = mergeClasses( tagClassNames.root, @@ -151,6 +177,9 @@ export const useTagStyles_unstable = (state: TagState): TagState => { !state.dismissIcon && styles.rootWithoutDismiss, state.size === 'small' && smallStyles.root, + state.size === 'extra-small' && extraSmallStyles.root, + state.size === 'extra-small' && !state.media && !state.icon && extraSmallStyles.rootWithoutMedia, + state.size === 'extra-small' && !state.dismissIcon && extraSmallStyles.rootWithoutDismiss, state.root.className, ); @@ -159,13 +188,22 @@ export const useTagStyles_unstable = (state: TagState): TagState => { state.media.className = mergeClasses(tagClassNames.media, baseStyles.media, state.media.className); } if (state.icon) { - state.icon.className = mergeClasses(tagClassNames.icon, baseStyles.icon, state.icon.className); + state.icon.className = mergeClasses( + tagClassNames.icon, + baseStyles.icon, + state.size === 'extra-small' && extraSmallStyles.icon, + state.icon.className, + ); } if (state.primaryText) { state.primaryText.className = mergeClasses( tagClassNames.primaryText, baseStyles.primaryText, state.secondaryText && baseStyles.primaryTextWithSecondaryText, + + state.size === 'small' && smallStyles.primaryText, + state.size === 'extra-small' && extraSmallStyles.primaryText, + state.primaryText.className, ); } @@ -180,6 +218,10 @@ export const useTagStyles_unstable = (state: TagState): TagState => { state.dismissIcon.className = mergeClasses( tagClassNames.dismissIcon, styles.dismissIcon, + + state.size === 'small' && smallStyles.dismissIcon, + state.size === 'extra-small' && extraSmallStyles.dismissIcon, + state.dismissIcon.className, ); } diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx index 9ba53fb344a6f..dcb4f6a5a0ad4 100644 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx @@ -7,8 +7,8 @@ import { useTagGroupContext_unstable } from '../../contexts/TagGroupContext'; const tagButtonAvatarSizeMap = { medium: 28, - small: 24, - 'extra-small': 20, + small: 20, + 'extra-small': 16, } as const; const tagButtonAvatarShapeMap = { diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts index c1b93faf1db3e..ee00a44f0bfb3 100644 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts @@ -2,7 +2,7 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { TagButtonSlots, TagButtonState } from './TagButton.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; -import { tokens } from '@fluentui/react-theme'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; import { useResetButtonStyles, useTagBaseStyles } from '../Tag/index'; export const tagButtonClassNames: SlotClassNames = { @@ -68,8 +68,8 @@ const useStyles = makeStyles({ display: 'flex', alignItems: 'center', fontSize: '20px', - paddingLeft: '6px', - paddingRight: '6px', + paddingLeft: tokens.spacingHorizontalSNudge, + paddingRight: tokens.spacingHorizontalSNudge, ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1), @@ -99,7 +99,33 @@ const useSmallTagButtonStyles = makeStyles({ root: { height: '24px', }, - // TODO add additional styles for sizes + dismissButton: { + fontSize: '16px', + paddingLeft: tokens.spacingHorizontalXS, + paddingRight: tokens.spacingHorizontalXS, + }, + primaryText: typographyStyles.caption1, +}); + +const useExtraSmallTagButtonStyles = makeStyles({ + root: { + height: '20px', + }, + content: { + paddingRight: tokens.spacingHorizontalSNudge, + }, + contentWithoutMedia: { + paddingLeft: tokens.spacingHorizontalSNudge, + }, + icon: { + paddingLeft: tokens.spacingHorizontalXS, + }, + dismissButton: { + fontSize: '12px', + paddingLeft: tokens.spacingHorizontalXS, + paddingRight: tokens.spacingHorizontalXS, + }, + primaryText: typographyStyles.caption1, }); /** @@ -109,7 +135,9 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta const baseStyles = useTagBaseStyles(); const resetButtonStyles = useResetButtonStyles(); const styles = useStyles(); + const smallStyles = useSmallTagButtonStyles(); + const extraSmallStyles = useExtraSmallTagButtonStyles(); state.root.className = mergeClasses( tagButtonClassNames.root, @@ -117,6 +145,7 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta state.shape === 'circular' && styles.rootCircular, state.size === 'small' && smallStyles.root, + state.size === 'extra-small' && extraSmallStyles.root, state.root.className, ); @@ -130,6 +159,9 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta !state.media && !state.icon && styles.contentWithoutMedia, state.dismissible && styles.dismissibleContent, + state.size === 'extra-small' && extraSmallStyles.content, + state.size === 'extra-small' && !state.media && !state.icon && extraSmallStyles.contentWithoutMedia, + state.content.className, ); } @@ -138,13 +170,22 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta state.media.className = mergeClasses(tagButtonClassNames.media, baseStyles.media, state.media.className); } if (state.icon) { - state.icon.className = mergeClasses(tagButtonClassNames.icon, baseStyles.icon, state.icon.className); + state.icon.className = mergeClasses( + tagButtonClassNames.icon, + baseStyles.icon, + state.size === 'extra-small' && extraSmallStyles.icon, + state.icon.className, + ); } if (state.primaryText) { state.primaryText.className = mergeClasses( tagButtonClassNames.primaryText, baseStyles.primaryText, state.secondaryText && baseStyles.primaryTextWithSecondaryText, + + state.size === 'small' && smallStyles.primaryText, + state.size === 'extra-small' && extraSmallStyles.primaryText, + state.primaryText.className, ); } @@ -162,6 +203,10 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta styles.dismissButton, state.shape === 'circular' && styles.dismissButtonCircular, + + state.size === 'small' && smallStyles.dismissButton, + state.size === 'extra-small' && extraSmallStyles.dismissButton, + state.dismissButton.className, ); } diff --git a/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts b/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts index 384730cbf6e5c..2f404fc5115cc 100644 --- a/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts +++ b/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts @@ -18,6 +18,9 @@ const useStyles = makeStyles({ rootSmall: { columnGap: tokens.spacingHorizontalSNudge, }, + rootExtraSmall: { + columnGap: tokens.spacingHorizontalXS, + }, }); /** @@ -29,6 +32,7 @@ export const useTagGroupStyles_unstable = (state: TagGroupState): TagGroupState tagGroupClassNames.root, styles.root, state.size === 'small' && styles.rootSmall, + state.size === 'extra-small' && styles.rootExtraSmall, state.root.className, ); diff --git a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx index cbdcd13e85740..a833e89214881 100644 --- a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx @@ -1,141 +1,143 @@ import * as React from 'react'; -import { Tag, TagProps } from '@fluentui/react-tags'; +import { Tag, TagGroup, TagProps } from '@fluentui/react-tags'; import { Calendar3Day20Regular } from '@fluentui/react-icons'; import { Avatar } from '@fluentui/react-components'; // TODO I added many examples here for easier implementation. This story will be simplified to keep only the default example export const Default = (props: Partial) => ( -
-
- - } - secondaryText="Secondary text" - dismissible - {...props} - > - Primary text - - - } - dismissible - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } secondaryText="Secondary text" dismissible {...props}> - Primary text - - } dismissible {...props}> - Primary text - - } {...props}> - Primary text - - Primary text + +
+
+ + } + secondaryText="Secondary text" + dismissible + {...props} + > + Primary text + + + } + dismissible + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } secondaryText="Secondary text" dismissible {...props}> + Primary text + + } dismissible {...props}> + Primary text + + } {...props}> + Primary text + + Primary text +
+
+ + } + secondaryText="Secondary text" + dismissible + {...props} + > + Primary text + + + } + dismissible + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } secondaryText="Secondary text" dismissible {...props}> + Primary text + + } dismissible {...props}> + Primary text + + } {...props}> + Primary text + + + Primary text + +
-
- - } - secondaryText="Secondary text" - dismissible - {...props} - > - Primary text - - - } - dismissible - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } secondaryText="Secondary text" dismissible {...props}> - Primary text - - } dismissible {...props}> - Primary text - - } {...props}> - Primary text - - - Primary text - -
-
+ ); diff --git a/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx b/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx index a1c66a444c89c..9657974c0b16e 100644 --- a/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx +++ b/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { TagGroup, Tag, TagButton } from '@fluentui/react-tags'; import { Avatar, makeStyles } from '@fluentui/react-components'; +import { Calendar3Day20Regular } from '@fluentui/react-icons'; import { TagSize } from '../../src/Tag'; const useContainerStyles = makeStyles({ @@ -14,19 +15,24 @@ const useContainerStyles = makeStyles({ export const Sizes = () => { const containerStyles = useContainerStyles(); // TODO add one more size - const sizes: TagSize[] = ['small', 'medium']; + const sizes: TagSize[] = ['medium', 'small', 'extra-small']; return (
{sizes.map(size => (
{`${size}: `} - } shape="circular"> + Tag 1 + }>Tag 1 + }>Tag 1 + + Tag 1 + }> + Tag 1 + + }> Tag 1 - } shape="circular"> - Tag 2 -
))} From 228d7a397e1284348d7c93ead2b44e346f4c491f Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 14 Jun 2023 20:47:44 +0200 Subject: [PATCH 2/9] polish sizes and add examples --- .../src/components/Tag/useTagStyles.styles.ts | 84 ++- .../TagButton/useTagButtonStyles.styles.ts | 88 +++- .../stories/Tag/TagDefault.stories.tsx | 461 ++++++++++++----- .../TagButton/TagButtonDefault.stories.tsx | 489 ++++++++++++------ 4 files changed, 792 insertions(+), 330 deletions(-) diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts index 03dae50ab8afd..628375c23cbec 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts +++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts @@ -13,6 +13,9 @@ export const tagClassNames: SlotClassNames = { dismissIcon: 'fui-Tag__dismissIcon', }; +export const tagSpacingMedium = '7px'; +export const tagSpacingSmall = '5px'; + /** * Base styles shared by Tag/TagButton */ @@ -21,15 +24,17 @@ export const useTagBaseStyles = makeStyles({ ...shorthands.gridArea('media'), display: 'flex', alignItems: 'center', - paddingLeft: tokens.spacingHorizontalXXS, + paddingLeft: '1px', paddingRight: tokens.spacingHorizontalS, }, icon: { ...shorthands.gridArea('media'), display: 'flex', alignSelf: 'center', - paddingLeft: tokens.spacingHorizontalSNudge, - paddingRight: tokens.spacingHorizontalXXS, + paddingLeft: tagSpacingMedium, + paddingRight: tokens.spacingHorizontalXS, + width: '20px', + fontSize: '20px', }, primaryText: { gridColumnStart: 'primary', @@ -39,10 +44,13 @@ export const useTagBaseStyles = makeStyles({ paddingLeft: tokens.spacingHorizontalXXS, paddingRight: tokens.spacingHorizontalXXS, whiteSpace: 'nowrap', + paddingBottom: tokens.spacingHorizontalXXS, }, primaryTextWithSecondaryText: { ...shorthands.gridArea('primary'), ...typographyStyles.caption1, + paddingBottom: tokens.spacingHorizontalNone, + marginTop: '-2px', }, secondaryText: { ...shorthands.gridArea('secondary'), @@ -108,10 +116,10 @@ const useTagStyles = makeStyles({ }), }, rootWithoutMedia: { - paddingLeft: tokens.spacingHorizontalS, + paddingLeft: tagSpacingMedium, }, rootWithoutDismiss: { - paddingRight: tokens.spacingHorizontalS, + paddingRight: tagSpacingMedium, }, dismissIcon: { @@ -119,41 +127,59 @@ const useTagStyles = makeStyles({ display: 'flex', alignItems: 'center', fontSize: '20px', - paddingLeft: tokens.spacingHorizontalXXS, - paddingRight: tokens.spacingHorizontalSNudge, + paddingLeft: tokens.spacingHorizontalXS, + paddingRight: tagSpacingMedium, }, // TODO add additional classes for fill/outline appearance, different sizes, and state }); +const useSharedSmallTagStyles = makeStyles({ + rootWithoutMedia: { + paddingLeft: tagSpacingSmall, + }, + rootWithoutDismiss: { + paddingRight: tagSpacingSmall, + }, + + media: { + paddingRight: tokens.spacingHorizontalSNudge, + }, + icon: { + paddingLeft: tagSpacingSmall, + paddingRight: tokens.spacingHorizontalXXS, + }, + dismissIcon: { + paddingLeft: tokens.spacingHorizontalXXS, + paddingRight: tagSpacingSmall, + }, + primaryText: typographyStyles.caption1, +}); + const useSmallTagStyles = makeStyles({ root: { height: '24px', }, + icon: { + width: '16px', + fontSize: '16px', + }, dismissIcon: { fontSize: '16px', }, - primaryText: typographyStyles.caption1, }); const useExtraSmallTagStyles = makeStyles({ root: { height: '20px', }, - rootWithoutMedia: { - paddingLeft: tokens.spacingHorizontalSNudge, - }, - rootWithoutDismiss: { - paddingRight: tokens.spacingHorizontalSNudge, - }, icon: { - paddingLeft: tokens.spacingHorizontalXS, + width: '12px', + fontSize: '12px', }, dismissIcon: { fontSize: '12px', - paddingRight: tokens.spacingHorizontalXS, }, - primaryText: typographyStyles.caption1, }); /** @@ -164,6 +190,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => { const resetButtonStyles = useResetButtonStyles(); const styles = useTagStyles(); + const sharedSmallStyles = useSharedSmallTagStyles(); const smallStyles = useSmallTagStyles(); const extraSmallStyles = useExtraSmallTagStyles(); @@ -178,19 +205,32 @@ export const useTagStyles_unstable = (state: TagState): TagState => { state.size === 'small' && smallStyles.root, state.size === 'extra-small' && extraSmallStyles.root, - state.size === 'extra-small' && !state.media && !state.icon && extraSmallStyles.rootWithoutMedia, - state.size === 'extra-small' && !state.dismissIcon && extraSmallStyles.rootWithoutDismiss, + + (state.size === 'small' || state.size === 'extra-small') && + !state.media && + !state.icon && + sharedSmallStyles.rootWithoutMedia, + (state.size === 'small' || state.size === 'extra-small') && + !state.dismissIcon && + sharedSmallStyles.rootWithoutDismiss, state.root.className, ); if (state.media) { - state.media.className = mergeClasses(tagClassNames.media, baseStyles.media, state.media.className); + state.media.className = mergeClasses( + tagClassNames.media, + baseStyles.media, + (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.media, + state.media.className, + ); } if (state.icon) { state.icon.className = mergeClasses( tagClassNames.icon, baseStyles.icon, + (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.icon, + state.size === 'small' && smallStyles.icon, state.size === 'extra-small' && extraSmallStyles.icon, state.icon.className, ); @@ -201,8 +241,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => { baseStyles.primaryText, state.secondaryText && baseStyles.primaryTextWithSecondaryText, - state.size === 'small' && smallStyles.primaryText, - state.size === 'extra-small' && extraSmallStyles.primaryText, + (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.primaryText, state.primaryText.className, ); @@ -219,6 +258,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => { tagClassNames.dismissIcon, styles.dismissIcon, + (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.dismissIcon, state.size === 'small' && smallStyles.dismissIcon, state.size === 'extra-small' && extraSmallStyles.dismissIcon, diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts index ee00a44f0bfb3..85f422b22fc50 100644 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts @@ -3,7 +3,7 @@ import type { TagButtonSlots, TagButtonState } from './TagButton.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import { tokens, typographyStyles } from '@fluentui/react-theme'; -import { useResetButtonStyles, useTagBaseStyles } from '../Tag/index'; +import { useResetButtonStyles, useTagBaseStyles, tagSpacingMedium, tagSpacingSmall } from '../Tag/index'; export const tagButtonClassNames: SlotClassNames = { root: 'fui-TagButton', @@ -40,7 +40,7 @@ const useStyles = makeStyles({ "media secondary" "media . " `, - paddingRight: tokens.spacingHorizontalS, + paddingRight: tagSpacingMedium, ...createCustomFocusIndicatorStyle( { @@ -57,20 +57,24 @@ const useStyles = makeStyles({ }, circularContent: createCustomFocusIndicatorStyle(shorthands.borderRadius(tokens.borderRadiusCircular)), contentWithoutMedia: { - paddingLeft: tokens.spacingHorizontalS, + paddingLeft: tagSpacingMedium, + }, + dismissibleContent: { + paddingRight: tokens.spacingHorizontalS, + ...createCustomFocusIndicatorStyle({ + borderTopRightRadius: tokens.borderRadiusNone, + borderBottomRightRadius: tokens.borderRadiusNone, + }), }, - dismissibleContent: createCustomFocusIndicatorStyle({ - borderTopRightRadius: tokens.borderRadiusNone, - borderBottomRightRadius: tokens.borderRadiusNone, - }), dismissButton: { display: 'flex', alignItems: 'center', fontSize: '20px', - paddingLeft: tokens.spacingHorizontalSNudge, - paddingRight: tokens.spacingHorizontalSNudge, + paddingLeft: '5px', + paddingRight: '5px', + // divider: ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1), borderTopLeftRadius: tokens.borderRadiusNone, @@ -95,37 +99,54 @@ const useStyles = makeStyles({ // TODO add additional classes for fill/outline appearance, different sizes, and state }); +const useSharedSmallTagButtonStyles = makeStyles({ + content: { + paddingRight: tagSpacingSmall, + }, + contentWithoutMedia: { + paddingLeft: tagSpacingSmall, + }, + dismissibleContent: { + paddingRight: tokens.spacingHorizontalSNudge, + }, + media: { + paddingRight: tokens.spacingHorizontalSNudge, + }, + icon: { + paddingLeft: tagSpacingSmall, + paddingRight: tokens.spacingHorizontalXXS, + }, + primaryText: typographyStyles.caption1, +}); + const useSmallTagButtonStyles = makeStyles({ root: { height: '24px', }, + icon: { + width: '16px', + fontSize: '16px', + }, dismissButton: { fontSize: '16px', - paddingLeft: tokens.spacingHorizontalXS, - paddingRight: tokens.spacingHorizontalXS, + paddingLeft: '3px', + paddingRight: '3px', }, - primaryText: typographyStyles.caption1, }); const useExtraSmallTagButtonStyles = makeStyles({ root: { height: '20px', }, - content: { - paddingRight: tokens.spacingHorizontalSNudge, - }, - contentWithoutMedia: { - paddingLeft: tokens.spacingHorizontalSNudge, - }, icon: { - paddingLeft: tokens.spacingHorizontalXS, + width: '12px', + fontSize: '12px', }, dismissButton: { fontSize: '12px', - paddingLeft: tokens.spacingHorizontalXS, - paddingRight: tokens.spacingHorizontalXS, + paddingLeft: '5px', + paddingRight: '5px', }, - primaryText: typographyStyles.caption1, }); /** @@ -136,6 +157,7 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta const resetButtonStyles = useResetButtonStyles(); const styles = useStyles(); + const sharedSmallStyles = useSharedSmallTagButtonStyles(); const smallStyles = useSmallTagButtonStyles(); const extraSmallStyles = useExtraSmallTagButtonStyles(); @@ -159,20 +181,33 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta !state.media && !state.icon && styles.contentWithoutMedia, state.dismissible && styles.dismissibleContent, - state.size === 'extra-small' && extraSmallStyles.content, - state.size === 'extra-small' && !state.media && !state.icon && extraSmallStyles.contentWithoutMedia, + (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.content, + (state.size === 'small' || state.size === 'extra-small') && + !state.media && + !state.icon && + sharedSmallStyles.contentWithoutMedia, + (state.size === 'small' || state.size === 'extra-small') && + state.dismissible && + sharedSmallStyles.dismissibleContent, state.content.className, ); } if (state.media) { - state.media.className = mergeClasses(tagButtonClassNames.media, baseStyles.media, state.media.className); + state.media.className = mergeClasses( + tagButtonClassNames.media, + baseStyles.media, + (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.media, + state.media.className, + ); } if (state.icon) { state.icon.className = mergeClasses( tagButtonClassNames.icon, baseStyles.icon, + (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.icon, + state.size === 'small' && smallStyles.icon, state.size === 'extra-small' && extraSmallStyles.icon, state.icon.className, ); @@ -183,8 +218,7 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta baseStyles.primaryText, state.secondaryText && baseStyles.primaryTextWithSecondaryText, - state.size === 'small' && smallStyles.primaryText, - state.size === 'extra-small' && extraSmallStyles.primaryText, + (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.primaryText, state.primaryText.className, ); diff --git a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx index a833e89214881..a3f43e9b794b5 100644 --- a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx @@ -1,143 +1,336 @@ import * as React from 'react'; import { Tag, TagGroup, TagProps } from '@fluentui/react-tags'; -import { Calendar3Day20Regular } from '@fluentui/react-icons'; +import { Calendar3DayRegular } from '@fluentui/react-icons'; import { Avatar } from '@fluentui/react-components'; // TODO I added many examples here for easier implementation. This story will be simplified to keep only the default example export const Default = (props: Partial) => ( - -
-
- - } - secondaryText="Secondary text" - dismissible - {...props} - > - Primary text - - - } - dismissible - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } secondaryText="Secondary text" dismissible {...props}> - Primary text - - } dismissible {...props}> - Primary text - - } {...props}> - Primary text - - Primary text + <> +
Medium:
+ +
+
+ + } + secondaryText="Secondary text" + dismissible + {...props} + > + Primary text + + + } + dismissible + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } secondaryText="Secondary text" dismissible {...props}> + Primary text + + } dismissible {...props}> + Primary text + + } {...props}> + Primary text + + Primary text +
+
+ + } + secondaryText="Secondary text" + dismissible + {...props} + > + Primary text + + + } + dismissible + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } secondaryText="Secondary text" dismissible {...props}> + Primary text + + } dismissible {...props}> + Primary text + + } {...props}> + Primary text + + + Primary text + +
-
- - } - secondaryText="Secondary text" - dismissible - {...props} - > - Primary text - - - } - dismissible - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } secondaryText="Secondary text" dismissible {...props}> - Primary text - - } dismissible {...props}> - Primary text - - } {...props}> - Primary text - - - Primary text - + +
+
+
Small:
+ +
+
+ + } + dismissible + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } dismissible {...props}> + Primary text + + } {...props}> + Primary text + + Primary text +
+
+ + } + dismissible + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } dismissible {...props}> + Primary text + + } {...props}> + Primary text + + + Primary text + +
-
- + +
+
+
Extra small:
+ +
+
+ + } + dismissible + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } dismissible {...props}> + Primary text + + } {...props}> + Primary text + + Primary text +
+
+ + } + dismissible + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } dismissible {...props}> + Primary text + + } {...props}> + Primary text + + + Primary text + +
+
+ + ); diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx index 067a7b2fb2be7..225ecdd19eca8 100644 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx @@ -1,154 +1,349 @@ import * as React from 'react'; -import { TagButton, TagButtonProps } from '@fluentui/react-tags'; +import { TagButton, TagButtonProps, TagGroup } from '@fluentui/react-tags'; import { Calendar3Day20Regular } from '@fluentui/react-icons'; import { Avatar } from '@fluentui/react-components'; // TODO I added many examples here for easier implementation. This story will be simplified to keep only the default example export const Default = (props: Partial) => ( -
-
- - } - secondaryText="Secondary text" - dismissible={true} - {...props} - > - Primary text - - - } - dismissible={true} - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } - secondaryText="Secondary text" - dismissible={true} - {...props} - {...props} - > - Primary text - - } dismissible={true} {...props}> - Primary text - - } {...props}> - Primary text - - Primary text -
-
- - } - secondaryText="Secondary text" - dismissible={true} - {...props} - > - Primary text - - - } - dismissible={true} - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } - secondaryText="Secondary text" - dismissible={true} - {...props} - {...props} - > - Primary text - - } dismissible={true} {...props}> - Primary text - - } {...props}> - Primary text - - - Primary text - -
-
+ <> +
Medium:
+ +
+
+ + } + secondaryText="Secondary text" + dismissible={true} + {...props} + > + Primary text + + + } + dismissible={true} + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } + secondaryText="Secondary text" + dismissible={true} + {...props} + {...props} + > + Primary text + + } dismissible={true} {...props}> + Primary text + + } {...props}> + Primary text + + Primary text +
+
+ + } + secondaryText="Secondary text" + dismissible={true} + {...props} + > + Primary text + + + } + dismissible={true} + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } + secondaryText="Secondary text" + dismissible={true} + {...props} + {...props} + > + Primary text + + } dismissible={true} {...props}> + Primary text + + } {...props}> + Primary text + + + Primary text + +
+
+ +
+
+
Small:
+ +
+
+ + } + dismissible={true} + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } dismissible={true} {...props}> + Primary text + + } {...props}> + Primary text + + Primary text +
+
+ + } + dismissible={true} + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } dismissible={true} {...props}> + Primary text + + } {...props}> + Primary text + + + Primary text + +
+
+ +
+
+
Extra small:
+ +
+
+ + } + dismissible={true} + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } dismissible={true} {...props}> + Primary text + + } {...props}> + Primary text + + Primary text +
+
+ + } + dismissible={true} + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } dismissible={true} {...props}> + Primary text + + } {...props}> + Primary text + + + Primary text + +
+
+ + ); From ba9ee7b732a02fe6d3bb107dc3ca6390264b7c66 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 14 Jun 2023 20:47:44 +0200 Subject: [PATCH 3/9] HACK force tag on PR docsite --- apps/public-docsite-v9/.storybook/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index a57e9a915e54d..4baca4c684a25 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/apps/public-docsite-v9/.storybook/main.js @@ -15,6 +15,7 @@ module.exports = /** @type {Omit Date: Fri, 16 Jun 2023 12:31:09 +0200 Subject: [PATCH 4/9] make styles nicer --- .../src/components/Tag/useTagStyles.styles.ts | 321 +++++++++--------- .../TagButton/useTagButtonStyles.styles.ts | 299 +++++++++------- 2 files changed, 336 insertions(+), 284 deletions(-) diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts index 628375c23cbec..66214279b8047 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts +++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts @@ -13,90 +13,46 @@ export const tagClassNames: SlotClassNames = { dismissIcon: 'fui-Tag__dismissIcon', }; -export const tagSpacingMedium = '7px'; -export const tagSpacingSmall = '5px'; - /** - * Base styles shared by Tag/TagButton + * Inner horizontal space left and right of Tag */ -export const useTagBaseStyles = makeStyles({ - media: { - ...shorthands.gridArea('media'), - display: 'flex', - alignItems: 'center', - paddingLeft: '1px', - paddingRight: tokens.spacingHorizontalS, - }, - icon: { - ...shorthands.gridArea('media'), - display: 'flex', - alignSelf: 'center', - paddingLeft: tagSpacingMedium, - paddingRight: tokens.spacingHorizontalXS, - width: '20px', - fontSize: '20px', - }, - primaryText: { - gridColumnStart: 'primary', - gridRowStart: 'primary', - gridRowEnd: 'secondary', - ...typographyStyles.body1, - paddingLeft: tokens.spacingHorizontalXXS, - paddingRight: tokens.spacingHorizontalXXS, - whiteSpace: 'nowrap', - paddingBottom: tokens.spacingHorizontalXXS, - }, - primaryTextWithSecondaryText: { - ...shorthands.gridArea('primary'), - ...typographyStyles.caption1, - paddingBottom: tokens.spacingHorizontalNone, - marginTop: '-2px', - }, - secondaryText: { - ...shorthands.gridArea('secondary'), - paddingLeft: tokens.spacingHorizontalXXS, - paddingRight: tokens.spacingHorizontalXXS, - ...typographyStyles.caption2, - whiteSpace: 'nowrap', - }, -}); +const tagSpacingMedium = '7px'; +const tagSpacingSmall = '5px'; +const tagSpacingExtraSmall = '5px'; -export const useResetButtonStyles = makeStyles({ - resetButton: { - color: 'inherit', +const mediumIconSize = '20px'; +const smallIconSize = '16px'; +const extraSmallIconSize = '12px'; + +const useRootStyles = makeStyles({ + base: { + // TODO use makeResetStyle when styles are settled + + // reset default button style: fontFamily: 'inherit', - lineHeight: 'normal', - ...shorthands.overflow('visible'), ...shorthands.padding(0), - ...shorthands.borderStyle('none'), appearance: 'button', textAlign: 'unset', - backgroundColor: 'transparent', - }, -}); -const useTagStyles = makeStyles({ - root: { - // TODO use makeResetStyle when styles are settled display: 'inline-grid', alignItems: 'center', - gridTemplateRows: '1fr auto auto 1fr', gridTemplateAreas: ` - "media . dismissIcon" "media primary dismissIcon" "media secondary dismissIcon" - "media . dismissIcon" `, - boxSizing: 'border-box', - height: '32px', width: 'fit-content', - ...shorthands.borderRadius(tokens.borderRadiusMedium), - backgroundColor: tokens.colorNeutralBackground3, color: tokens.colorNeutralForeground2, ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke), + ':hover': { + cursor: 'pointer', + }, + }, + + rounded: { + ...shorthands.borderRadius(tokens.borderRadiusMedium), ...createCustomFocusIndicatorStyle( { ...shorthands.borderRadius(tokens.borderRadiusMedium), @@ -104,81 +60,158 @@ const useTagStyles = makeStyles({ }, { enableOutline: true }, ), - - ':hover': { - cursor: 'pointer', - }, }, - rootCircular: { + circular: { ...shorthands.borderRadius(tokens.borderRadiusCircular), - ...createCustomFocusIndicatorStyle({ - ...shorthands.borderRadius(tokens.borderRadiusCircular), - }), + ...createCustomFocusIndicatorStyle( + { + ...shorthands.borderRadius(tokens.borderRadiusCircular), + ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2), + }, + { enableOutline: true }, + ), + }, + + medium: { + height: '32px', + }, + small: { + height: '24px', }, - rootWithoutMedia: { + 'extra-small': { + height: '20px', + }, +}); +/** + * Styles for root slot when Tag is without leading media/icon + */ +const useRootWithoutMediaStyles = makeStyles({ + medium: { paddingLeft: tagSpacingMedium, }, - rootWithoutDismiss: { - paddingRight: tagSpacingMedium, + small: { + paddingLeft: tagSpacingSmall, }, - - dismissIcon: { - ...shorthands.gridArea('dismissIcon'), - display: 'flex', - alignItems: 'center', - fontSize: '20px', - paddingLeft: tokens.spacingHorizontalXS, + 'extra-small': { + paddingLeft: tagSpacingExtraSmall, + }, +}); +/** + * Styles for root slot when Tag is without dismiss icon + */ +const useRootWithoutDismissStyles = makeStyles({ + medium: { paddingRight: tagSpacingMedium, }, - - // TODO add additional classes for fill/outline appearance, different sizes, and state + small: { + paddingRight: tagSpacingSmall, + }, + 'extra-small': { + paddingRight: tagSpacingExtraSmall, + }, }); -const useSharedSmallTagStyles = makeStyles({ - rootWithoutMedia: { +export const useIconStyles = makeStyles({ + base: { + ...shorthands.gridArea('media'), + display: 'flex', + }, + medium: { + paddingLeft: tagSpacingMedium, + paddingRight: tokens.spacingHorizontalXS, + width: mediumIconSize, + fontSize: mediumIconSize, + }, + small: { paddingLeft: tagSpacingSmall, + paddingRight: tokens.spacingHorizontalXXS, + width: smallIconSize, + fontSize: smallIconSize, }, - rootWithoutDismiss: { - paddingRight: tagSpacingSmall, + 'extra-small': { + paddingLeft: tagSpacingExtraSmall, + paddingRight: tokens.spacingHorizontalXXS, + width: extraSmallIconSize, + fontSize: extraSmallIconSize, }, +}); - media: { +export const useMediaStyles = makeStyles({ + base: { + ...shorthands.gridArea('media'), + display: 'flex', + paddingLeft: '1px', + }, + medium: { + paddingRight: tokens.spacingHorizontalS, + }, + small: { paddingRight: tokens.spacingHorizontalSNudge, }, - icon: { - paddingLeft: tagSpacingSmall, - paddingRight: tokens.spacingHorizontalXXS, + 'extra-small': { + paddingRight: tokens.spacingHorizontalSNudge, }, - dismissIcon: { +}); + +const useDismissIconStyles = makeStyles({ + base: { + ...shorthands.gridArea('dismissIcon'), + display: 'flex', + }, + medium: { + paddingLeft: tokens.spacingHorizontalXS, + paddingRight: tagSpacingMedium, + fontSize: mediumIconSize, + }, + small: { paddingLeft: tokens.spacingHorizontalXXS, paddingRight: tagSpacingSmall, + fontSize: smallIconSize, + }, + 'extra-small': { + paddingLeft: tokens.spacingHorizontalXXS, + paddingRight: tagSpacingExtraSmall, + fontSize: extraSmallIconSize, }, - primaryText: typographyStyles.caption1, }); -const useSmallTagStyles = makeStyles({ - root: { - height: '24px', +export const usePrimaryTextStyles = makeStyles({ + base: { + whiteSpace: 'nowrap', + paddingLeft: tokens.spacingHorizontalXXS, + paddingRight: tokens.spacingHorizontalXXS, + }, + + medium: { + ...typographyStyles.body1, }, - icon: { - width: '16px', - fontSize: '16px', + small: { + ...typographyStyles.caption1, }, - dismissIcon: { - fontSize: '16px', + 'extra-small': { + ...typographyStyles.caption1, }, -}); -const useExtraSmallTagStyles = makeStyles({ - root: { - height: '20px', + withoutSecondaryText: { + gridColumnStart: 'primary', + gridRowStart: 'primary', + gridRowEnd: 'secondary', + paddingBottom: tokens.spacingHorizontalXXS, }, - icon: { - width: '12px', - fontSize: '12px', + withSecondaryText: { + ...shorthands.gridArea('primary'), + ...typographyStyles.caption1, + marginTop: '-2px', }, - dismissIcon: { - fontSize: '12px', +}); + +export const useSecondaryTextStyles = makeStyles({ + base: { + ...shorthands.gridArea('secondary'), + paddingLeft: tokens.spacingHorizontalXXS, + paddingRight: tokens.spacingHorizontalXXS, + ...typographyStyles.caption2, + whiteSpace: 'nowrap', }, }); @@ -186,33 +219,27 @@ const useExtraSmallTagStyles = makeStyles({ * Apply styling to the Tag slots based on the state */ export const useTagStyles_unstable = (state: TagState): TagState => { - const baseStyles = useTagBaseStyles(); - const resetButtonStyles = useResetButtonStyles(); - const styles = useTagStyles(); + const rootStyles = useRootStyles(); + const rootWithoutMediaStyles = useRootWithoutMediaStyles(); + const rootWithoutDismissStyles = useRootWithoutDismissStyles(); - const sharedSmallStyles = useSharedSmallTagStyles(); - const smallStyles = useSmallTagStyles(); - const extraSmallStyles = useExtraSmallTagStyles(); + const iconStyles = useIconStyles(); + const mediaStyles = useMediaStyles(); + const dismissIconStyles = useDismissIconStyles(); + const primaryTextStyles = usePrimaryTextStyles(); + const secondaryTextStyles = useSecondaryTextStyles(); + + const { shape, size } = state; state.root.className = mergeClasses( tagClassNames.root, - resetButtonStyles.resetButton, - - styles.root, - state.shape === 'circular' && styles.rootCircular, - !state.media && !state.icon && styles.rootWithoutMedia, - !state.dismissIcon && styles.rootWithoutDismiss, - state.size === 'small' && smallStyles.root, - state.size === 'extra-small' && extraSmallStyles.root, + rootStyles.base, + rootStyles[shape], + rootStyles[size], - (state.size === 'small' || state.size === 'extra-small') && - !state.media && - !state.icon && - sharedSmallStyles.rootWithoutMedia, - (state.size === 'small' || state.size === 'extra-small') && - !state.dismissIcon && - sharedSmallStyles.rootWithoutDismiss, + !state.media && !state.icon && rootWithoutMediaStyles[size], + !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className, ); @@ -220,28 +247,22 @@ export const useTagStyles_unstable = (state: TagState): TagState => { if (state.media) { state.media.className = mergeClasses( tagClassNames.media, - baseStyles.media, - (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.media, + mediaStyles.base, + mediaStyles[size], state.media.className, ); } if (state.icon) { - state.icon.className = mergeClasses( - tagClassNames.icon, - baseStyles.icon, - (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.icon, - state.size === 'small' && smallStyles.icon, - state.size === 'extra-small' && extraSmallStyles.icon, - state.icon.className, - ); + state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className); } if (state.primaryText) { state.primaryText.className = mergeClasses( tagClassNames.primaryText, - baseStyles.primaryText, - state.secondaryText && baseStyles.primaryTextWithSecondaryText, - (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.primaryText, + primaryTextStyles.base, + primaryTextStyles[size], + + state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className, ); @@ -249,19 +270,15 @@ export const useTagStyles_unstable = (state: TagState): TagState => { if (state.secondaryText) { state.secondaryText.className = mergeClasses( tagClassNames.secondaryText, - baseStyles.secondaryText, + secondaryTextStyles.base, state.secondaryText.className, ); } if (state.dismissIcon) { state.dismissIcon.className = mergeClasses( tagClassNames.dismissIcon, - styles.dismissIcon, - - (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.dismissIcon, - state.size === 'small' && smallStyles.dismissIcon, - state.size === 'extra-small' && extraSmallStyles.dismissIcon, - + dismissIconStyles.base, + dismissIconStyles[size], state.dismissIcon.className, ); } diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts index 85f422b22fc50..e822a2d2124bd 100644 --- a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts +++ b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts @@ -2,8 +2,13 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { TagButtonSlots, TagButtonState } from './TagButton.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; -import { tokens, typographyStyles } from '@fluentui/react-theme'; -import { useResetButtonStyles, useTagBaseStyles, tagSpacingMedium, tagSpacingSmall } from '../Tag/index'; +import { tokens } from '@fluentui/react-theme'; +import { + useIconStyles, + useMediaStyles, + usePrimaryTextStyles, + useSecondaryTextStyles, +} from '../Tag/useTagStyles.styles'; export const tagButtonClassNames: SlotClassNames = { root: 'fui-TagButton', @@ -15,135 +20,174 @@ export const tagButtonClassNames: SlotClassNames = { dismissButton: 'fui-TagButton__dismissButton', }; -const useStyles = makeStyles({ - root: { - // TODO use makeResetStyle when styles are settled - display: 'inline-flex', +const mediumIconSize = '20px'; +const smallIconSize = '16px'; +const extraSmallIconSize = '12px'; +const useRootStyles = makeStyles({ + base: { + display: 'inline-flex', + alignItems: 'center', boxSizing: 'border-box', - height: '32px', width: 'fit-content', - ...shorthands.borderRadius(tokens.borderRadiusMedium), backgroundColor: tokens.colorNeutralBackground3, color: tokens.colorNeutralForeground2, ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke), }, - rootCircular: shorthands.borderRadius(tokens.borderRadiusCircular), - content: { + rounded: shorthands.borderRadius(tokens.borderRadiusMedium), + circular: shorthands.borderRadius(tokens.borderRadiusCircular), + + medium: { + height: '32px', + }, + small: { + height: '24px', + }, + 'extra-small': { + height: '20px', + }, +}); + +const useContentButtonStyles = makeStyles({ + base: { + // TODO use makeResetStyle when styles are settled + + // reset default button style: + color: 'inherit', + fontFamily: 'inherit', + ...shorthands.padding(0), + ...shorthands.borderStyle('none'), + appearance: 'button', + textAlign: 'unset', + backgroundColor: 'transparent', + display: 'inline-grid', - gridTemplateRows: '1fr auto auto 1fr', + height: '100%', + alignItems: 'center', gridTemplateAreas: ` - "media . " "media primary " "media secondary" - "media . " `, - paddingRight: tagSpacingMedium, - - ...createCustomFocusIndicatorStyle( - { - ...shorthands.borderRadius(tokens.borderRadiusMedium), - ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2), - zIndex: 1, - }, - { enableOutline: true }, - ), ':hover': { cursor: 'pointer', }, }, - circularContent: createCustomFocusIndicatorStyle(shorthands.borderRadius(tokens.borderRadiusCircular)), - contentWithoutMedia: { - paddingLeft: tagSpacingMedium, + + rounded: createCustomFocusIndicatorStyle( + { + ...shorthands.borderRadius(tokens.borderRadiusMedium), + ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2), + zIndex: 1, + }, + { enableOutline: true }, + ), + circular: createCustomFocusIndicatorStyle( + { + ...shorthands.borderRadius(tokens.borderRadiusCircular), + ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2), + zIndex: 1, + }, + { enableOutline: true }, + ), + + medium: { + paddingRight: '7px', + }, + small: { + paddingRight: '5px', + }, + 'extra-small': { + paddingRight: '5px', + }, +}); +/** + * Styles for content slot when TagButton is without leading media/icon + */ +const useContentButtonWithoutMediaStyles = makeStyles({ + medium: { + paddingLeft: '7px', + }, + small: { + paddingLeft: '5px', + }, + 'extra-small': { + paddingLeft: '5px', }, - dismissibleContent: { +}); +/** + * Styles for content slot when TagButton has dismiss button + */ +const useDismissibleContentButtonStyles = makeStyles({ + base: createCustomFocusIndicatorStyle({ + borderTopRightRadius: tokens.borderRadiusNone, + borderBottomRightRadius: tokens.borderRadiusNone, + }), + medium: { paddingRight: tokens.spacingHorizontalS, - ...createCustomFocusIndicatorStyle({ - borderTopRightRadius: tokens.borderRadiusNone, - borderBottomRightRadius: tokens.borderRadiusNone, - }), }, + small: { + paddingRight: tokens.spacingHorizontalSNudge, + }, + 'extra-small': { + paddingRight: tokens.spacingHorizontalSNudge, + }, +}); + +const useDismissButtonStyles = makeStyles({ + base: { + // reset default button style: + color: 'inherit', + fontFamily: 'inherit', + ...shorthands.padding(0), + ...shorthands.borderStyle('none'), + appearance: 'button', + textAlign: 'unset', + backgroundColor: 'transparent', - dismissButton: { display: 'flex', + height: '100%', alignItems: 'center', - fontSize: '20px', - paddingLeft: '5px', - paddingRight: '5px', // divider: ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1), - borderTopLeftRadius: tokens.borderRadiusNone, borderBottomLeftRadius: tokens.borderRadiusNone, - ...createCustomFocusIndicatorStyle({ - ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2), - borderTopLeftRadius: tokens.borderRadiusNone, - borderBottomLeftRadius: tokens.borderRadiusNone, - borderTopRightRadius: tokens.borderRadiusMedium, - borderBottomRightRadius: tokens.borderRadiusMedium, - }), ':hover': { cursor: 'pointer', }, }, - dismissButtonCircular: createCustomFocusIndicatorStyle({ + + rounded: createCustomFocusIndicatorStyle({ + ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2), + borderTopLeftRadius: tokens.borderRadiusNone, + borderBottomLeftRadius: tokens.borderRadiusNone, + borderTopRightRadius: tokens.borderRadiusMedium, + borderBottomRightRadius: tokens.borderRadiusMedium, + }), + circular: createCustomFocusIndicatorStyle({ + ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2), + borderTopLeftRadius: tokens.borderRadiusNone, + borderBottomLeftRadius: tokens.borderRadiusNone, borderTopRightRadius: tokens.borderRadiusCircular, borderBottomRightRadius: tokens.borderRadiusCircular, }), - // TODO add additional classes for fill/outline appearance, different sizes, and state -}); - -const useSharedSmallTagButtonStyles = makeStyles({ - content: { - paddingRight: tagSpacingSmall, - }, - contentWithoutMedia: { - paddingLeft: tagSpacingSmall, - }, - dismissibleContent: { - paddingRight: tokens.spacingHorizontalSNudge, - }, - media: { - paddingRight: tokens.spacingHorizontalSNudge, - }, - icon: { - paddingLeft: tagSpacingSmall, - paddingRight: tokens.spacingHorizontalXXS, - }, - primaryText: typographyStyles.caption1, -}); - -const useSmallTagButtonStyles = makeStyles({ - root: { - height: '24px', - }, - icon: { - width: '16px', - fontSize: '16px', + medium: { + fontSize: mediumIconSize, + paddingLeft: '5px', + paddingRight: '5px', }, - dismissButton: { - fontSize: '16px', + small: { + fontSize: smallIconSize, paddingLeft: '3px', paddingRight: '3px', }, -}); - -const useExtraSmallTagButtonStyles = makeStyles({ - root: { - height: '20px', - }, - icon: { - width: '12px', - fontSize: '12px', - }, - dismissButton: { - fontSize: '12px', + 'extra-small': { + fontSize: extraSmallIconSize, paddingLeft: '5px', paddingRight: '5px', }, @@ -153,42 +197,39 @@ const useExtraSmallTagButtonStyles = makeStyles({ * Apply styling to the TagButton slots based on the state */ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonState => { - const baseStyles = useTagBaseStyles(); - const resetButtonStyles = useResetButtonStyles(); - const styles = useStyles(); + const rootStyles = useRootStyles(); - const sharedSmallStyles = useSharedSmallTagButtonStyles(); - const smallStyles = useSmallTagButtonStyles(); - const extraSmallStyles = useExtraSmallTagButtonStyles(); + const contentButtonStyles = useContentButtonStyles(); + const contentButtonWithoutMediaStyles = useContentButtonWithoutMediaStyles(); + const dismissibleContentButtonStyles = useDismissibleContentButtonStyles(); - state.root.className = mergeClasses( - tagButtonClassNames.root, - styles.root, - state.shape === 'circular' && styles.rootCircular, + const iconStyles = useIconStyles(); + const mediaStyles = useMediaStyles(); + const primaryTextStyles = usePrimaryTextStyles(); + const secondaryTextStyles = useSecondaryTextStyles(); + const dismissButtonStyles = useDismissButtonStyles(); - state.size === 'small' && smallStyles.root, - state.size === 'extra-small' && extraSmallStyles.root, + const { shape, size } = state; + state.root.className = mergeClasses( + tagButtonClassNames.root, + rootStyles.base, + rootStyles[shape], + rootStyles[size], state.root.className, ); + if (state.content) { state.content.className = mergeClasses( tagButtonClassNames.content, - resetButtonStyles.resetButton, - styles.content, - state.shape === 'circular' && styles.circularContent, - !state.media && !state.icon && styles.contentWithoutMedia, - state.dismissible && styles.dismissibleContent, - - (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.content, - (state.size === 'small' || state.size === 'extra-small') && - !state.media && - !state.icon && - sharedSmallStyles.contentWithoutMedia, - (state.size === 'small' || state.size === 'extra-small') && - state.dismissible && - sharedSmallStyles.dismissibleContent, + contentButtonStyles.base, + contentButtonStyles[shape], + contentButtonStyles[size], + + !state.media && !state.icon && contentButtonWithoutMediaStyles[size], + state.dismissible && dismissibleContentButtonStyles.base, + state.dismissible && dismissibleContentButtonStyles[size], state.content.className, ); @@ -197,28 +238,27 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta if (state.media) { state.media.className = mergeClasses( tagButtonClassNames.media, - baseStyles.media, - (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.media, + mediaStyles.base, + mediaStyles[size], state.media.className, ); } if (state.icon) { state.icon.className = mergeClasses( tagButtonClassNames.icon, - baseStyles.icon, - (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.icon, - state.size === 'small' && smallStyles.icon, - state.size === 'extra-small' && extraSmallStyles.icon, + iconStyles.base, + iconStyles[size], state.icon.className, ); } if (state.primaryText) { state.primaryText.className = mergeClasses( tagButtonClassNames.primaryText, - baseStyles.primaryText, - state.secondaryText && baseStyles.primaryTextWithSecondaryText, - (state.size === 'small' || state.size === 'extra-small') && sharedSmallStyles.primaryText, + primaryTextStyles.base, + primaryTextStyles[size], + + state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className, ); @@ -226,21 +266,16 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta if (state.secondaryText) { state.secondaryText.className = mergeClasses( tagButtonClassNames.secondaryText, - baseStyles.secondaryText, + secondaryTextStyles.base, state.secondaryText.className, ); } if (state.dismissButton) { state.dismissButton.className = mergeClasses( tagButtonClassNames.dismissButton, - resetButtonStyles.resetButton, - - styles.dismissButton, - state.shape === 'circular' && styles.dismissButtonCircular, - - state.size === 'small' && smallStyles.dismissButton, - state.size === 'extra-small' && extraSmallStyles.dismissButton, - + dismissButtonStyles.base, + dismissButtonStyles[shape], + dismissButtonStyles[size], state.dismissButton.className, ); } From 0164af3076885cfe386375bf548b95151c7e0151 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Fri, 16 Jun 2023 12:48:12 +0200 Subject: [PATCH 5/9] stories --- .../stories/Tag/TagSize.stories.tsx | 61 +++++++++++++++++++ .../react-tags/stories/Tag/index.stories.tsx | 1 + .../TagButton/TagButtonSize.stories.tsx | 61 +++++++++++++++++++ .../stories/TagButton/index.stories.tsx | 1 + .../TagGroup/TagGroupSizes.stories.tsx | 20 +++--- 5 files changed, 133 insertions(+), 11 deletions(-) create mode 100644 packages/react-components/react-tags/stories/Tag/TagSize.stories.tsx create mode 100644 packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx diff --git a/packages/react-components/react-tags/stories/Tag/TagSize.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagSize.stories.tsx new file mode 100644 index 0000000000000..55f0b715c70f2 --- /dev/null +++ b/packages/react-components/react-tags/stories/Tag/TagSize.stories.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import { Avatar, makeStyles } from '@fluentui/react-components'; +import { CalendarMonthRegular } from '@fluentui/react-icons'; + +import { Tag } from '@fluentui/react-tags'; + +const useContainerStyles = makeStyles({ + innerWrapper: { + alignItems: 'start', + columnGap: '10px', + display: 'flex', + }, + outerWrapper: { + display: 'flex', + flexDirection: 'column', + rowGap: '10px', + }, +}); +export const Size = () => { + const styles = useContainerStyles(); + return ( +
+
+ Medium + }> + Medium dismissible + + } shape="circular"> + Medium circular + +
+
+ Small + + }> + Small dismissible + + } shape="circular"> + Small circular + +
+
+ Extra small + + }> + Extra small dismissible + + } shape="circular"> + Extra small circular + +
+
+ ); +}; + +Size.storyName = 'Size'; +Size.parameters = { + docs: { + description: { story: 'A tag supports `medium`, `small` and `extra-small` size. Default size is `medium`.' }, + }, +}; diff --git a/packages/react-components/react-tags/stories/Tag/index.stories.tsx b/packages/react-components/react-tags/stories/Tag/index.stories.tsx index 722990b615cb6..b6b85183b5b5b 100644 --- a/packages/react-components/react-tags/stories/Tag/index.stories.tsx +++ b/packages/react-components/react-tags/stories/Tag/index.stories.tsx @@ -9,6 +9,7 @@ export { Media } from './TagMedia.stories'; export { SecondaryText } from './TagSecondaryText.stories'; export { Dismiss } from './TagDismiss.stories'; export { Shape } from './TagShape.stories'; +export { Size } from './TagSize.stories'; export default { title: 'Preview Components/Tag/Tag', diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx new file mode 100644 index 0000000000000..fbf7643d43ccf --- /dev/null +++ b/packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import { Avatar, makeStyles } from '@fluentui/react-components'; +import { CalendarMonthRegular } from '@fluentui/react-icons'; + +import { TagButton } from '@fluentui/react-tags'; + +const useContainerStyles = makeStyles({ + innerWrapper: { + alignItems: 'start', + columnGap: '10px', + display: 'flex', + }, + outerWrapper: { + display: 'flex', + flexDirection: 'column', + rowGap: '10px', + }, +}); +export const Size = () => { + const styles = useContainerStyles(); + return ( +
+
+ Medium + }> + Medium dismissible + + } shape="circular"> + Medium circular + +
+
+ Small + + }> + Small dismissible + + } shape="circular"> + Small circular + +
+
+ Extra small + + }> + Extra small dismissible + + } shape="circular"> + Extra small circular + +
+
+ ); +}; + +Size.storyName = 'Size'; +Size.parameters = { + docs: { + description: { story: 'A TagButton supports `medium`, `small` and `extra-small` size. Default size is `medium`.' }, + }, +}; diff --git a/packages/react-components/react-tags/stories/TagButton/index.stories.tsx b/packages/react-components/react-tags/stories/TagButton/index.stories.tsx index 2c588fbd79778..e58d4bdb2a2d1 100644 --- a/packages/react-components/react-tags/stories/TagButton/index.stories.tsx +++ b/packages/react-components/react-tags/stories/TagButton/index.stories.tsx @@ -9,6 +9,7 @@ export { Media } from './TagButtonMedia.stories'; export { SecondaryText } from './TagButtonSecondaryText.stories'; export { Dismiss } from './TagButtonDismiss.stories'; export { Shape } from './TagButtonShape.stories'; +export { Size } from './TagButtonSize.stories'; export default { title: 'Preview Components/Tag/TagButton', diff --git a/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx b/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx index 9657974c0b16e..fd62848eb144a 100644 --- a/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx +++ b/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { TagGroup, Tag, TagButton } from '@fluentui/react-tags'; import { Avatar, makeStyles } from '@fluentui/react-components'; -import { Calendar3Day20Regular } from '@fluentui/react-icons'; +import { Calendar3DayRegular } from '@fluentui/react-icons'; import { TagSize } from '../../src/Tag'; const useContainerStyles = makeStyles({ @@ -14,7 +14,6 @@ const useContainerStyles = makeStyles({ export const Sizes = () => { const containerStyles = useContainerStyles(); - // TODO add one more size const sizes: TagSize[] = ['medium', 'small', 'extra-small']; return (
@@ -22,17 +21,16 @@ export const Sizes = () => {
{`${size}: `} - Tag 1 - }>Tag 1 - }>Tag 1 - - Tag 1 + {size} }> - Tag 1 + {size} - }> - Tag 1 + } shape="circular"> + {size} + }> + {size} +
))} @@ -44,7 +42,7 @@ Sizes.storyName = 'Sizes'; Sizes.parameters = { docs: { description: { - story: 'A TagGroup supports different sizes', + story: 'A TagGroup supports `medium`, `small` and `extra-small` size. Default size is `medium`.', }, }, }; From 7e061688ae28657acc328451fbfe261029403285 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Fri, 16 Jun 2023 12:49:21 +0200 Subject: [PATCH 6/9] reset --- .../stories/Tag/TagDefault.stories.tsx | 465 +++++------------ .../TagButton/TagButtonDefault.stories.tsx | 489 ++++++------------ 2 files changed, 282 insertions(+), 672 deletions(-) diff --git a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx index a3f43e9b794b5..cbdcd13e85740 100644 --- a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx @@ -1,336 +1,141 @@ import * as React from 'react'; -import { Tag, TagGroup, TagProps } from '@fluentui/react-tags'; -import { Calendar3DayRegular } from '@fluentui/react-icons'; +import { Tag, TagProps } from '@fluentui/react-tags'; +import { Calendar3Day20Regular } from '@fluentui/react-icons'; import { Avatar } from '@fluentui/react-components'; // TODO I added many examples here for easier implementation. This story will be simplified to keep only the default example export const Default = (props: Partial) => ( - <> -
Medium:
- -
-
- - } - secondaryText="Secondary text" - dismissible - {...props} - > - Primary text - - - } - dismissible - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } secondaryText="Secondary text" dismissible {...props}> - Primary text - - } dismissible {...props}> - Primary text - - } {...props}> - Primary text - - Primary text -
-
- - } - secondaryText="Secondary text" - dismissible - {...props} - > - Primary text - - - } - dismissible - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } secondaryText="Secondary text" dismissible {...props}> - Primary text - - } dismissible {...props}> - Primary text - - } {...props}> - Primary text - - - Primary text - -
-
- -
-
-
Small:
- -
-
- - } - dismissible - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } dismissible {...props}> - Primary text - - } {...props}> - Primary text - - Primary text -
-
- - } - dismissible - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } dismissible {...props}> - Primary text - - } {...props}> - Primary text - - - Primary text - -
-
- -
-
-
Extra small:
- -
-
- - } - dismissible - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } dismissible {...props}> - Primary text - - } {...props}> - Primary text - - Primary text -
-
- - } - dismissible - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } dismissible {...props}> - Primary text - - } {...props}> - Primary text - - - Primary text - -
-
- - +
+
+ + } + secondaryText="Secondary text" + dismissible + {...props} + > + Primary text + + + } + dismissible + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } secondaryText="Secondary text" dismissible {...props}> + Primary text + + } dismissible {...props}> + Primary text + + } {...props}> + Primary text + + Primary text +
+
+ + } + secondaryText="Secondary text" + dismissible + {...props} + > + Primary text + + + } + dismissible + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } secondaryText="Secondary text" dismissible {...props}> + Primary text + + } dismissible {...props}> + Primary text + + } {...props}> + Primary text + + + Primary text + +
+
); diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx index 225ecdd19eca8..067a7b2fb2be7 100644 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx @@ -1,349 +1,154 @@ import * as React from 'react'; -import { TagButton, TagButtonProps, TagGroup } from '@fluentui/react-tags'; +import { TagButton, TagButtonProps } from '@fluentui/react-tags'; import { Calendar3Day20Regular } from '@fluentui/react-icons'; import { Avatar } from '@fluentui/react-components'; // TODO I added many examples here for easier implementation. This story will be simplified to keep only the default example export const Default = (props: Partial) => ( - <> -
Medium:
- -
-
- - } - secondaryText="Secondary text" - dismissible={true} - {...props} - > - Primary text - - - } - dismissible={true} - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } - secondaryText="Secondary text" - dismissible={true} - {...props} - {...props} - > - Primary text - - } dismissible={true} {...props}> - Primary text - - } {...props}> - Primary text - - Primary text -
-
- - } - secondaryText="Secondary text" - dismissible={true} - {...props} - > - Primary text - - - } - dismissible={true} - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } - secondaryText="Secondary text" - dismissible={true} - {...props} - {...props} - > - Primary text - - } dismissible={true} {...props}> - Primary text - - } {...props}> - Primary text - - - Primary text - -
-
- -
-
-
Small:
- -
-
- - } - dismissible={true} - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } dismissible={true} {...props}> - Primary text - - } {...props}> - Primary text - - Primary text -
-
- - } - dismissible={true} - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } dismissible={true} {...props}> - Primary text - - } {...props}> - Primary text - - - Primary text - -
-
- -
-
-
Extra small:
- -
-
- - } - dismissible={true} - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } dismissible={true} {...props}> - Primary text - - } {...props}> - Primary text - - Primary text -
-
- - } - dismissible={true} - {...props} - > - Primary text - - - } - {...props} - > - Primary text - - } dismissible={true} {...props}> - Primary text - - } {...props}> - Primary text - - - Primary text - -
-
- - +
+
+ + } + secondaryText="Secondary text" + dismissible={true} + {...props} + > + Primary text + + + } + dismissible={true} + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } + secondaryText="Secondary text" + dismissible={true} + {...props} + {...props} + > + Primary text + + } dismissible={true} {...props}> + Primary text + + } {...props}> + Primary text + + Primary text +
+
+ + } + secondaryText="Secondary text" + dismissible={true} + {...props} + > + Primary text + + + } + dismissible={true} + {...props} + > + Primary text + + + } + {...props} + > + Primary text + + } + secondaryText="Secondary text" + dismissible={true} + {...props} + {...props} + > + Primary text + + } dismissible={true} {...props}> + Primary text + + } {...props}> + Primary text + + + Primary text + +
+
); From 51177b860ea640c64843e7b7c901c0c89b5cf85a Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Fri, 16 Jun 2023 12:55:04 +0200 Subject: [PATCH 7/9] group style --- .../TagGroup/useTagGroupStyles.styles.ts | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts b/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts index 2f404fc5115cc..ecff3d75c06a8 100644 --- a/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts +++ b/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts @@ -10,15 +10,17 @@ export const tagGroupClassNames: SlotClassNames = { /** * Styles for the root slot */ -const useStyles = makeStyles({ - root: { +const useRootStyles = makeStyles({ + base: { display: 'inline-flex', + }, + medium: { columnGap: tokens.spacingHorizontalS, }, - rootSmall: { + small: { columnGap: tokens.spacingHorizontalSNudge, }, - rootExtraSmall: { + 'extra-small': { columnGap: tokens.spacingHorizontalXS, }, }); @@ -27,14 +29,9 @@ const useStyles = makeStyles({ * Apply styling to the TagGroup slots based on the state */ export const useTagGroupStyles_unstable = (state: TagGroupState): TagGroupState => { - const styles = useStyles(); - state.root.className = mergeClasses( - tagGroupClassNames.root, - styles.root, - state.size === 'small' && styles.rootSmall, - state.size === 'extra-small' && styles.rootExtraSmall, - state.root.className, - ); + const styles = useRootStyles(); + const { size } = state; + state.root.className = mergeClasses(tagGroupClassNames.root, styles.base, styles[size], state.root.className); return state; }; From 4ede124b534666aab16d27842516d3d6505d256a Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 20 Jun 2023 11:34:52 +0200 Subject: [PATCH 8/9] update story description --- .../react-tags/stories/TagGroup/TagGroupSizes.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx b/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx index fd62848eb144a..8711930996057 100644 --- a/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx +++ b/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx @@ -42,7 +42,8 @@ Sizes.storyName = 'Sizes'; Sizes.parameters = { docs: { description: { - story: 'A TagGroup supports `medium`, `small` and `extra-small` size. Default size is `medium`.', + story: + 'A TagGroup can set default size for all its tags. It supports `medium`, `small` and `extra-small` size. Default value is `medium`.', }, }, }; From 449c3718fbfbd92233de22318a878d5183f1c090 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 20 Jun 2023 11:36:22 +0200 Subject: [PATCH 9/9] remove pr publish story hack --- apps/public-docsite-v9/.storybook/main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js index 4baca4c684a25..a57e9a915e54d 100644 --- a/apps/public-docsite-v9/.storybook/main.js +++ b/apps/public-docsite-v9/.storybook/main.js @@ -15,7 +15,6 @@ module.exports = /** @type {Omit