Merge branch 'main' into update-configure-checks-components

# Conflicts: # lib/platform-bible-react/dist/index.cjs # lib/platform-bible-react/dist/index.cjs.map # lib/platform-bible-react/dist/index.js # lib/platform-bible-react/dist/index.js.map
paranext · Sep 25, 2024 · 5dd3b9e · 5dd3b9e
2 parents 42c0802 + bc2bd0b
commit 5dd3b9e
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 87 deletions.
diff --git a/lib/platform-bible-react/dist/index.cjs b/lib/platform-bible-react/dist/index.cjs
diff --git a/lib/platform-bible-react/dist/index.cjs.map b/lib/platform-bible-react/dist/index.cjs.map
diff --git a/lib/platform-bible-react/dist/index.js b/lib/platform-bible-react/dist/index.js
diff --git a/lib/platform-bible-react/dist/index.js.map b/lib/platform-bible-react/dist/index.js.map
diff --git a/lib/platform-bible-react/src/components/basics/combo-box.component.tsx b/lib/platform-bible-react/src/components/basics/combo-box.component.tsx
@@ -92,7 +92,9 @@ function ComboBox<T extends ComboBoxOption = ComboBoxOption>({
           className={cn('pr-w-[200px] pr-justify-between', className)}
           disabled={isDisabled}
         >
-          {value ? getOptionLabel(value) : buttonPlaceholder}
+          <span className="pr-overflow-hidden pr-text-ellipsis pr-whitespace-nowrap">
+            {value ? getOptionLabel(value) : buttonPlaceholder}
+          </span>
           <ChevronsUpDown className="pr-ms-2 pr-h-4 pr-w-4 pr-shrink-0 pr-opacity-50" />
         </Button>
       </PopoverTrigger>

diff --git a/...platform-bible-react/src/preview/pages/components/basics/combo-box.examples.component.tsx b/...platform-bible-react/src/preview/pages/components/basics/combo-box.examples.component.tsx
@@ -3,16 +3,36 @@ import ComboBox from '@/components/basics/combo-box.component';
 import { HasDirection } from '@/preview/preview-components/direction-toggle.component';
 
 export default function ComboBoxExamples({ direction }: HasDirection) {
-  const [comboBoxValue, setComboBox] = useState<string | undefined>(undefined);
+  const [comboBox1Value, setComboBox1Value] = useState<string | undefined>(undefined);
+  const [comboBox2Value, setComboBox2Value] = useState<string | undefined>(undefined);
+
   return (
-    <ComboBox
-      dir={direction}
-      options={['Option1', 'Option2', 'Option3']}
-      textPlaceholder="Text Placeholder"
-      buttonPlaceholder="Button Placeholder"
-      commandEmptyMessage="Empty Message"
-      value={comboBoxValue}
-      onChange={setComboBox}
-    />
+    <div className="pr-space-y-4">
+      <ComboBox
+        dir={direction}
+        options={['Option1', 'Option2', 'Option3']}
+        textPlaceholder="Text Placeholder"
+        buttonPlaceholder="Button Placeholder"
+        commandEmptyMessage="Empty Message"
+        value={comboBox1Value}
+        onChange={setComboBox1Value}
+      />
+      <div>
+        <p>Combobox with long text for options will truncate</p>
+        <ComboBox
+          dir={direction}
+          options={[
+            '08/24/24 05:50PM - Revision author',
+            '08/24/24 05:30PM - Revision author',
+            '08/24/24 05:45PM - Revision author',
+          ]}
+          textPlaceholder="Select revision ..."
+          buttonPlaceholder="Select revision ..."
+          commandEmptyMessage="Empty Message"
+          value={comboBox2Value}
+          onChange={setComboBox2Value}
+        />
+      </div>
+    </div>
   );
 }