[UIK-5295][tag] enabled ellipsis by default for tags

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)(
       <STag
         render={Box}
@@ -100,7 +121,9 @@ class RootTag extends Component<
         ref={this.tagRef}
       >
         {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}
-        {addonTextChildren(Children, Tag.Text, [Tag.Addon, TagContainer.Circle])}
+        {advancedMode
+          ? (hasAddonOrCircle ? <Children /> : <Tag.Text ellipsis={false}><Children /></Tag.Text>)
+          : addonTextChildren(Children, Tag.Text, [Tag.Addon, TagContainer.Circle])}
         {addonRight ? <Tag.Addon tag={addonRight} /> : null}
       </STag>,
     );
@@ -315,12 +338,13 @@ function Text(
   props: Intergalactic.InternalTypings.InferChildComponentProps<NSTag.Text.Component, typeof RootTag, 'Text'>,
 ) {
   const SText = Root;
-  const { styles, tagRef } = props;
+  const { styles, tagRef, ellipsis = true } = props;
 
   return sstyled(styles)(
     <>
       <SText
         render={TypographyText}
+        ellipsis={ellipsis}
         hint:triggerRef={tagRef}
       />
     </>,

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';

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 (
     <Flex direction='column' gap={2}>
       <Flex direction='column' gap={2} data-testid='normal-state' w={450}>
@@ -24,7 +31,9 @@ const Demo = (props: ExampleInputTagsProps) => {
               <InputTags.Tag.Addon>
                 <Check />
               </InputTags.Tag.Addon>
-              <InputTags.Tag.Text.Content>Text and addon</InputTags.Tag.Text.Content>
+              <InputTags.Tag.Text.Content {...textContentProps}>
+                Text and addon with a very long label that should be truncated by default
+              </InputTags.Tag.Text.Content>
             </InputTags.Tag.Text>
 
           </InputTags.Tag>
@@ -64,7 +73,34 @@ const Demo = (props: ExampleInputTagsProps) => {
               <InputTags.Tag.Addon>
                 <Check />
               </InputTags.Tag.Addon>
-              <InputTags.Tag.Text.Content>Circle addon text and close </InputTags.Tag.Text.Content>
+              <InputTags.Tag.Text.Content {...textContentProps}>
+                Circle addon text and close with a very long label
+              </InputTags.Tag.Text.Content>
+            </InputTags.Tag.Text>
+            <InputTags.Tag.Close />
+          </InputTags.Tag>
+
+          <InputTags.Tag
+            size={props.size}
+            theme={props.theme}
+            disabled={props.disabled}
+
+            interactive={props.interactive}
+
+            color={props.color}
+          >
+            <InputTags.Tag.Text>
+              <InputTags.Tag.Circle
+                style={{
+                  background: '#2595e4',
+                }}
+              />
+              <InputTags.Tag.Addon>
+                <Check />
+              </InputTags.Tag.Addon>
+              <InputTags.Tag.Text.Content>
+                Circle addon text and close
+              </InputTags.Tag.Text.Content>
             </InputTags.Tag.Text>
             <InputTags.Tag.Close />
           </InputTags.Tag>
@@ -116,6 +152,8 @@ export const defaultPropsEmail: ExampleInputTagsProps = {
   addonLeft: undefined,
   interactive: undefined,
   color: 'gray-500',
+  textContentWidth: 140,
+  ellipsis: undefined,
 };
 
 Demo.defaultProps = defaultPropsEmail;

stories/components/input-tags/tests/input-tags.stories.tsx

@@ -80,6 +80,18 @@ export const TagsWithAddons: StoryObj<typeof defaultPropsEmail> = {
       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,
 };

stories/components/tag/docs/examples/editing_tag.tsx

@@ -17,7 +17,7 @@ const Demo = () => {
     <>
       <InlineEdit editable={editable} onEditableChange={setEditable}>
         <InlineEdit.View tag={Tag} interactive size='l'>
-          <Tag.Text>{value}</Tag.Text>
+          <Tag.Text ellipsis:observeChildrenMutations>{value}</Tag.Text>
         </InlineEdit.View>
         <InlineEdit.Edit>
           <InlineInput onConfirm={handleValue} onCancel={resetEditable}>

stories/components/tag/tests/examples/tag-with-ellipsis.tsx

@@ -6,9 +6,9 @@ const Demo = () => {
   return (
     <Flex direction='column' gap={4}>
       <Box>
-        <h3>Tag.Text with ellipsis (boolean)</h3>
+        <h3>Tag.Text with ellipsis (default)</h3>
         <Tag w={120} size='m'>
-          <Tag.Text ellipsis>Long tag text that should be truncated</Tag.Text>
+          <Tag.Text>Long tag text that should be truncated</Tag.Text>
         </Tag>
       </Box>
 
@@ -22,9 +22,9 @@ const Demo = () => {
       </Box>
 
       <Box>
-        <h3>Tag.Text without ellipsis (default)</h3>
+        <h3>Tag.Text with manually disabled ellipsis</h3>
         <Tag w={120} size='m'>
-          <Tag.Text>Long tag text that should be truncated</Tag.Text>
+          <Tag.Text ellipsis={false}>Long tag text that should be truncated</Tag.Text>
         </Tag>
       </Box>