diff --git a/src/components/input/Select.tsx b/src/components/input/Select.tsx index c119a2b8..7db136cb 100644 --- a/src/components/input/Select.tsx +++ b/src/components/input/Select.tsx @@ -440,7 +440,6 @@ type BaseSelectProps = CompositeProps & { /** * Indicates how overflowing content should be handled in the listbox. * -<<<<<<< HEAD * - `truncate`: Truncate the options via `text-overflow: ellipsis`, so that * they all fit in one line. This is the default value. * - `wrap`: Let options content wrap onto multiple lines via @@ -448,16 +447,6 @@ type BaseSelectProps = CompositeProps & { * * Complex content may still need to provide its own styling to handle content * overflow. -======= - * - `truncate`: Truncate the options so that they all fit in one line. An - * ellipsis will be rendered where needed. - * This is the default value. - * - `wrap`: Let options content wrap multiple lines so that all content is - * visible. - * - * This behavior can be also overwritten by providing more complex options - * content. ->>>>>>> 51ceff5 (Prevent Select listbox to grow out of viewport) */ listboxOverflow?: ListboxOverflow; }; diff --git a/src/pattern-library/components/patterns/prototype/SelectPage.tsx b/src/pattern-library/components/patterns/prototype/SelectPage.tsx index cdd13b6e..ec4d02d6 100644 --- a/src/pattern-library/components/patterns/prototype/SelectPage.tsx +++ b/src/pattern-library/components/patterns/prototype/SelectPage.tsx @@ -447,6 +447,40 @@ export default function SelectPage() { + + + + Determines the behavior of the listbox options when their + content is larger than the listbox. +
    +
  • + {"'truncate'"}: Text will use one line and be + truncated with an ellipsis. +
  • +
  • + {"'wrap'"}: Text will span multiple lines if + needed, ensuring all content is visible. +
  • +
+
+ + {"'truncate' | 'wrap'"} + + + {"'truncate'"} + +
+ + +
diff --git a/src/pattern-library/examples/select-truncate-listbox.tsx b/src/pattern-library/examples/select-truncate-listbox.tsx new file mode 100644 index 00000000..f38390ac --- /dev/null +++ b/src/pattern-library/examples/select-truncate-listbox.tsx @@ -0,0 +1,51 @@ +import { useId, useState } from 'preact/hooks'; + +import { Select } from '../..'; + +const items = [ + { + id: '1', + name: 'All students - content is very long and will not fit the listbox', + }, + { + id: '2', + name: 'Albert Banana - content is very long and will not fit the listbox', + }, + { + id: '3', + name: 'Bernard California - content is very long and will not fit the listbox', + }, + { + id: '4', + name: 'Cecelia Davenport - content is very long and will not fit the listbox', + }, + { + id: '5', + name: 'Doris Evanescence - content is very long and will not fit the listbox', + }, +]; + +export default function App() { + const [value, setSelected] = useState<{ id: string; name: string }>(); + const selectId = useId(); + + return ( +
+ + +
+ ); +} diff --git a/src/pattern-library/examples/select-wrap-listbox.tsx b/src/pattern-library/examples/select-wrap-listbox.tsx new file mode 100644 index 00000000..a7a21bc5 --- /dev/null +++ b/src/pattern-library/examples/select-wrap-listbox.tsx @@ -0,0 +1,51 @@ +import { useId, useState } from 'preact/hooks'; + +import { Select } from '../..'; + +const items = [ + { + id: '1', + name: 'All students - content is very long and will not fit the listbox', + }, + { + id: '2', + name: 'Albert Banana - content is very long and will not fit the listbox', + }, + { + id: '3', + name: 'Bernard California - content is very long and will not fit the listbox', + }, + { + id: '4', + name: 'Cecelia Davenport - content is very long and will not fit the listbox', + }, + { + id: '5', + name: 'Doris Evanescence - content is very long and will not fit the listbox', + }, +]; + +export default function App() { + const [value, setSelected] = useState<{ id: string; name: string }>(); + const selectId = useId(); + + return ( +
+ + +
+ ); +}