add prop to give Select's dropdown full width (#125)

* prop to give the dropdown full width * update yarn.lock * rename prop
anarock · Oct 18, 2018 · 17f7e5f · 17f7e5f · vercel · Oct 18, 2018
1 parent 77c5cea
commit 17f7e5f
Show file tree

Hide file tree

Showing 5 changed files with 1,843 additions and 37 deletions.
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -7,7 +7,9 @@ import {
   inputWrapper,
   selectInput,
   selectInputWrapper,
-  selectWrapper
+  selectWrapper,
+  fullWidth,
+  relativePosition
 } from "./styles/Select.styles";
 import DropDown from "./DropDown";
 import Input from "./Input";
@@ -32,15 +34,22 @@ const Select: React.SFC<SelectProps> = props => {
     dropdownClassName,
     inputProps,
     searchBox,
-    searchBoxProps
+    searchBoxProps,
+    fullWidthDropdown
   } = props;
 
   const OptionGroup: any = multiSelect ? OptionGroupCheckBox : OptionGroupRadio;
 
   return (
-    <div className={cx(selectWrapper, className)}>
+    <div
+      className={cx(selectWrapper, className, {
+        [relativePosition]: fullWidthDropdown
+      })}
+    >
       <DropDown
-        dropDownClassName={cx(dropDownClass, dropdownClassName)}
+        dropDownClassName={cx(dropDownClass, dropdownClassName, {
+          [fullWidth]: fullWidthDropdown
+        })}
         labelComponent={({ toggleDropdown, isOpen }) => {
           const chevron = cx(chevronStyle, "pi", "pi-arrow-drop-down", {
             __pebble__select__open: isOpen

diff --git a/src/components/styles/Select.styles.ts b/src/components/styles/Select.styles.ts
@@ -5,6 +5,10 @@ export const selectWrapper = css({
   marginBottom: 20
 });
 
+export const relativePosition = css({
+  position: "relative"
+});
+
 export const selectInputWrapper = css({
   pointerEvents: "none"
 });
@@ -18,6 +22,10 @@ export const dropDownClass = css({
   marginTop: -40
 });
 
+export const fullWidth = css({
+  width: "100%"
+});
+
 export const inputWrapper = css({
   cursor: "pointer",
   position: "relative"

diff --git a/src/components/typings/Select.ts b/src/components/typings/Select.ts
@@ -19,4 +19,5 @@ export interface SelectProps {
   searchBoxProps?: Partial<SearchProps>;
   dropdownClassName?: string;
   inputProps?: Partial<InputProps>;
+  fullWidthDropdown?: boolean;
 }
diff --git a/stories/select.story.tsx b/stories/select.story.tsx
@@ -15,40 +15,43 @@ storiesOf("Select", module)
   .add(
     "Single Select",
     withState({ searchQuery: "" })(({ store }) => (
-      <Select
-        selected={store.state.selected} // The value selected
-        value={store.state.value} // To show in input box after selection
-        onChange={(selected, e) => {
-          if (selected) {
-            store.set({
-              selected: selected,
-              value: options.find(option => option.value === selected)!.label // Yes, we save the label in value
-            });
-          }
-          action("onSelect")(selected, e);
-        }}
-        placeholder="Choose Option"
-        searchBox={boolean("searchBox")}
-        searchBoxProps={{
-          placeholder: text("searchBoxProps.placeholder", "Search"),
-          onChange: query => store.set({ searchQuery: query })
-        }}
-      >
-        {options
-          .filter(option => {
-            if (!boolean("searchBox") || !store.state.searchQuery) {
-              return true;
+      <div style={{ width: "330px" }}>
+        <Select
+          selected={store.state.selected} // The value selected
+          value={store.state.value} // To show in input box after selection
+          fullWidthDropdown
+          onChange={(selected, e) => {
+            if (selected) {
+              store.set({
+                selected: selected,
+                value: options.find(option => option.value === selected)!.label // Yes, we save the label in value
+              });
             }
-            return option.label.includes(store.state.searchQuery);
-          })
-          .map(option => (
-            <Option
-              key={option.value}
-              value={option.value}
-              label={option.label}
-            />
-          ))}
-      </Select>
+            action("onSelect")(selected, e);
+          }}
+          placeholder="Choose Option"
+          searchBox={boolean("searchBox")}
+          searchBoxProps={{
+            placeholder: text("searchBoxProps.placeholder", "Search"),
+            onChange: query => store.set({ searchQuery: query })
+          }}
+        >
+          {options
+            .filter(option => {
+              if (!boolean("searchBox") || !store.state.searchQuery) {
+                return true;
+              }
+              return option.label.includes(store.state.searchQuery);
+            })
+            .map(option => (
+              <Option
+                key={option.value}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+        </Select>
+      </div>
     ))
   )
   .add("Multi Select", () => (