[UIK-4893][website] added some notes about how ellipsis works

stories/components/base-components/ellipsis/docs/ellipsis.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import BasicUsageExample from './examples/basic_usage';
+import FilterTriggerExample from './examples/filter-trigger';
 import MultipleUseExample from './examples/multiple_use';
 import NoHintWithMultilineExample from './examples/no_hint_with_multiline';
 import WithRequiredLastSymbolsExample from './examples/with_required_last_symbols';
@@ -18,6 +19,10 @@ export const MultipleUse: StoryObj = {
   render: MultipleUseExample,
 };
 
+export const FilterTrigger: StoryObj = {
+  render: FilterTriggerExample,
+};
+
 export const NoHintWithMultiline: StoryObj = {
   render: NoHintWithMultilineExample,
 };

stories/components/base-components/ellipsis/docs/examples/filter-trigger.tsx

@@ -0,0 +1,41 @@
+import { FilterTrigger } from '@semcore/ui/base-trigger';
+import Select from '@semcore/ui/select';
+import React from 'react';
+
+const Demo = () => {
+  const [material, setMaterial] = React.useState([]);
+
+  return (
+    <>
+      <Select onChange={setMaterial} multiselect>
+        <Select.Trigger
+          tag={FilterTrigger}
+          placeholder='Material'
+          aria-label='Material'
+        >
+          <FilterTrigger.Text
+            wMax={80}
+            ellipsis={{ cropPosition: 'middle' }}
+            key={material.length}
+          >
+            <span aria-hidden='true'>Material: </span>
+            {material.length === 1 ? material : `${material.length} selected`}
+          </FilterTrigger.Text>
+        </Select.Trigger>
+
+        <Select.Menu aria-label='Material'>
+          {materials.map((option, idx) => (
+            <Select.Option value={option} key={idx}>
+              <Select.Option.Checkbox />
+              {option}
+            </Select.Option>
+          ))}
+        </Select.Menu>
+      </Select>
+    </>
+  );
+};
+
+const materials = ['Glass', 'Metal', 'Paper', 'Wood'];
+
+export default Demo;

website/docs/utils/ellipsis/ellipsis-code.md

@@ -66,6 +66,8 @@ You can truncate paragraphs of text with ellipsis using the `maxLine` property.
 
 Note that `maxLine` can only be used with `cropPosition: end`, and the hint is automatically disabled in this case.
 
+To enable hint for cropped multiline text, set some `hintProps` or just enable it via `hintProps={true}`.
+
 ::: sandbox
 
 <script lang="tsx">
@@ -85,3 +87,21 @@ You can customize the hint that appears on hover/focus by using the `hintProps`
 </script>
 
 :::
+
+## FilterTrigger (dynamic children)
+
+Due to performance considerations, we don't observe changes in the `Text` children property. So, if you have some dynamically changing children in the `Text` component, you should set `observerChildrenMutations={true}` in the ellipsis settings.
+
+Alternatively, you can set a unique `key` on the `Text`, depending on the children content.
+
+::: tip
+For some reason, only setting the `key` property works for `FilterTrigger.Text` right now.
+:::
+
+::: sandbox
+
+<script lang="tsx">
+  export Demo from 'stories/components/base-components/ellipsis/docs/examples/filter-trigger.tsx';
+</script>
+
+:::