diff --git a/stories/components/base-components/ellipsis/docs/ellipsis.stories.tsx b/stories/components/base-components/ellipsis/docs/ellipsis.stories.tsx index 453680524e..90b0438c16 100644 --- a/stories/components/base-components/ellipsis/docs/ellipsis.stories.tsx +++ b/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, }; diff --git a/stories/components/base-components/ellipsis/docs/examples/filter-trigger.tsx b/stories/components/base-components/ellipsis/docs/examples/filter-trigger.tsx new file mode 100644 index 0000000000..31aa83dcd1 --- /dev/null +++ b/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 ( + <> + + + ); +}; + +const materials = ['Glass', 'Metal', 'Paper', 'Wood']; + +export default Demo; diff --git a/website/docs/utils/ellipsis/ellipsis-code.md b/website/docs/utils/ellipsis/ellipsis-code.md index e7409b0bbf..254efb91c9 100644 --- a/website/docs/utils/ellipsis/ellipsis-code.md +++ b/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 ::: + +## 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 + + + +:::