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

chore(react-tags-preview): update dismiss and overflow story #29260

Merged
merged 12 commits into from
Sep 25, 2023
+216 −41
Merged

chore(react-tags-preview): update dismiss and overflow story #29260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3bb0464
overflow
YuanboXue-Amber Sep 22, 2023
caeccf6
dismiss
YuanboXue-Amber Sep 22, 2023
ec30af1
cleanup
YuanboXue-Amber Sep 22, 2023
97e9ee8
crud
YuanboXue-Amber Sep 22, 2023
6b330f8
Update packages/react-components/react-tags-preview/stories/Interacti…
YuanboXue-Amber Sep 25, 2023
3e97658
Update packages/react-components/react-tags-preview/stories/Interacti…
YuanboXue-Amber Sep 25, 2023
9b28b5a
Update packages/react-components/react-tags-preview/stories/Tag/TagDi…
YuanboXue-Amber Sep 25, 2023
fe62f17
Update packages/react-components/react-tags-preview/stories/Tag/TagDi…
YuanboXue-Amber Sep 25, 2023
f9cef1e
Update packages/react-components/react-tags-preview/stories/TagGroup/…
YuanboXue-Amber Sep 25, 2023
40253f0
Update packages/react-components/react-tags-preview/stories/TagGroup/…
YuanboXue-Amber Sep 25, 2023
a6b240d
Update packages/react-components/react-tags-preview/stories/TagGroup/…
YuanboXue-Amber Sep 25, 2023
9dd4255
Update packages/react-components/react-tags-preview/stories/TagGroup/…
YuanboXue-Amber Sep 25, 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
70 changes: 61 additions & 9 deletions ...ct-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';

import { Button, makeStyles } from '@fluentui/react-components';
import {
InteractionTag,
InteractionTagPrimary,
Expand All @@ -8,27 +8,79 @@ import {
TagGroupProps,
} from '@fluentui/react-tags-preview';

const useStyles = makeStyles({
container: {
display: 'flex',
flexDirection: 'column',
rowGap: '10px',
},
resetButton: {
width: 'fit-content',
},
});

const initialTags = [
{ value: '1', children: 'Tag 1' },
{ value: '2', children: 'Tag 2' },
{ value: '3', children: 'Tag 3' },
];

/**
* focus management for the reset button
*/
const useResetExample = (visibleTagsLength: number) => {
const resetButtonRef = React.useRef<HTMLButtonElement>(null);
const firstTagRef = React.useRef<HTMLButtonElement>(null);

const prevVisibleTagsLengthRef = React.useRef<number>(visibleTagsLength);
React.useEffect(() => {
if (visibleTagsLength === 0) {
resetButtonRef.current?.focus();
} else if (prevVisibleTagsLengthRef.current === 0) {
firstTagRef.current?.focus();
}

prevVisibleTagsLengthRef.current = visibleTagsLength;
}, [visibleTagsLength]);

return { firstTagRef, resetButtonRef };
};

export const Dismiss = () => {
const [visibleTags, setVisibleTags] = React.useState(initialTags);
const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => {
setVisibleTags([...visibleTags].filter(tag => tag.value !== value));
};
const resetItems = () => setVisibleTags(initialTags);
const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length);

const styles = useStyles();

return (
<TagGroup onDismiss={removeItem} aria-label="Dismiss example">
{visibleTags.map(tag => (
<InteractionTag value={tag.value} key={tag.value}>
<InteractionTagPrimary hasSecondaryAction>{tag.children}</InteractionTagPrimary>
<InteractionTagSecondary aria-label="remove" />
</InteractionTag>
))}
</TagGroup>
<div className={styles.container}>
{visibleTags.length !== 0 && (
<TagGroup onDismiss={removeItem} aria-label="Dismiss example">
{visibleTags.map((tag, index) => (
<InteractionTag value={tag.value} key={tag.value}>
<InteractionTagPrimary hasSecondaryAction ref={index === 0 ? firstTagRef : null}>
{tag.children}
</InteractionTagPrimary>
<InteractionTagSecondary aria-label="remove" />
</InteractionTag>
))}
</TagGroup>
)}

<Button
onClick={resetItems}
ref={resetButtonRef}
disabled={visibleTags.length !== 0}
className={styles.resetButton}
size="small"
>
Reset the example
</Button>
</div>
);
};

Expand Down
71 changes: 64 additions & 7 deletions packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,83 @@
import * as React from 'react';
import { Tag, TagGroup, TagGroupProps } from '@fluentui/react-tags-preview';
import { Button, makeStyles } from '@fluentui/react-components';

const useStyles = makeStyles({
container: {
display: 'flex',
flexDirection: 'column',
rowGap: '10px',
},
resetButton: {
width: 'fit-content',
},
});

const initialTags = [
{ value: '1', children: 'Tag 1' },
{ value: '2', children: 'Tag 2' },
{ value: '3', children: 'Tag 3' },
];

/**
* focus management for the reset button
*/
const useResetExample = (visibleTagsLength: number) => {
const resetButtonRef = React.useRef<HTMLButtonElement>(null);
const firstTagRef = React.useRef<HTMLButtonElement>(null);

const prevVisibleTagsLengthRef = React.useRef<number>(visibleTagsLength);
React.useEffect(() => {
if (visibleTagsLength === 0) {
resetButtonRef.current?.focus();
} else if (prevVisibleTagsLengthRef.current === 0) {
firstTagRef.current?.focus();
}

prevVisibleTagsLengthRef.current = visibleTagsLength;
}, [visibleTagsLength]);

return { firstTagRef, resetButtonRef };
};

export const Dismiss = () => {
const [visibleTags, setVisibleTags] = React.useState(initialTags);
const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => {
setVisibleTags([...visibleTags].filter(tag => tag.value !== value));
};
const resetItems = () => setVisibleTags(initialTags);
const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length);

const styles = useStyles();

return (
<TagGroup onDismiss={removeItem} aria-label="Dismiss example">
{visibleTags.map(tag => (
<Tag dismissible dismissIcon={{ 'aria-label': 'remove' }} value={tag.value} key={tag.value}>
{tag.children}
</Tag>
))}
</TagGroup>
<div className={styles.container}>
{visibleTags.length !== 0 && (
<TagGroup onDismiss={removeItem} aria-label="Dismiss example">
{visibleTags.map((tag, index) => (
<Tag
dismissible
dismissIcon={{ 'aria-label': 'remove' }}
value={tag.value}
key={tag.value}
ref={index === 0 ? firstTagRef : null}
>
{tag.children}
</Tag>
))}
</TagGroup>
)}

<Button
onClick={resetItems}
ref={resetButtonRef}
disabled={visibleTags.length !== 0}
className={styles.resetButton}
size="small"
>
Reset the example
</Button>
</div>
);
};

Expand Down
114 changes: 90 additions & 24 deletions packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,83 @@ import {
InteractionTagPrimary,
InteractionTagSecondary,
} from '@fluentui/react-tags-preview';
import { makeStyles } from '@fluentui/react-components';
import { Button, makeStyles } from '@fluentui/react-components';

const useStyles = makeStyles({
container: {
display: 'flex',
flexDirection: 'column',
rowGap: '10px',
},
resetButton: {
width: 'fit-content',
},
});

const initialTags = [
{ value: '1', children: 'Tag 1' },
{ value: '2', children: 'Tag 2' },
{ value: '3', children: 'Tag 3' },
];

/**
* focus management for the reset button
*/
const useResetExample = (visibleTagsLength: number) => {
const resetButtonRef = React.useRef<HTMLButtonElement>(null);
const firstTagRef = React.useRef<HTMLButtonElement>(null);

const prevVisibleTagsLengthRef = React.useRef<number>(visibleTagsLength);
React.useEffect(() => {
if (visibleTagsLength === 0) {
resetButtonRef.current?.focus();
} else if (prevVisibleTagsLengthRef.current === 0) {
firstTagRef.current?.focus();
}

prevVisibleTagsLengthRef.current = visibleTagsLength;
}, [visibleTagsLength]);

return { firstTagRef, resetButtonRef };
};

const DismissWithTags = () => {
const [visibleTags, setVisibleTags] = React.useState(initialTags);
const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => {
setVisibleTags([...visibleTags].filter(tag => tag.value !== value));
};
const resetItems = () => setVisibleTags(initialTags);
const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length);

const styles = useStyles();

return (
<TagGroup onDismiss={removeItem} aria-label="TagGroup example with dismissible Tags">
{visibleTags.map(tag => (
<Tag dismissible dismissIcon={{ 'aria-label': 'remove' }} value={tag.value} key={tag.value}>
{tag.children}
</Tag>
))}
</TagGroup>
<>
{visibleTags.length !== 0 && (
<TagGroup onDismiss={removeItem} aria-label="TagGroup example with dismissible Tags">
{visibleTags.map((tag, index) => (
<Tag
dismissible
dismissIcon={{ 'aria-label': 'remove' }}
value={tag.value}
key={tag.value}
ref={index === 0 ? firstTagRef : null}
>
{tag.children}
</Tag>
))}
</TagGroup>
)}
<Button
onClick={resetItems}
ref={resetButtonRef}
disabled={visibleTags.length !== 0}
className={styles.resetButton}
size="small"
>
Reset the example
</Button>
</>
);
};

Expand All @@ -37,27 +92,38 @@ const DismissWithInteractionTags = () => {
const removeItem: TagGroupProps['onDismiss'] = (_e, { value }) => {
setVisibleTags([...visibleTags].filter(tag => tag.value !== value));
};
const resetItems = () => setVisibleTags(initialTags);
const { firstTagRef, resetButtonRef } = useResetExample(visibleTags.length);

const styles = useStyles();

return (
<TagGroup onDismiss={removeItem} aria-label="Dismiss example">
{visibleTags.map(tag => (
<InteractionTag value={tag.value} key={tag.value}>
<InteractionTagPrimary hasSecondaryAction>{tag.children}</InteractionTagPrimary>
<InteractionTagSecondary aria-label="remove" />
</InteractionTag>
))}
</TagGroup>
<>
{visibleTags.length !== 0 && (
<TagGroup onDismiss={removeItem} aria-label="Dismiss example">
{visibleTags.map((tag, index) => (
<InteractionTag value={tag.value} key={tag.value}>
<InteractionTagPrimary hasSecondaryAction ref={index === 0 ? firstTagRef : null}>
{tag.children}
</InteractionTagPrimary>
<InteractionTagSecondary aria-label="remove" />
</InteractionTag>
))}
</TagGroup>
)}
<Button
onClick={resetItems}
ref={resetButtonRef}
disabled={visibleTags.length !== 0}
className={styles.resetButton}
size="small"
>
Reset the example
</Button>
</>
);
};

const useStyles = makeStyles({
container: {
display: 'flex',
flexDirection: 'column',
rowGap: '10px',
},
});

export const Dismiss = () => {
const styles = useStyles();
return (
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export const WithOverflow = () => {

return (
<div className={styles.container}>
<Overflow minimumVisible={2} padding={30}>
<Overflow minimumVisible={2} padding={60}>
<TagGroup className={styles.tagGroup} aria-label="Overflow example">
{defaultItems.map(({ value, ...rest }) => (
<OverflowItem key={value} id={value!}>
Expand Down