feat: dropdown option string truncation

quid · Nov 29, 2022 · 1f09b49 · 1f09b49
1 parent e291571
commit 1f09b49
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/packages/react-dropdown/src/HighlightValue.js b/packages/react-dropdown/src/HighlightValue.js
@@ -11,6 +11,12 @@ import styled from '@emotion/styled/macro';
 import { textStyles } from '@quid/theme';
 import { splitStringByValue } from './utils';
 
+const Value = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
 type Props = {
   highlight: boolean,
   value: string,
@@ -23,7 +29,7 @@ const HighlightValue = styled(
     if (highlight && valueToHighlight.length && value.length) {
       const splittedText = splitStringByValue(value, valueToHighlight, 1);
       return (
-        <span className={className}>
+        <Value className={className}>
           {splittedText.map((chunk, index) => {
             return chunk.highlight ? (
               <Text key={index} as="span" type="bold">
@@ -33,10 +39,10 @@ const HighlightValue = styled(
               chunk.value
             );
           })}
-        </span>
+        </Value>
       );
     }
-    return <span className={className}>{value}</span>;
+    return <Value className={className}>{value}</Value>;
   }
 )`
   ${props => textStyles(props.disabled ? 'disabled' : '')};