Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-tags: rename dismissable to dismissible #27798

Merged
merged 7 commits into from
May 9, 2023
Merged

react-tags: rename dismissable to dismissible #27798

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cc8e75c
rename
YuanboXue-Amber May 9, 2023
34237f8
fix
YuanboXue-Amber May 9, 2023
813cf0b
api
YuanboXue-Amber May 9, 2023
7be4009
Merge branch 'master' into dismissible
YuanboXue-Amber May 9, 2023
e2ab073
change dismissible={true} to just dismiss
YuanboXue-Amber May 9, 2023
8a7c618
alphabetic sort
YuanboXue-Amber May 9, 2023
867c0c9
remove crud
YuanboXue-Amber May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions packages/react-components/react-tags/etc/react-tags.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,11 @@ export const tagClassNames: SlotClassNames<TagSlots>;

// @public
export type TagProps = ComponentProps<Partial<TagSlots>> & {
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)
Expand All @@ -64,7 +63,7 @@ export type TagSlots = {
};

// @public
export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'checked' | 'disabled' | 'dismissable' | 'shape' | 'size'> & {
export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'> & {
avatarSize: AvatarSize | undefined;
avatarShape: AvatarShape | undefined;
}>;
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/react-tags/src/components/Tag/Tag.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import { Tag } from './Tag';
import { isConformant } from '../../testing/isConformant';

const requiredProps = {
media: 'media',
dismissible: true,
icon: 'i',
media: 'media',
primaryText: 'Primary text',
secondaryText: 'Secondary text',
dismissable: true,
};

describe('Tag', () => {
Expand Down
11 changes: 6 additions & 5 deletions packages/react-components/react-tags/src/components/Tag/Tag.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,20 +40,21 @@ export type TagSlots = {
* Tag Props
*/
export type TagProps = ComponentProps<Partial<TagSlots>> & {
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';
};

/**
* State used in rendering Tag
*/
export type TagState = ComponentState<TagSlots> &
Required<
Pick<TagProps, 'appearance' | 'checked' | 'disabled' | 'dismissable' | 'shape' | 'size'> & {
Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'> & {
avatarSize: AvatarSize | undefined;
avatarShape: AvatarShape | undefined;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-tags/src/components/Tag/renderTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const renderTag_unstable = (state: TagState, contextValues: TagContextVal
{slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}
</slots.content>
)}
{slots.dismissButton && state.dismissable && <slots.dismissButton {...slotProps.dismissButton} />}
{slots.dismissButton && state.dismissible && <slots.dismissButton {...slotProps.dismissButton} />}
</slots.root>
);
};
25 changes: 12 additions & 13 deletions packages/react-components/react-tags/src/components/Tag/useTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,22 @@ const DismissIcon = bundleIcon(DismissFilled, DismissRegular);
*/
export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): TagState => {
const {
checked = false,
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',
Expand All @@ -46,27 +53,19 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): 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',
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export const useTagBaseStyles = makeStyles({
});

const useTagStyles = makeStyles({
dismissableContent: {
dismissibleContent: {
paddingRight: '2px',
},
dismissButton: {
Expand All @@ -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,
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const requiredProps = {
icon: 'i',
primaryText: 'Primary text',
secondaryText: 'Secondary text',
dismissable: true,
dismissible: true,
};

describe('TagButton', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const renderTagButton_unstable = (state: TagButtonState, contextValues: T
{slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}
</slots.content>
)}
{slots.dismissButton && state.dismissable && <slots.dismissButton {...slotProps.dismissButton} />}
{slots.dismissButton && state.dismissible && <slots.dismissButton {...slotProps.dismissButton} />}
</slots.root>
);
};
4 changes: 2 additions & 2 deletions packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const useStyles = makeStyles({
circularContent: createCustomFocusIndicatorStyle(shorthands.borderRadius(tokens.borderRadiusCircular), {
enableOutline: true,
}),
dismissableContent: {
dismissibleContent: {
...createCustomFocusIndicatorStyle({
borderTopRightRadius: tokens.borderRadiusNone,
borderBottomRightRadius: tokens.borderRadiusNone,
Expand Down Expand Up @@ -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,
);
Expand Down
16 changes: 8 additions & 8 deletions packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const Default = (props: Partial<TagProps>) => (
/>
}
secondaryText="Secondary text"
dismissable={true}
dismissible={true}
{...props}
>
Primary text
Expand All @@ -37,7 +37,7 @@ export const Default = (props: Partial<TagProps>) => (
}}
/>
}
dismissable={true}
dismissible={true}
{...props}
>
Primary text
Expand All @@ -58,10 +58,10 @@ export const Default = (props: Partial<TagProps>) => (
>
Primary text
</Tag>
<Tag icon={<Calendar3Day20Regular />} secondaryText="Secondary text" dismissable={true} {...props} {...props}>
<Tag icon={<Calendar3Day20Regular />} secondaryText="Secondary text" dismissible={true} {...props} {...props}>
Primary text
</Tag>
<Tag icon={<Calendar3Day20Regular />} dismissable={true} {...props}>
<Tag icon={<Calendar3Day20Regular />} dismissible={true} {...props}>
Primary text
</Tag>
<Tag icon={<Calendar3Day20Regular />} {...props}>
Expand All @@ -84,7 +84,7 @@ export const Default = (props: Partial<TagProps>) => (
/>
}
secondaryText="Secondary text"
dismissable={true}
dismissible={true}
{...props}
>
Primary text
Expand All @@ -102,7 +102,7 @@ export const Default = (props: Partial<TagProps>) => (
}}
/>
}
dismissable={true}
dismissible={true}
{...props}
>
Primary text
Expand All @@ -128,13 +128,13 @@ export const Default = (props: Partial<TagProps>) => (
shape="circular"
icon={<Calendar3Day20Regular />}
secondaryText="Secondary text"
dismissable={true}
dismissible={true}
{...props}
{...props}
>
Primary text
</Tag>
<Tag shape="circular" icon={<Calendar3Day20Regular />} dismissable={true} {...props}>
<Tag shape="circular" icon={<Calendar3Day20Regular />} dismissible={true} {...props}>
Primary text
</Tag>
<Tag shape="circular" icon={<Calendar3Day20Regular />} {...props}>
Expand Down
6 changes: 3 additions & 3 deletions packages/react-components/react-tags/stories/Tag/TagDismiss.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ export const Dismiss = () => {
const containerStyles = useContainerStyles();
return (
<div className={containerStyles.root}>
<Tag dismissable>Primary text</Tag>
<Tag dismissable icon={<Calendar3Day20Regular />}>
<Tag dismissible>Primary text</Tag>
<Tag dismissible icon={<Calendar3Day20Regular />}>
Primary text
</Tag>
<Tag
dismissable
dismissible
media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
secondaryText="Secondary text"
>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/react-tags/stories/Tag/TagShape.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export const Shape = () => {
Circular
</Tag>

<Tag dismissable icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
<Tag dismissible icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
Rounded
</Tag>
<Tag shape="circular" dismissable icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
<Tag shape="circular" dismissible icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
Circular
</Tag>
</div>
Expand Down
16 changes: 8 additions & 8 deletions packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const Default = (props: Partial<TagButtonProps>) => (
/>
}
secondaryText="Secondary text"
dismissable={true}
dismissible={true}
{...props}
>
Primary text
Expand All @@ -37,7 +37,7 @@ export const Default = (props: Partial<TagButtonProps>) => (
}}
/>
}
dismissable={true}
dismissible={true}
{...props}
>
Primary text
Expand All @@ -61,13 +61,13 @@ export const Default = (props: Partial<TagButtonProps>) => (
<TagButton
icon={<Calendar3Day20Regular />}
secondaryText="Secondary text"
dismissable={true}
dismissible={true}
{...props}
{...props}
>
Primary text
</TagButton>
<TagButton icon={<Calendar3Day20Regular />} dismissable={true} {...props}>
<TagButton icon={<Calendar3Day20Regular />} dismissible={true} {...props}>
Primary text
</TagButton>
<TagButton icon={<Calendar3Day20Regular />} {...props}>
Expand All @@ -90,7 +90,7 @@ export const Default = (props: Partial<TagButtonProps>) => (
/>
}
secondaryText="Secondary text"
dismissable={true}
dismissible={true}
{...props}
>
Primary text
Expand All @@ -108,7 +108,7 @@ export const Default = (props: Partial<TagButtonProps>) => (
}}
/>
}
dismissable={true}
dismissible={true}
{...props}
>
Primary text
Expand All @@ -134,13 +134,13 @@ export const Default = (props: Partial<TagButtonProps>) => (
shape="circular"
icon={<Calendar3Day20Regular />}
secondaryText="Secondary text"
dismissable={true}
dismissible={true}
{...props}
{...props}
>
Primary text
</TagButton>
<TagButton shape="circular" icon={<Calendar3Day20Regular />} dismissable={true} {...props}>
<TagButton shape="circular" icon={<Calendar3Day20Regular />} dismissible={true} {...props}>
Primary text
</TagButton>
<TagButton shape="circular" icon={<Calendar3Day20Regular />} {...props}>
Expand Down
6 changes: 3 additions & 3 deletions packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ export const Dismiss = () => {
const containerStyles = useContainerStyles();
return (
<div className={containerStyles.root}>
<TagButton dismissable>Primary text</TagButton>
<TagButton dismissable icon={<Calendar3Day20Regular />}>
<TagButton dismissible>Primary text</TagButton>
<TagButton dismissible icon={<Calendar3Day20Regular />}>
Primary text
</TagButton>
<TagButton
dismissable
dismissible
media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
secondaryText="Secondary text"
>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export const Shape = () => {
Circular
</TagButton>

<TagButton dismissable icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
<TagButton dismissible icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
Rounded
</TagButton>
<TagButton shape="circular" dismissable icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
<TagButton shape="circular" dismissible icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
Circular
</TagButton>
</div>
Expand Down