diff --git a/packages/react-components/react-tags/etc/react-tags.api.md b/packages/react-components/react-tags/etc/react-tags.api.md index c8e561dc6958cd..88eba16afc7998 100644 --- a/packages/react-components/react-tags/etc/react-tags.api.md +++ b/packages/react-components/react-tags/etc/react-tags.api.md @@ -44,12 +44,11 @@ export const tagClassNames: SlotClassNames; // @public export type TagProps = ComponentProps> & { - size?: 'extra-small' | 'small' | 'medium'; - shape?: 'rounded' | 'circular'; appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; disabled?: boolean; - checked?: boolean; - dismissable?: boolean; + dismissible?: boolean; + shape?: 'rounded' | 'circular'; + size?: 'extra-small' | 'small' | 'medium'; }; // @public (undocumented) @@ -64,7 +63,7 @@ export type TagSlots = { }; // @public -export type TagState = ComponentState & Required & { +export type TagState = ComponentState & Required & { avatarSize: AvatarSize | undefined; avatarShape: AvatarShape | undefined; }>; diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx index 480342e78bece2..df2e9e30a5fdfa 100644 --- a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx +++ b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx @@ -1,12 +1,13 @@ import { Tag } from './Tag'; import { isConformant } from '../../testing/isConformant'; +import { TagProps } from './Tag.types'; -const requiredProps = { - media: 'media', +const requiredProps: TagProps = { + dismissible: true, icon: 'i', + media: 'media', primaryText: 'Primary text', secondaryText: 'Secondary text', - dismissable: true, }; describe('Tag', () => { diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts index 9d130328b633c0..4a63246869152f 100644 --- a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts +++ b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts @@ -40,12 +40,13 @@ export type TagSlots = { * Tag Props */ export type TagProps = ComponentProps> & { - size?: 'extra-small' | 'small' | 'medium'; - shape?: 'rounded' | 'circular'; appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline'; + // TODO implement tag checked state + // checked?: boolean; disabled?: boolean; - checked?: boolean; - dismissable?: boolean; + dismissible?: boolean; + shape?: 'rounded' | 'circular'; + size?: 'extra-small' | 'small' | 'medium'; }; /** @@ -53,7 +54,7 @@ export type TagProps = ComponentProps> & { */ export type TagState = ComponentState & Required< - Pick & { + Pick & { avatarSize: AvatarSize | undefined; avatarShape: AvatarShape | undefined; } diff --git a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx index 6e382ca446cb48..92e79fd3afdee1 100644 --- a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx @@ -29,7 +29,7 @@ export const renderTag_unstable = (state: TagState, contextValues: TagContextVal {slots.secondaryText && } )} - {slots.dismissButton && state.dismissable && } + {slots.dismissButton && state.dismissible && } ); }; 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 35f804d5c4c2a5..92f9dcfb0613e2 100644 --- a/packages/react-components/react-tags/src/components/Tag/useTag.tsx +++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx @@ -28,15 +28,22 @@ const DismissIcon = bundleIcon(DismissFilled, DismissRegular); */ export const useTag_unstable = (props: TagProps, ref: React.Ref): TagState => { const { - checked = false, + appearance = 'filled-lighter', disabled = false, - dismissable = false, + dismissible = false, shape = 'rounded', size = 'medium', - appearance = 'filled-lighter', } = props; return { + appearance, + avatarShape: tagAvatarShapeMap[shape], + avatarSize: tagAvatarSizeMap[size], + disabled, + dismissible, + shape, + size, + components: { root: 'div', content: 'div', @@ -46,27 +53,19 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref): T secondaryText: 'span', dismissButton: 'button', }, - checked, - disabled, - dismissable, - shape, - size, - appearance, + root: getNativeElementProps('div', { ref, ...props, }), - avatarSize: tagAvatarSizeMap[size], - avatarShape: tagAvatarShapeMap[shape], - media: resolveShorthand(props.media), content: resolveShorthand(props.content, { required: true }), + media: resolveShorthand(props.media), icon: resolveShorthand(props.icon), primaryText: resolveShorthand(props.primaryText, { required: true }), secondaryText: resolveShorthand(props.secondaryText), - dismissButton: useARIAButtonShorthand(props.dismissButton, { - required: props.dismissable, + required: props.dismissible, defaultProps: { disabled, type: 'button', 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 1edf60c2352c94..127333f259289e 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 @@ -113,7 +113,7 @@ export const useTagBaseStyles = makeStyles({ }); const useTagStyles = makeStyles({ - dismissableContent: { + dismissibleContent: { paddingRight: '2px', }, dismissButton: { @@ -140,7 +140,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => { baseStyles.content, !state.media && !state.icon && baseStyles.textOnlyContent, - state.dismissButton && styles.dismissableContent, + state.dismissButton && styles.dismissibleContent, state.content.className, ); } diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx b/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx index 74dd557f5f6efd..003e20c001ac91 100644 --- a/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx @@ -6,7 +6,7 @@ const requiredProps = { icon: 'i', primaryText: 'Primary text', secondaryText: 'Secondary text', - dismissable: true, + dismissible: true, }; describe('TagButton', () => { diff --git a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx index 1d358dcaa60b5d..d8ebda08cd235f 100644 --- a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx +++ b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx @@ -29,7 +29,7 @@ export const renderTagButton_unstable = (state: TagButtonState, contextValues: T {slots.secondaryText && } )} - {slots.dismissButton && state.dismissable && } + {slots.dismissButton && state.dismissible && } ); }; 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 fb28d8ef924084..ff5763f957e8dd 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 @@ -33,7 +33,7 @@ const useStyles = makeStyles({ circularContent: createCustomFocusIndicatorStyle(shorthands.borderRadius(tokens.borderRadiusCircular), { enableOutline: true, }), - dismissableContent: { + dismissibleContent: { ...createCustomFocusIndicatorStyle({ borderTopRightRadius: tokens.borderRadiusNone, borderBottomRightRadius: tokens.borderRadiusNone, @@ -79,7 +79,7 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta styles.content, state.shape === 'circular' && styles.circularContent, - state.dismissButton && styles.dismissableContent, + state.dismissButton && styles.dismissibleContent, state.content.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 85917d78a12326..cbdcd13e85740e 100644 --- a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx @@ -20,7 +20,7 @@ export const Default = (props: Partial) => ( /> } secondaryText="Secondary text" - dismissable={true} + dismissible {...props} > Primary text @@ -37,7 +37,7 @@ export const Default = (props: Partial) => ( }} /> } - dismissable={true} + dismissible {...props} > Primary text @@ -58,10 +58,10 @@ export const Default = (props: Partial) => ( > Primary text - } secondaryText="Secondary text" dismissable={true} {...props} {...props}> + } secondaryText="Secondary text" dismissible {...props}> Primary text - } dismissable={true} {...props}> + } dismissible {...props}> Primary text } {...props}> @@ -84,7 +84,7 @@ export const Default = (props: Partial) => ( /> } secondaryText="Secondary text" - dismissable={true} + dismissible {...props} > Primary text @@ -102,7 +102,7 @@ export const Default = (props: Partial) => ( }} /> } - dismissable={true} + dismissible {...props} > Primary text @@ -124,17 +124,10 @@ export const Default = (props: Partial) => ( > Primary text - } - secondaryText="Secondary text" - dismissable={true} - {...props} - {...props} - > + } secondaryText="Secondary text" dismissible {...props}> Primary text - } dismissable={true} {...props}> + } dismissible {...props}> Primary text } {...props}> diff --git a/packages/react-components/react-tags/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDismiss.stories.tsx index c5b805116d96d4..52cddfec88a2db 100644 --- a/packages/react-components/react-tags/stories/Tag/TagDismiss.stories.tsx +++ b/packages/react-components/react-tags/stories/Tag/TagDismiss.stories.tsx @@ -16,12 +16,12 @@ export const Dismiss = () => { const containerStyles = useContainerStyles(); return (
- Primary text - }> + Primary text + }> Primary text } secondaryText="Secondary text" > diff --git a/packages/react-components/react-tags/stories/Tag/TagShape.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagShape.stories.tsx index 620b4001ce5e12..af3fd6c08a7ccd 100644 --- a/packages/react-components/react-tags/stories/Tag/TagShape.stories.tsx +++ b/packages/react-components/react-tags/stories/Tag/TagShape.stories.tsx @@ -22,10 +22,10 @@ export const Shape = () => { Circular - } secondaryText="Secondary text"> + } secondaryText="Secondary text"> Rounded - } secondaryText="Secondary text"> + } secondaryText="Secondary text"> Circular
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 a9ef63153070a5..067a7b2fb2be70 100644 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx +++ b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx @@ -20,7 +20,7 @@ export const Default = (props: Partial) => ( /> } secondaryText="Secondary text" - dismissable={true} + dismissible={true} {...props} > Primary text @@ -37,7 +37,7 @@ export const Default = (props: Partial) => ( }} /> } - dismissable={true} + dismissible={true} {...props} > Primary text @@ -61,13 +61,13 @@ export const Default = (props: Partial) => ( } secondaryText="Secondary text" - dismissable={true} + dismissible={true} {...props} {...props} > Primary text - } dismissable={true} {...props}> + } dismissible={true} {...props}> Primary text } {...props}> @@ -90,7 +90,7 @@ export const Default = (props: Partial) => ( /> } secondaryText="Secondary text" - dismissable={true} + dismissible={true} {...props} > Primary text @@ -108,7 +108,7 @@ export const Default = (props: Partial) => ( }} /> } - dismissable={true} + dismissible={true} {...props} > Primary text @@ -134,13 +134,13 @@ export const Default = (props: Partial) => ( shape="circular" icon={} secondaryText="Secondary text" - dismissable={true} + dismissible={true} {...props} {...props} > Primary text - } dismissable={true} {...props}> + } dismissible={true} {...props}> Primary text } {...props}> diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx index f10a12d9b45e1e..b0656cc1fae249 100644 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx +++ b/packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx @@ -16,12 +16,12 @@ export const Dismiss = () => { const containerStyles = useContainerStyles(); return (
- Primary text - }> + Primary text + }> Primary text } secondaryText="Secondary text" > diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx index 3f45196559c4b0..4133f1460fe00c 100644 --- a/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx +++ b/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx @@ -22,10 +22,10 @@ export const Shape = () => { Circular - } secondaryText="Secondary text"> + } secondaryText="Secondary text"> Rounded - } secondaryText="Secondary text"> + } secondaryText="Secondary text"> Circular