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

Moving Interactive Tags to stable #17706

Merged
merged 7 commits into from
Oct 14, 2024
Merged

Moving Interactive Tags to stable #17706

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2f100f4
fix: moveing interactive tags to stable and remvoed slug from it
guidari Oct 9, 2024
a12f68c
test: fixed snapshots
guidari Oct 10, 2024
765f3e8
fix: fixed path
guidari Oct 10, 2024
734becf
docs: added text to with ai label example
guidari Oct 11, 2024
21d5eba
fix: added back ai label to dismissible tag
guidari Oct 14, 2024
f2bb355
fix: removed example test from stories
guidari Oct 14, 2024
9ca6938
test: fixed snapshots
guidari Oct 14, 2024
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
12 changes: 6 additions & 6 deletions e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ test.describe('@avt InteractiveTag', () => {
test('@avt-advanced-states DismissibleTag', async ({ page }) => {
await visitStory(page, {
component: 'Tag',
id: 'experimental-unstable-interactivetag--dismissible',
id: 'components-tag--dismissible',
globals: {
theme: 'white',
},
Expand All @@ -26,7 +26,7 @@ test.describe('@avt InteractiveTag', () => {
test('@avt-advanced-states OperationalTag', async ({ page }) => {
await visitStory(page, {
component: 'Tag',
id: 'experimental-unstable-interactivetag--operational',
id: 'components-tag--operational',
globals: {
theme: 'white',
},
Expand All @@ -37,7 +37,7 @@ test.describe('@avt InteractiveTag', () => {
test('@avt-advanced-states SelectableTag', async ({ page }) => {
await visitStory(page, {
component: 'Tag',
id: 'experimental-unstable-interactivetag--selectable',
id: 'components-tag--selectable',
globals: {
theme: 'white',
},
Expand All @@ -48,7 +48,7 @@ test.describe('@avt InteractiveTag', () => {
test('@avt-keyboard-nav DismissibleTag', async ({ page }) => {
await visitStory(page, {
component: 'Tag',
id: 'experimental-unstable-interactivetag--dismissible',
id: 'components-tag--dismissible',
globals: {
theme: 'white',
},
Expand Down Expand Up @@ -82,7 +82,7 @@ test.describe('@avt InteractiveTag', () => {
test('@avt-keyboard-nav OperationalTag', async ({ page }) => {
await visitStory(page, {
component: 'Tag',
id: 'experimental-unstable-interactivetag--operational',
id: 'components-tag--operational',
globals: {
theme: 'white',
},
Expand Down Expand Up @@ -117,7 +117,7 @@ test.describe('@avt InteractiveTag', () => {
test('@avt-keyboard-nav SelectableTag', async ({ page }) => {
await visitStory(page, {
component: 'Tag',
id: 'experimental-unstable-interactivetag--selectable',
id: 'components-tag--selectable',
globals: {
theme: 'white',
},
Expand Down
6 changes: 3 additions & 3 deletions e2e/components/InteractiveTag/InteractiveTag-test.e2e.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,23 @@ test.describe('InteractiveTag', () => {
test('DismissibleTag @vrt', async ({ page }) => {
await snapshotStory(page, {
component: 'DismissibleTag',
id: 'experimental-unstable-interactivetag--dismissible',
id: 'components-tag--dismissible',
theme,
});
});

test('OperationalTag @vrt', async ({ page }) => {
await snapshotStory(page, {
component: 'OperationalTag',
id: 'experimental-unstable-interactivetag--operational',
id: 'components-tag--operational',
theme,
});
});

test('SelectableTag @vrt', async ({ page }) => {
await snapshotStory(page, {
component: 'SelectableTag',
id: 'experimental-unstable-interactivetag--selectable',
id: 'components-tag--selectable',
theme,
});
});
Expand Down
9 changes: 0 additions & 9 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2959,9 +2959,6 @@ Map {
],
"type": "oneOf",
},
"slug": Object {
"type": "node",
},
"tagTitle": Object {
"type": "string",
},
Expand Down Expand Up @@ -5874,9 +5871,6 @@ Map {
],
"type": "oneOf",
},
"slug": Object {
"type": "node",
},
"text": Object {
"type": "string",
},
Expand Down Expand Up @@ -7012,9 +7006,6 @@ Map {
],
"type": "oneOf",
},
"slug": Object {
"type": "node",
},
"text": Object {
"type": "string",
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Tag/DismissibleTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ const DismissibleTag = <T extends React.ElementType>({
className={`${prefix}--tag__label`}>
{text}
</Text>
{normalizedSlug}
<Tooltip
label={isEllipsisApplied ? dismissLabel : title}
align="bottom"
Expand All @@ -164,7 +165,6 @@ const DismissibleTag = <T extends React.ElementType>({
<Close />
</button>
</Tooltip>
{normalizedSlug}
</div>
</Tag>
);
Expand Down
85 changes: 0 additions & 85 deletions packages/react/src/components/Tag/InteractiveTag.mdx
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions packages/react/src/components/Tag/InteractiveTag.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import { default as OperationalTag } from './OperationalTag';
import { default as DismissibleTag } from './DismissibleTag';
import { Asleep } from '@carbon/icons-react';
import { Popover, PopoverContent } from '../Popover';
import mdx from './InteractiveTag.mdx';
import mdx from './Tag.mdx';
import './storyInteractiveTag.scss';
import { Text } from '../Text';
import Button from '../Button';

export default {
title: 'Experimental/unstable__InteractiveTag',
title: 'Components/Tag',
component: SelectableTag,
parameters: {
docs: {
Expand Down
21 changes: 0 additions & 21 deletions packages/react/src/components/Tag/OperationalTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,6 @@ export interface OperationalTagBaseProps {
*/
size?: keyof typeof SIZES;

/**
* **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
*/
slug?: ReactNode;

/**
* Provide text to be rendered inside of a the tag.
*/
Expand All @@ -90,7 +85,6 @@ const OperationalTag = <T extends React.ElementType>({
disabled,
id,
renderIcon,
slug,
size,
text,
type = 'gray',
Expand All @@ -110,14 +104,6 @@ const OperationalTag = <T extends React.ElementType>({
setIsEllipsisApplied(isEllipsisActive(newElement));
}, [prefix, tagRef]);

let normalizedSlug;
if (slug && slug['type']?.displayName === 'AILabel') {
normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
size: 'sm',
kind: 'inline',
});
}

const tooltipClasses = classNames(
`${prefix}--icon-tooltip`,
`${prefix}--tag-label-tooltip`
Expand All @@ -144,7 +130,6 @@ const OperationalTag = <T extends React.ElementType>({
<Text title={text} className={`${prefix}--tag__label`}>
{text}
</Text>
{normalizedSlug}
</Tag>
</Tooltip>
);
Expand All @@ -160,7 +145,6 @@ const OperationalTag = <T extends React.ElementType>({
className={tagClasses}
id={tagId}
{...other}>
{normalizedSlug}
<Text title={text} className={`${prefix}--tag__label`}>
{text}
</Text>
Expand Down Expand Up @@ -196,11 +180,6 @@ OperationalTag.propTypes = {
*/
size: PropTypes.oneOf(Object.keys(SIZES)),

/**
* **Experimental:** Provide a `Slug` component to be rendered inside the `OperationalTag` component
*/
slug: PropTypes.node,

/**
* Provide text to be rendered inside of a the tag.
*/
Expand Down
23 changes: 0 additions & 23 deletions packages/react/src/components/Tag/SelectableTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,6 @@ export interface SelectableTagBaseProps {
*/
size?: keyof typeof SIZES;

/**
* **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
*/
slug?: ReactNode;

/**
* Provide text to be rendered inside of a the tag.
*/
Expand All @@ -71,7 +66,6 @@ const SelectableTag = <T extends React.ElementType>({
id,
renderIcon,
selected = false,
slug,
size,
text,
...other
Expand All @@ -92,14 +86,6 @@ const SelectableTag = <T extends React.ElementType>({
setIsEllipsisApplied(isEllipsisActive(newElement));
}, [prefix, tagRef]);

let normalizedSlug;
if (slug && slug['type']?.displayName === 'AILabel') {
normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
size: 'sm',
kind: 'inline',
});
}

const tooltipClasses = classNames(
`${prefix}--icon-tooltip`,
`${prefix}--tag-label-tooltip`
Expand All @@ -120,7 +106,6 @@ const SelectableTag = <T extends React.ElementType>({
<Tag
aria-pressed={selectedTag}
ref={tagRef}
slug={slug}
size={size}
renderIcon={renderIcon}
disabled={disabled}
Expand All @@ -131,7 +116,6 @@ const SelectableTag = <T extends React.ElementType>({
<Text title={text} className={`${prefix}--tag__label`}>
{text}
</Text>
{normalizedSlug}
</Tag>
</Tooltip>
);
Expand All @@ -141,15 +125,13 @@ const SelectableTag = <T extends React.ElementType>({
<Tag
aria-pressed={selectedTag}
ref={tagRef}
slug={slug}
size={size}
renderIcon={renderIcon}
disabled={disabled}
className={tagClasses}
id={tagId}
onClick={() => setSelectedTag(!selectedTag)}
{...otherProps}>
{normalizedSlug}
<Text title={text} className={`${prefix}--tag__label`}>
{text}
</Text>
Expand Down Expand Up @@ -190,11 +172,6 @@ SelectableTag.propTypes = {
*/
size: PropTypes.oneOf(Object.keys(SIZES)),

/**
* **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
*/
slug: PropTypes.node,

/**
* Provide text to be rendered inside of a the tag.
*/
Expand Down
Loading
Loading