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