Merge pull request #108 from perimetre/10.2.0

feat: added full size chip option on autocomplete dropdown
perimetre · Apr 18, 2023 · d594e28 · d594e28
2 parents 531b805 + a3d00af
commit d594e28
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [10.3.0] 2023-04-18
+
+### Changes
+
+- Added option to have a full size chip with `AutocompleteDropdownInput`
+
 ## [10.2.0] 2023-04-18
 
 ### Changes

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "10.2.0",
+  "version": "10.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"
@@ -161,4 +161,4 @@
   "resolutions": {
     "@storybook/react/webpack": "^5"
   }
-}
+}
diff --git a/src/components/AutocompleteDropdownInput/AutocompleteDropdownInput.stories.tsx b/src/components/AutocompleteDropdownInput/AutocompleteDropdownInput.stories.tsx
@@ -68,3 +68,26 @@ const DropdownWithButtonsTemplate: Story = (props) => (
 );
 
 export const DropdownWithButtons = DropdownWithButtonsTemplate.bind({});
+
+/**
+ * A story that displays an Autocomplete example
+ *
+ * @param props the story props
+ */
+const ChipsFullSizeTemplate: Story<AutocompleteDropdownInputProps> = (props) => (
+  <AutocompleteDropdownInput
+    {...props}
+    id="storybook-autocomplete"
+    options={Array(10)
+      .fill(null)
+      .map((_, i) => ({
+        id: i,
+        label: `Option Option Option Option Option Option Option Option ${i + 1}`
+      }))}
+  />
+);
+
+export const ChipsFullSize = ChipsFullSizeTemplate.bind({});
+ChipsFullSize.args = {
+  chipFullSize: true
+};
diff --git a/src/components/AutocompleteDropdownInput/AutocompleteDropdownInput.tsx b/src/components/AutocompleteDropdownInput/AutocompleteDropdownInput.tsx
@@ -23,6 +23,10 @@ export type AutocompleteDropdownInputProps<T extends AutocompleteItemType = Auto
      * The render function used to render the option buttons
      */
     renderButtons?: (item: T, isSelected: boolean) => React.ReactNode;
+    /**
+     * Whether or not the chips should be full size
+     */
+    chipFullSize?: boolean;
   };
 
 /**
@@ -44,6 +48,7 @@ export type AutocompleteDropdownInputProps<T extends AutocompleteItemType = Auto
  * @param props.translations A translation object to override existing translations
  * @param props.renderButtons The render function used to render the option buttons
  * @param props.displaySelected Keep selected items in dropdown list regardless.
+ * @param props.chipFullSize Whether or not the chips should be full size
  */
 export const AutocompleteDropdownInput = <T extends AutocompleteItemType = AutocompleteItemType>({
   // Hook settings
@@ -63,6 +68,7 @@ export const AutocompleteDropdownInput = <T extends AutocompleteItemType = Autoc
   label,
   translations,
   renderButtons,
+  chipFullSize,
   // Input props
   ...inputProps
 }: AutocompleteDropdownInputProps<T>) => {
@@ -177,16 +183,23 @@ export const AutocompleteDropdownInput = <T extends AutocompleteItemType = Autoc
                 {...getSelectedItemProps({
                   selectedItem,
                   index,
-                  className: 'pui-dropdown-input-selected-item-base pui-animate-scaleHover focus:outline-none'
+                  className: classnames(
+                    'pui-dropdown-input-selected-item-base pui-animate-scaleHover focus:outline-none',
+                    {
+                      fullSize: chipFullSize
+                    }
+                  )
                 })}
               >
                 <button
                   type="button"
-                  className="pui-btn-default pui-chip-btn flex items-center"
+                  className="pui-btn-default pui-chip-btn flex items-center w-full"
                   onClick={() => toggleSelectedItem(selectedItem)}
                 >
-                  {selectedItem.label}
-                  <CrossIcon className="pui-animate-scaleHover-target h-4 w-4 ml-2 mt-1" />
+                  <div className="line-clamp-1 text-ellipsis flex-1">{selectedItem.label}</div>
+                  <div>
+                    <CrossIcon className="pui-animate-scaleHover-target h-4 w-4 ml-2 mt-1" />
+                  </div>
                 </button>
               </li>
             ))}

diff --git a/src/components/DropdownInput/index.css b/src/components/DropdownInput/index.css
@@ -145,6 +145,10 @@
     @apply mb-2 mr-2 pui-text-ellipsis;
 
     max-width: 220px;
+
+    &.fullSize {
+      max-width: none;
+    }
   }
 
   /* The styling for a single selected option */