Skip to content

add vr test to react-tags #28484

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

Merged
YuanboXue-Amber merged 9 commits into from
Jul 21, 2023
Merged

add vr test to react-tags #28484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f6ec291
vr
YuanboXue-Amber Jun 29, 2023
1fcb79e
vr
YuanboXue-Amber Jun 29, 2023
3156539
pkg.json
YuanboXue-Amber Jul 18, 2023
33ab5a7
update import to preview
YuanboXue-Amber Jul 18, 2023
1db8cca
Merge branch 'master' into tag-vr
YuanboXue-Amber Jul 19, 2023
dc165e0
hover for both content and dimiss
YuanboXue-Amber Jul 19, 2023
2d831c3
Merge branches 'tag-vr' and 'tag-vr' of https://github.com/YuanboXue-…
YuanboXue-Amber Jul 19, 2023
984f200
split
YuanboXue-Amber Jul 19, 2023
5ee61e2
remove some stories
YuanboXue-Amber Jul 19, 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
3 changes: 2 additions & 1 deletion apps/vr-tests-react-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,9 @@
"@fluentui/react-storybook-addon": "*",
Comment thread
YuanboXue-Amber marked this conversation as resolved.
"@fluentui/react-storybook-addon-codesandbox": "*",
"@fluentui/react-switch": "*",
"@fluentui/react-tabs": "*",
"@fluentui/react-table": "*",
"@fluentui/react-tabs": "*",
"@fluentui/react-tags-preview": "*",
"@fluentui/react-text": "*",
"@fluentui/react-textarea": "*",
"@fluentui/react-theme": "*",
Expand Down
83 changes: 83 additions & 0 deletions apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import * as React from 'react';
import { InteractionTag } from '@fluentui/react-tags-preview';
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
import { Avatar } from '@fluentui/react-avatar';
import { Steps } from 'storywright';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();

export default {
title: 'InteractionTag Converged',
Component: InteractionTag,
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof InteractionTag>;

export const Default = () => <InteractionTag>Primary Text</InteractionTag>;

export const DefaultRTL = getStoryVariant(Default, RTL);
export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);

// disabled
export const Disabled = () => (
<InteractionTag disabled dismissible icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);

export const OutlineDisabled = () => (
<InteractionTag appearance="outline" disabled dismissible icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH_CONTRAST);
export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);

export const BrandDisabled = () => (
<InteractionTag appearance="brand" disabled dismissible icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CONTRAST);
export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);

// size
export const SizeSmall = () => <InteractionTag size="small">Primary Text</InteractionTag>;
export const SizeSmallDismissible = () => (
<InteractionTag size="small" dismissible>
Primary Text
</InteractionTag>
);
export const SizeSmallWithIcon = () => (
<InteractionTag size="small" icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const SizeSmallWithMedia = () => (
<InteractionTag size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
Primary Text
</InteractionTag>
);

export const SizeExtraSmall = () => <InteractionTag size="extra-small">Primary Text</InteractionTag>;
export const SizeExtraSmallDismissible = () => (
<InteractionTag size="extra-small" dismissible>
Primary Text
</InteractionTag>
);
export const SizeExtraSmallWithIcon = () => (
<InteractionTag size="extra-small" icon={<CalendarMonth />}>
Primary Text
</InteractionTag>
);
export const SizeExtraSmallWithMedia = () => (
<InteractionTag size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
Primary Text
</InteractionTag>
);
83 changes: 83 additions & 0 deletions apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import * as React from 'react';
import { Tag } from '@fluentui/react-tags-preview';
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
import { ComponentMeta } from '@storybook/react';
import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
import { Avatar } from '@fluentui/react-avatar';
import { Steps } from 'storywright';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();

export default {
title: 'Tag Converged',
Component: Tag,
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof Tag>;

export const Default = () => <Tag>Primary Text</Tag>;

export const DefaultRTL = getStoryVariant(Default, RTL);
export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);

// disabled
export const Disabled = () => (
<Tag disabled dismissible icon={<CalendarMonth />}>
Primary Text
</Tag>
);
export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);

export const OutlineDisabled = () => (
<Tag appearance="outline" disabled dismissible icon={<CalendarMonth />}>
Primary Text
</Tag>
);
export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH_CONTRAST);
export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);

export const BrandDisabled = () => (
<Tag appearance="brand" disabled dismissible icon={<CalendarMonth />}>
Primary Text
</Tag>
);
export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CONTRAST);
export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);

// size
export const SizeSmall = () => <Tag size="small">Primary Text</Tag>;
export const SizeSmallDismissible = () => (
<Tag size="small" dismissible>
Primary Text
</Tag>
);
export const SizeSmallWithIcon = () => (
<Tag size="small" icon={<CalendarMonth />}>
Primary Text
</Tag>
);
export const SizeSmallWithMedia = () => (
<Tag size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
Primary Text
</Tag>
);

export const SizeExtraSmall = () => <Tag size="extra-small">Primary Text</Tag>;
export const SizeExtraSmallDismissible = () => (
<Tag size="extra-small" dismissible>
Primary Text
</Tag>
);
export const SizeExtraSmallWithIcon = () => (
<Tag size="extra-small" icon={<CalendarMonth />}>
Primary Text
</Tag>
);
export const SizeExtraSmallWithMedia = () => (
<Tag size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
Primary Text
</Tag>
);
55 changes: 55 additions & 0 deletions apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import * as React from 'react';
import { TagGroup, Tag, InteractionTag } from '@fluentui/react-tags-preview';
import { ComponentMeta } from '@storybook/react';
import { Steps } from 'storywright';
import { withStoryWrightSteps } from '../../utilities';

const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();

export default {
title: 'TagGroup Converged',
Component: TagGroup,
decorators: [story => withStoryWrightSteps({ story, steps })],
} as ComponentMeta<typeof TagGroup>;

export const Default = () => (
<TagGroup>
<Tag>Tag 1</Tag>
<Tag>Tag 2</Tag>
<Tag>Tag 3</Tag>
</TagGroup>
);

const onDismiss = () => ({});
export const Dismissible = () => (
<TagGroup onDismiss={onDismiss}>
<Tag>Tag 1</Tag>
<Tag>Tag 2</Tag>
<Tag>Tag 3</Tag>
</TagGroup>
);

export const DismissibleWithInteractionTag = () => (
<TagGroup onDismiss={onDismiss}>
<InteractionTag>Tag 1</InteractionTag>
<InteractionTag>Tag 2</InteractionTag>
<InteractionTag>Tag 3</InteractionTag>
</TagGroup>
);

// size
export const SizeSmall = () => (
<TagGroup size="small">
<Tag>Tag 1</Tag>
<Tag>Tag 2</Tag>
<Tag>Tag 3</Tag>
</TagGroup>
);

export const SizeExtraSmall = () => (
<TagGroup size="extra-small">
<Tag>Tag 1</Tag>
<Tag>Tag 2</Tag>
<Tag>Tag 3</Tag>
</TagGroup>
);