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.

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

Tag ellipses with Tooltip #15959

Closed
wants to merge 18 commits into from
Closed
Changes from 17 commits
Commits
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
13 changes: 12 additions & 1 deletion e2e/components/InteractiveTag/InteractiveTag-test.avt.e2e.js
Original file line number Diff line number Diff line change
@@ -53,10 +53,12 @@ test.describe('@avt InteractiveTag', () => {
theme: 'white',
},
});
const tooltip = page.getByRole('tooltip');
const button = page.getByRole('button').first();
await expect(button).toBeVisible();
await page.keyboard.press('Tab');
await expect(button).toBeFocused();
await expect(tooltip).toHaveAttribute('aria-hidden', 'false');
});

test('@avt-keyboard-nav OperationalTag', async ({ page }) => {
@@ -71,6 +73,10 @@ test.describe('@avt InteractiveTag', () => {
await expect(button).toBeVisible();
await page.keyboard.press('Tab');
await expect(button).toBeFocused();
await expect(page.getByRole('tooltip')).toHaveAttribute(
'aria-hidden',
'false'
);
await expect(button).toHaveClass(/cds--tag--red/);

await page.keyboard.press('Tab');
@@ -87,7 +93,7 @@ test.describe('@avt InteractiveTag', () => {
// Expecte the OperationalTag with tooltip be focusable and visible
await expect(page.getByRole('button').nth(10)).toBeFocused();
await page.keyboard.press('Enter');
await expect(page.getByText('View More')).toBeVisible();
await expect(page.getByText('Tag 1 name').first()).toBeVisible();
});

test('@avt-keyboard-nav SelectableTag', async ({ page }) => {
@@ -104,5 +110,10 @@ test.describe('@avt InteractiveTag', () => {
await expect(tag).toBeFocused();
await page.keyboard.press('Enter');
await expect(tag).toHaveClass(/cds--tag--selectable-selected/);
await page.keyboard.press('Tab');
await expect(page.getByRole('tooltip')).toHaveAttribute(
'aria-hidden',
'false'
);
});
});
19 changes: 19 additions & 0 deletions e2e/components/Tag/Tag-test.avt.e2e.js
Original file line number Diff line number Diff line change
@@ -32,4 +32,23 @@ test.describe('@avt Tag', () => {
});
await expect(page).toHaveNoACViolations('Tag-skeleton');
});

test('@avt-keyboard-nav Tag', async ({ page }) => {
await visitStory(page, {
component: 'Tag',
id: 'components-tag--read-only',
globals: {
theme: 'white',
},
});
const button = page.getByRole('button').first();
await expect(button).toBeVisible();
await page.keyboard.press('Tab');
await expect(button).toBeFocused();
// Expect Tooltip to be visible
await expect(page.getByRole('tooltip')).toHaveAttribute(
'aria-hidden',
'false'
);
});
});
Original file line number Diff line number Diff line change
@@ -8421,6 +8421,9 @@ Map {
"slug": Object {
"type": "node",
},
"text": Object {
"type": "string",
},
"title": [Function],
"type": Object {
"args": Array [
49 changes: 25 additions & 24 deletions packages/react/src/components/Tag/DismissibleTag.tsx
Original file line number Diff line number Diff line change
@@ -17,11 +17,6 @@ import { Close } from '@carbon/icons-react';
const getInstanceId = setupGetInstanceId();

export interface DismissibleTagBaseProps {
/**
* Provide content to be rendered inside of a `DismissibleTag`
*/
children?: React.ReactNode;

/**
* Provide a custom className that is applied to the containing <span>
*/
@@ -59,6 +54,11 @@ export interface DismissibleTagBaseProps {
*/
slug?: ReactNodeLike;

/**
* Provide text to be rendered inside of a the tag.
*/
text?: string;

/**
* Text to show on clear filters
*/
@@ -76,7 +76,6 @@ export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<
>;

const DismissibleTag = <T extends React.ElementType>({
children,
className,
disabled,
id,
@@ -85,6 +84,7 @@ const DismissibleTag = <T extends React.ElementType>({
onClose,
slug,
size,
text,
type,
...other
}: DismissibleTagProps<T>) => {
@@ -118,30 +118,26 @@ const DismissibleTag = <T extends React.ElementType>({
renderIcon={renderIcon}
disabled={disabled}
className={tagClasses}
text={text}
id={tagId}
{...otherProps}>
<div className={`${prefix}--interactive--tag-children`}>
{children}
{normalizedSlug}
<button
type="button"
className={`${prefix}--tag__close-icon`}
onClick={handleClose}
disabled={disabled}
aria-label={title}
title={title}>
<Close />
</button>
</div>
{normalizedSlug}
<button
onFocus={(event) => {
event.stopPropagation();
}}
type="button"
className={`${prefix}--tag__close-icon`}
onClick={handleClose}
disabled={disabled}
aria-label={title}
title={title}>
<Close />
</button>
</Tag>
);
};
DismissibleTag.propTypes = {
/**
* Provide content to be rendered inside of a `DismissibleTag`
*/
children: PropTypes.node,

/**
* Provide a custom className that is applied to the containing <span>
*/
@@ -179,6 +175,11 @@ DismissibleTag.propTypes = {
*/
slug: PropTypes.node,

/**
* Provide text to be rendered inside of a the tag.
*/
text: PropTypes.string,

/**
* Text to show on clear filters
*/
173 changes: 86 additions & 87 deletions packages/react/src/components/Tag/InteractiveTag.stories.js
Original file line number Diff line number Diff line change
@@ -11,11 +11,9 @@ import { default as SelectableTag } from './SelectableTag';
import { default as OperationalTag } from './OperationalTag';
import { default as DismissibleTag } from './DismissibleTag';
import { Asleep } from '@carbon/icons-react';
import { Tooltip } from '../Tooltip';
import { Toggletip, ToggletipButton, ToggletipContent } from '../Toggletip';
import { Popover, PopoverContent } from '../Popover';
import mdx from './InteractiveTag.mdx';
import { usePrefix } from '../../internal/usePrefix';
import './storyInteractiveTag.scss';

export default {
@@ -30,9 +28,20 @@ export default {

export const Selectable = (args) => {
return (
<SelectableTag renderIcon={Asleep} className="some-class" {...args}>
{'Tag content'}
</SelectableTag>
<>
<SelectableTag
renderIcon={Asleep}
text="Tag content with a long text description"
className="some-class"
{...args}
/>
<SelectableTag
renderIcon={Asleep}
text="Tag content"
className="some-class"
{...args}
/>
</>
);
};

@@ -79,7 +88,6 @@ Selectable.argTypes = {
};

export const Operational = (args) => {
const prefix = usePrefix();
const [open, setOpen] = useState(false);

return (
@@ -89,72 +97,72 @@ export const Operational = (args) => {
type="red"
className="some-class"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</OperationalTag>
text="Tag content with a long text description"
{...args}
/>
<OperationalTag
type="magenta"
className="some-class"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</OperationalTag>
text="Tag content"
{...args}
/>
<OperationalTag
type="purple"
className="some-class"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</OperationalTag>
text="Tag content"
{...args}
/>
<OperationalTag
type="blue"
className="some-class"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</OperationalTag>
text="Tag content"
{...args}
/>
<OperationalTag
type="cyan"
className="some-class"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</OperationalTag>
text="Tag content"
{...args}
/>
<OperationalTag
type="teal"
className="some-class"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</OperationalTag>
text="Tag content"
{...args}
/>
<OperationalTag
type="green"
className="some-class"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</OperationalTag>
text="Tag content"
{...args}
/>
<OperationalTag
type="gray"
className="some-class"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</OperationalTag>
text="Tag content"
{...args}
/>
<OperationalTag
type="cool-gray"
className="some-class"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</OperationalTag>
text="Tag content"
{...args}
/>
<OperationalTag
type="warm-gray"
className="some-class"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</OperationalTag>
text="Tag content"
{...args}
/>
</div>

<h4>Interactive examples</h4>
@@ -165,23 +173,14 @@ export const Operational = (args) => {
justifyContent: 'flex-start',
marginTop: '1rem',
}}>
<Tooltip
label="View more"
align="bottom"
className={`${prefix}--icon-tooltip`}>
<OperationalTag className="some-class" renderIcon={Asleep} {...args}>
{'Tag content'}
</OperationalTag>
</Tooltip>

<Toggletip>
<ToggletipButton label="Tag content" tabIndex={-1} as="div">
<OperationalTag
renderIcon={Asleep}
text="Tag content"
className="some-class"
{...args}>
{'Tag content'}
</OperationalTag>
{...args}
/>
</ToggletipButton>
<ToggletipContent>
<div style={{ lineHeight: 0 }}>
@@ -200,10 +199,10 @@ export const Operational = (args) => {
setOpen(!open);
}}
renderIcon={Asleep}
text="Tag content"
className="some-class"
{...args}>
{'Tag content'}
</OperationalTag>
{...args}
/>
<PopoverContent>
<div
style={{
@@ -299,97 +298,97 @@ export const Dismissible = (args) => {
className="some-class"
title="Clear Filter"
renderIcon={Asleep}
{...args}>
{'Tag content'}
</DismissibleTag>
text="Tag content with a long text description"
{...args}
/>
<DismissibleTag
type="magenta"
className="some-class"
title="Clear Filter"
text="Tag content"
renderIcon={Asleep}
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
<DismissibleTag
type="purple"
className="some-class"
title="Clear Filter"
text="Tag content"
renderIcon={Asleep}
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
<DismissibleTag
type="blue"
className="some-class"
title="Clear Filter"
renderIcon={Asleep}
text="Tag content"
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
<DismissibleTag
type="cyan"
className="some-class"
title="Clear Filter"
renderIcon={Asleep}
text="Tag content"
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
<DismissibleTag
type="teal"
className="some-class"
title="Clear Filter"
renderIcon={Asleep}
text="Tag content"
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
<DismissibleTag
type="green"
className="some-class"
title="Clear Filter"
renderIcon={Asleep}
text="Tag content"
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
<DismissibleTag
type="gray"
className="some-class"
title="Clear Filter"
renderIcon={Asleep}
text="Tag content"
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
<DismissibleTag
type="cool-gray"
className="some-class"
title="Clear Filter"
renderIcon={Asleep}
text="Tag content"
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
<DismissibleTag
type="warm-gray"
className="some-class"
title="Clear Filter"
renderIcon={Asleep}
text="Tag content"
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
<DismissibleTag
type="high-contrast"
className="some-class"
title="Clear Filter"
renderIcon={Asleep}
text="Tag content"
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
<DismissibleTag
type="outline"
className="some-class"
title="Clear Filter"
renderIcon={Asleep}
text="Tag content"
{...args}
renderIcon={Asleep}>
{'Tag content'}
</DismissibleTag>
/>
</>
);
};
28 changes: 13 additions & 15 deletions packages/react/src/components/Tag/OperationalTag.tsx
Original file line number Diff line number Diff line change
@@ -29,11 +29,6 @@ const TYPES = {
};

export interface OperationalTagBaseProps {
/**
* Provide content to be rendered inside of a `OperationalTag`
*/
children?: React.ReactNode;

/**
* Provide a custom className that is applied to the containing <span>
*/
@@ -67,6 +62,11 @@ export interface OperationalTagBaseProps {
*/
slug?: ReactNodeLike;

/**
* Provide text to be rendered inside of a the tag.
*/
text?: string;

/**
* Specify the type of the `Tag`
*/
@@ -79,13 +79,13 @@ export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<
>;

const OperationalTag = <T extends React.ElementType>({
children,
className,
disabled,
id,
renderIcon,
slug,
size,
text,
type = 'gray',
...other
}: OperationalTagProps<T>) => {
@@ -109,21 +109,14 @@ const OperationalTag = <T extends React.ElementType>({
disabled={disabled}
className={tagClasses}
id={tagId}
text={text}
{...other}>
<div className={`${prefix}--interactive--tag-children`}>
{children}
{normalizedSlug}
</div>
{normalizedSlug}
</Tag>
);
};

OperationalTag.propTypes = {
/**
* Provide content to be rendered inside of a `OperationalTag`
*/
children: PropTypes.node,

/**
* Provide a custom className that is applied to the containing <span>
*/
@@ -156,6 +149,11 @@ OperationalTag.propTypes = {
*/
slug: PropTypes.node,

/**
* Provide text to be rendered inside of a the tag.
*/
text: PropTypes.string,

/**
* Specify the type of the `Tag`
*/
28 changes: 13 additions & 15 deletions packages/react/src/components/Tag/SelectableTag.tsx
Original file line number Diff line number Diff line change
@@ -16,11 +16,6 @@ import Tag, { SIZES } from './Tag';
const getInstanceId = setupGetInstanceId();

export interface SelectableTagBaseProps {
/**
* Provide content to be rendered inside of a `SelectableTag`
*/
children?: React.ReactNode;

/**
* Provide a custom className that is applied to the containing <span>
*/
@@ -57,6 +52,11 @@ export interface SelectableTagBaseProps {
* **Experimental:** Provide a `Slug` component to be rendered inside the `SelectableTag` component
*/
slug?: ReactNodeLike;

/**
* Provide text to be rendered inside of a the tag.
*/
text?: string;
}

export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<
@@ -65,14 +65,14 @@ export type SelectableTagProps<T extends React.ElementType> = PolymorphicProps<
>;

const SelectableTag = <T extends React.ElementType>({
children,
className,
disabled,
id,
renderIcon,
selected = false,
slug,
size,
text,
...other
}: SelectableTagProps<T>) => {
const prefix = usePrefix();
@@ -102,22 +102,15 @@ const SelectableTag = <T extends React.ElementType>({
disabled={disabled}
className={tagClasses}
id={tagId}
text={text}
onClick={() => setSelectedTag(!selectedTag)}
{...otherProps}>
<div className={`${prefix}--interactive--tag-children`}>
{children}
{normalizedSlug}
</div>
{normalizedSlug}
</Tag>
);
};

SelectableTag.propTypes = {
/**
* Provide content to be rendered inside of a `SelectableTag`
*/
children: PropTypes.node,

/**
* Provide a custom className that is applied to the containing <span>
*/
@@ -154,6 +147,11 @@ SelectableTag.propTypes = {
* **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.
*/
text: PropTypes.string,
};

export default SelectableTag;
5 changes: 1 addition & 4 deletions packages/react/src/components/Tag/Tag-test.js
Original file line number Diff line number Diff line change
@@ -30,11 +30,8 @@ describe('Tag', () => {
});

it('should have an appropriate aria-label when (filterable)', () => {
const children = 'tag-3';
const { container } = render(
<DismissibleTag type="red" title="Close tag">
{children}
</DismissibleTag>
<DismissibleTag type="red" title="Close tag" text="Tag content" />
);
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const button = container.querySelector('[aria-label]');
2 changes: 1 addition & 1 deletion packages/react/src/components/Tag/Tag.stories.js
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ export const ReadOnly = () => {
return (
<>
<Tag className="some-class" type="red">
{'Tag content'}
{'Tag content with a long text description'}
</Tag>
<Tag className="some-class" type="magenta">
{'Tag content'}
91 changes: 84 additions & 7 deletions packages/react/src/components/Tag/Tag.tsx
Original file line number Diff line number Diff line change
@@ -6,14 +6,15 @@
*/

import PropTypes, { ReactNodeLike } from 'prop-types';
import React from 'react';
import React, { useLayoutEffect, useState } from 'react';
import classNames from 'classnames';
import { Close } from '@carbon/icons-react';
import setupGetInstanceId from '../../tools/setupGetInstanceId';
import { usePrefix } from '../../internal/usePrefix';
import { PolymorphicProps } from '../../types/common';
import { Text } from '../Text';
import deprecate from '../../prop-types/deprecate';
import { Tooltip } from '../Tooltip';

const getInstanceId = setupGetInstanceId();
export const TYPES = {
@@ -85,6 +86,11 @@ export interface TagBaseProps {
*/
slug?: ReactNodeLike;

/**
* Provide text to be rendered inside of a the tag.
*/
text?: string;

/**
* @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.
*/
@@ -112,12 +118,27 @@ const Tag = <T extends React.ElementType>({
disabled,
onClose, // remove onClose in next major release - V12
size,
text,
as: BaseComponent,
slug,
...other
}: TagProps<T>) => {
const prefix = usePrefix();
const tagId = id || `tag-${getInstanceId()}`;
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);

const isEllipsisActive = (element: any) => {
setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
return element.offsetWidth < element.scrollWidth;
};

useLayoutEffect(() => {
const elementTagId = document.querySelector(`#${tagId}`);
const newElement = elementTagId?.getElementsByClassName(
`${prefix}--tag__label`
)[0];
isEllipsisActive(newElement);
}, [prefix, children, tagId]);

const conditions = [
`${prefix}--tag--selectable`,
@@ -133,7 +154,8 @@ const Tag = <T extends React.ElementType>({
[`${prefix}--tag--${size}`]: size, // TODO: V12 - Remove this class
[`${prefix}--layout--size-${size}`]: size,
[`${prefix}--tag--${type}`]: type,
[`${prefix}--tag--interactive`]: other.onClick && !isInteractiveTag,
[`${prefix}--tag--interactive`]:
(other.onClick && !isInteractiveTag) || isEllipsisApplied,
});

const typeText =
@@ -166,9 +188,10 @@ const Tag = <T extends React.ElementType>({
) : (
''
)}

<Text
className={`${prefix}--tag__label`}
title={typeof children === 'string' ? children : undefined}>
title={typeof children === 'string' ? children : undefined}
className={`${prefix}--tag__label`}>
{children !== null && children !== undefined ? children : typeText}
</Text>
{normalizedSlug}
@@ -187,10 +210,54 @@ const Tag = <T extends React.ElementType>({

const ComponentTag =
BaseComponent ??
(other.onClick || className?.includes(`${prefix}--tag--operational`)
(other.onClick ||
className?.includes(`${prefix}--tag--operational`) ||
isEllipsisApplied
? 'button'
: 'div');

let tagText = text;

if (typeof children === 'string' && tagText === undefined) {
tagText = children;
}

const tooltipClasses = classNames(
`${prefix}--icon-tooltip`,
`${prefix}--tooltip-disabled-onmouseenter`,
`${prefix}--tag-label-tooltip`
);

if (isEllipsisApplied) {
return (
<Tooltip
label={tagText}
align="bottom"
className={tooltipClasses}
leaveDelayMs={0}
closeOnActivation>
<ComponentTag
disabled={disabled}
className={tagClasses}
id={tagId}
{...other}>
{CustomIconElement && size !== 'sm' ? (
<div className={`${prefix}--tag__custom-icon`}>
<CustomIconElement />
</div>
) : (
''
)}
<Text title={tagText} className={`${prefix}--tag__label`}>
{tagText ? tagText : typeText}
</Text>
{text !== undefined ? children : null}
{normalizedSlug}
</ComponentTag>
</Tooltip>
);
}

return (
<ComponentTag
disabled={disabled}
@@ -204,9 +271,14 @@ const Tag = <T extends React.ElementType>({
) : (
''
)}
<Text>
{children !== null && children !== undefined ? children : typeText}
<Text title={tagText} className={`${prefix}--tag__label`}>
{tagText ? tagText : typeText}
</Text>
{text !== undefined ? (
<Text title={tagText} className={`${prefix}--tag__label`}>
{children}
</Text>
) : null}
{normalizedSlug}
</ComponentTag>
);
@@ -272,6 +344,11 @@ Tag.propTypes = {
*/
slug: PropTypes.node,

/**
* Provide text to be rendered inside of a the tag.
*/
text: PropTypes.string,

/**
* Text to show on clear filters
*/
6 changes: 6 additions & 0 deletions packages/react/src/components/Tag/storyInteractiveTag.scss
Original file line number Diff line number Diff line change
@@ -3,3 +3,9 @@
#operational-tag > .cds--popover--caret {
--cds-popover-offset: 5px;
}

#operational-tag > .cds--popover-caret,
.cds--popover {
--cds-popover-offset: 5px;
--cds-popover-caret-height: 5px;
}
10 changes: 8 additions & 2 deletions packages/react/src/components/Tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
@@ -155,8 +155,14 @@ function Tooltip<T extends React.ElementType>({
}

function onMouseEnter() {
setIsPointerIntersecting(true);
setOpen(true, enterDelayMs);
// Interactive Tags should not support onMouseEnter
const isMouseOnEnterDisabled = customClassName?.includes(
`${prefix}--tooltip-disabled-onmouseenter`
);
guidari marked this conversation as resolved.
Show resolved Hide resolved
if (!isMouseOnEnterDisabled) {
setIsPointerIntersecting(true);
setOpen(true, enterDelayMs);
}
}

function onMouseLeave() {
33 changes: 24 additions & 9 deletions packages/styles/scss/components/tag/_tag.scss
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@
margin: $spacing-02;
cursor: default;
// restricts size of contained elements
max-inline-size: 100%;
max-inline-size: convert.to-rem(208px);
min-block-size: layout.size('height');
// ensures tag stays pill shaped;
min-inline-size: convert.to-rem(32px);
@@ -72,21 +72,27 @@
padding-inline-start: $spacing-03;
}

&:not(.#{$prefix}--tag--selectable) {
border: 0;
}

&:not(:first-child) {
margin-inline-start: 0;
}
}

.#{$prefix}--tag__label {
display: block;
overflow: hidden;
max-inline-size: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}

.#{$prefix}--tag--interactive:focus {
box-shadow: inset 0 0 0 1px $focus;
outline: none;
// box-shadow: inset 0 0 0 1px $focus;
// outline: none;
outline: 2px solid $focus;
outline-offset: 1px;
}

.#{$prefix}--tag--interactive:hover {
@@ -105,11 +111,6 @@
}
}

.#{$prefix}--interactive--tag-children {
display: inline-flex;
place-items: center;
}

.#{$prefix}--tag--selectable {
border: 1px solid $border-inverse;
background-color: $layer;
@@ -407,5 +408,19 @@
.#{$prefix}--tag__close-icon:focus {
@include high-contrast-mode('focus');
}

.#{$prefix}--tag-label-tooltip {
max-inline-size: -webkit-fill-available;
}

.#{$prefix}--tag__custom-icon + .#{$prefix}--tag-label-tooltip {
max-inline-size: convert.to-rem(176px);
}

.#{$prefix}--tag--filter
.#{$prefix}--tag__custom-icon
+ .#{$prefix}--tag-label-tooltip {
max-inline-size: convert.to-rem(158px);
}
/* stylelint-enable */
}