diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-chromium-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-chromium-linux.png index 6fdeed6cf6..ee82eaecbc 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-chromium-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-chromium-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-firefox-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-firefox-linux.png index 572e617c30..44b2f94a7d 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-firefox-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-firefox-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-webkit-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-webkit-linux.png index 0a46a70764..31e2dd7fc5 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-webkit-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-14f75-l-size-and-disabled-true-and-interactive-true-1-webkit-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-chromium-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-chromium-linux.png index 2b8c1433f6..fb7403f3e3 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-chromium-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-chromium-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-firefox-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-firefox-linux.png index 3d3c72f7f4..a8c66acb22 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-firefox-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-firefox-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-webkit-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-webkit-linux.png index fdb904e0bb..92a9a54743 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-webkit-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-36cb5--and-disabled-false-and-interactive-undefined-1-webkit-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-chromium-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-chromium-linux.png index 4fe61db102..69527bd785 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-chromium-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-chromium-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-firefox-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-firefox-linux.png index c78146eb6b..10cb545791 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-firefox-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-firefox-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-webkit-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-webkit-linux.png index 07b1c55257..8b3804d53b 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-webkit-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-bc4de-e-and-disabled-true-and-interactive-undefined-1-webkit-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-chromium-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-chromium-linux.png index b7ded3e15c..583c49c507 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-chromium-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-chromium-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-firefox-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-firefox-linux.png index fc9261fb71..cdfd54c82b 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-firefox-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-firefox-linux.png differ diff --git a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-webkit-linux.png b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-webkit-linux.png index d9045d6b99..312655921a 100644 Binary files a/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-webkit-linux.png and b/semcore/input-tags/__tests__/input-tags.browser-test.tsx-snapshots/-visual-Base-states-and-styles-Verify-InputTa-dded3--size-and-disabled-false-and-interactive-true-1-webkit-linux.png differ diff --git a/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-chromium-linux.png b/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-chromium-linux.png index 22449bd8c2..852d2212d2 100644 Binary files a/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-chromium-linux.png and b/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-chromium-linux.png differ diff --git a/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-firefox-linux.png b/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-firefox-linux.png index 11ddcc0f16..44bf24d014 100644 Binary files a/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-firefox-linux.png and b/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-firefox-linux.png differ diff --git a/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-webkit-linux.png b/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-webkit-linux.png index 135a5938cf..b61c719cd7 100644 Binary files a/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-webkit-linux.png and b/semcore/tag/__tests__/tag.browser-test.tsx-snapshots/-visual-Verify-tag-with-ellipsis-visual-1-webkit-linux.png differ diff --git a/semcore/tag/src/Tag.tsx b/semcore/tag/src/Tag.tsx index 6f36e64f70..f18eee5ceb 100644 --- a/semcore/tag/src/Tag.tsx +++ b/semcore/tag/src/Tag.tsx @@ -87,6 +87,27 @@ class RootTag extends Component< const isInteractiveView = !disabled && interactive; const isInteractive = !disabled && interactive; + // By default, Tag.Text has an enabled ellipsis, but to use tags inside Input.Tags, we need to wrap the content without an ellipsis. + const onlyTextContent = isAdvanceMode( + Children, + [ + 'InputTags.Tag.Text.Content', + ], + true, + ); + + // We shouldn't wrap in text if it has Circle or Addon + const hasAddonOrCircle = isAdvanceMode( + Children, + [ + 'InputTags.Tag.Circle', + 'InputTags.Tag.Addon', + ], + true, + ); + + const advancedMode = onlyTextContent || hasAddonOrCircle; + return sstyled(styles)( {addonLeft ? : null} - {addonTextChildren(Children, Tag.Text, [Tag.Addon, TagContainer.Circle])} + {advancedMode + ? (hasAddonOrCircle ? : ) + : addonTextChildren(Children, Tag.Text, [Tag.Addon, TagContainer.Circle])} {addonRight ? : null} , ); @@ -315,12 +338,13 @@ function Text( props: Intergalactic.InternalTypings.InferChildComponentProps, ) { const SText = Root; - const { styles, tagRef } = props; + const { styles, tagRef, ellipsis = true } = props; return sstyled(styles)( <> , diff --git a/stories/components/input-tags/docs/examples/entering_and_editing_tags.tsx b/stories/components/input-tags/docs/examples/entering_and_editing_tags.tsx index effaa4cdb7..9f4fb8a987 100644 --- a/stories/components/input-tags/docs/examples/entering_and_editing_tags.tsx +++ b/stories/components/input-tags/docs/examples/entering_and_editing_tags.tsx @@ -1,4 +1,4 @@ -import { Flex, type EllipsisSettings } from '@semcore/ui/base-components'; +import { Flex } from '@semcore/ui/base-components'; import type { InputTagsProps, InputTagsValueProps } from '@semcore/ui/input-tags'; import InputTags from '@semcore/ui/input-tags'; import { Text } from '@semcore/ui/typography'; diff --git a/stories/components/input-tags/tests/examples/tags-with-addons.tsx b/stories/components/input-tags/tests/examples/tags-with-addons.tsx index 204a8eabc5..f7d063eb3d 100644 --- a/stories/components/input-tags/tests/examples/tags-with-addons.tsx +++ b/stories/components/input-tags/tests/examples/tags-with-addons.tsx @@ -1,13 +1,20 @@ import Check from '@semcore/icon/Check/m'; import Edit from '@semcore/icon/Edit/m'; -import { Box, Flex } from '@semcore/ui/base-components'; +import { Flex, type BoxProps } from '@semcore/ui/base-components'; import InputTags from '@semcore/ui/input-tags'; import type { InputTagsTagProps } from '@semcore/ui/input-tags'; import React from 'react'; -type ExampleInputTagsProps = InputTagsTagProps; +type ExampleInputTagsProps = InputTagsTagProps & { + textContentWidth?: BoxProps['w']; + ellipsis?: boolean; +}; const Demo = (props: ExampleInputTagsProps) => { + const textContentProps = props.ellipsis === undefined + ? { w: props.textContentWidth } + : { w: props.textContentWidth, ellipsis: props.ellipsis }; + return ( @@ -24,7 +31,9 @@ const Demo = (props: ExampleInputTagsProps) => { - Text and addon + + Text and addon with a very long label that should be truncated by default + @@ -64,7 +73,34 @@ const Demo = (props: ExampleInputTagsProps) => { - Circle addon text and close + + Circle addon text and close with a very long label + + + + + + + + + + + + + Circle addon text and close + @@ -116,6 +152,8 @@ export const defaultPropsEmail: ExampleInputTagsProps = { addonLeft: undefined, interactive: undefined, color: 'gray-500', + textContentWidth: 140, + ellipsis: undefined, }; Demo.defaultProps = defaultPropsEmail; diff --git a/stories/components/input-tags/tests/input-tags.stories.tsx b/stories/components/input-tags/tests/input-tags.stories.tsx index dc7d0dc76b..99e1eeb676 100644 --- a/stories/components/input-tags/tests/input-tags.stories.tsx +++ b/stories/components/input-tags/tests/input-tags.stories.tsx @@ -80,6 +80,18 @@ export const TagsWithAddons: StoryObj = { control: { type: 'select' }, options: ['gray-500', 'blue-500', 'green-500', 'salad-500', 'orange-500', 'yellow-500', 'grredeen-500', 'pink-500', 'violet-500', 'white-500'], }, + textContentWidth: { + control: { type: 'number' }, + }, + ellipsis: { + control: { type: 'select' }, + options: ['default', 'enabled', 'disabled'], + mapping: { + default: undefined, + enabled: true, + disabled: false, + }, + }, }, args: defaultPropsEmail, }; diff --git a/stories/components/tag/docs/examples/editing_tag.tsx b/stories/components/tag/docs/examples/editing_tag.tsx index 13ad98e1d1..fd67b3fde1 100644 --- a/stories/components/tag/docs/examples/editing_tag.tsx +++ b/stories/components/tag/docs/examples/editing_tag.tsx @@ -17,7 +17,7 @@ const Demo = () => { <> - {value} + {value} diff --git a/stories/components/tag/tests/examples/tag-with-ellipsis.tsx b/stories/components/tag/tests/examples/tag-with-ellipsis.tsx index b6ff54504a..2b5bf51305 100644 --- a/stories/components/tag/tests/examples/tag-with-ellipsis.tsx +++ b/stories/components/tag/tests/examples/tag-with-ellipsis.tsx @@ -6,9 +6,9 @@ const Demo = () => { return ( -

Tag.Text with ellipsis (boolean)

+

Tag.Text with ellipsis (default)

- Long tag text that should be truncated + Long tag text that should be truncated
@@ -22,9 +22,9 @@ const Demo = () => { -

Tag.Text without ellipsis (default)

+

Tag.Text with manually disabled ellipsis

- Long tag text that should be truncated + Long tag text that should be truncated