powerhome · nidaqg · Aug 17, 2023 · Aug 15, 2023 · Aug 15, 2023 · Aug 15, 2023
@@ -2,6 +2,7 @@
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import "../tokens/spacing";
 
 [class^=pb_select] {
   select {
@@ -32,6 +33,42 @@
       opacity: 0.5;
     }
   }
+  select[multiple] {
+    @include pb_textarea_light;
+    @include pb_body_light;
+    background: none;
+    background-color: $white;
+    appearance: none;
+    cursor: pointer;
+    box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
+    padding-right: 0px !important;
+    color: transparent !important;
+    text-shadow: 0 0 0 $text_lt_default;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: $space_xs 0px !important;
+    max-height: unset !important;
+    @media (hover:hover) {
+      &:hover, &:active, &:focus {
+        background-color: rgba($focus_input_light, $opacity_5);
+      }
+    }
+    &:focus{
+      border-color: $primary;
+      @include transition_default;
+    }
+    option {
+      padding-left: $space_sm;
+      padding-top: $space_xxs;
+      padding-bottom: $space_xxs;
+    }
+    option:checked {
+      background-color: $hover_light;
+    }
+    option:hover {
+      background-color: $hover_light;
+    }
+  }
   option {
     color: $text_lt_default;
   }
@@ -115,6 +152,45 @@
       }
     }
   }
+  select[multiple] {
+    @include pb_textarea_dark;
+    @include pb_body_light_dark;
+    background: none;
+    background-color: rgba($white,.10);
+    appearance: none;
+    cursor: pointer;
+    box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+    padding-right: 0px !important;
+    color: transparent !important;
+    text-shadow: 0 0 0 $text_dk_default;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding: $space_xs 0px !important;
+    max-height: unset !important;
+    @media (hover:hover) {
+      &:hover, &:active, &:focus {
+        background-color: rgba($white,.05);
+      }
+    }
+    &:focus{
+      border-color: $primary;
+      @include transition_default;
+    }
+    option {
+      padding-left: $space_sm;
+      padding-top: $space_xxs;
+      padding-bottom: $space_xxs;
+    }
+    option:checked {
+      background-color: $hover_dark;
+    }
+    option:hover {
+      background-color: $hover_dark;
+    }
+  }
+  option {
+    color: $text_dk_default;
+  }
   .pb_select_kit_caret {
     color: $white;
   }

@@ -124,11 +124,15 @@ const Select = ({
           htmlFor={name}
       >
         {selectBody}
-        <Icon
-            className="pb_select_kit_caret"
-            fixedWidth
-            icon="angle-down"
-        />
+        { multiple !== true ?
+          <Icon
+              className="pb_select_kit_caret"
+              fixedWidth
+              icon="angle-down"
+          />
+          :
+          null
+        }
         {error &&
           <Body
               status="negative"

@@ -0,0 +1,26 @@
+<%= pb_rails("select", props: {
+  attributes: {
+    data: { options: "data_attribute" },
+  },
+  label: "Favorite Food",
+  name: "food",
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ]
+}) %>
@@ -0,0 +1 @@
+Inspect the element and notice the data-attribute being added to the `<select>` element
@@ -0,0 +1,36 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  multiple: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      selected: true,
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+    {
+      value: "4",
+      value_text: "Sushi",
+    },
+    {
+      value: "4",
+      value_text: "Chinese",
+    },
+    {
+      value: "4",
+      value_text: "Hot Dogs",
+    },
+  ]
+}) %>
@@ -0,0 +1,50 @@
+import React from 'react'
+
+import Select from '../_select'
+
+const SelectMultiple = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+    {
+      value: '3',
+      text: 'BBQ',
+    },
+    {
+      value: '3',
+      text: 'Sushi',
+    },
+    {
+      value: '3',
+      text: 'Chinese',
+    },
+    {
+      value: '3',
+      text: 'Hot Dogs',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          label="Favorite Food"
+          multiple
+          name="food"
+          options={options}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectMultiple
@@ -0,0 +1 @@
+We recommend using a typeahead for better UX
@@ -11,6 +11,8 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
+  - select_attributes: Select W/ Attributes
+  - select_multiple: Select Multiple
 
 
 
@@ -25,3 +27,4 @@ examples:
   - select_error: Select w/ Error
   - select_inline: Select Inline
   - select_inline_compact: Select Inline Compact
+  - select_multiple: Select Multiple
@@ -8,3 +8,4 @@ export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
 export { default as SelectInline } from './_select_inline.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
+export { default as SelectMultiple } from './_select_multiple.jsx'
@@ -1,6 +1,6 @@
 <%= content_tag(:div,
-  data: object.data,
   aria: object.aria,
+  data: object.data,
   class: object.classnames) do %>
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.name %>">
@@ -19,17 +19,13 @@
           selected: object.selected,
           disabled: object.disabled_options,
         ),
-        id: object.id,
-        prompt: object.blank_selection,
-        disabled: object.disabled,
-        required: object.required,
-        multiple: object.multiple,
-        onchange: object.onchange,
-        include_blank: object.include_blank,
+        object.all_attributes
       )
       %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% end %>
-    <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
+    <% if object.multiple != true %>
+      <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
+    <% end %>
   </label>
 <% end %>
@@ -6,6 +6,8 @@
 module Playbook
   module PbSelect
     class Select < Playbook::KitBase
+      prop :attributes, type: Playbook::Props::Hash,
+                        default: {}
       prop :blank_selection
       prop :compact, type: Playbook::Props::Boolean, default: false
       prop :disabled, type: Playbook::Props::Boolean, default: false
@@ -23,6 +25,18 @@ def classnames
         classname + inline_class + compact_class
       end
 
+      def all_attributes
+        {
+          id: id,
+          prompt: blank_selection,
+          disabled: disabled,
+          required: required,
+          multiple: multiple,
+          onchange: onchange,
+          include_blank: include_blank,
+        }.merge(attributes)
+      end
+
       def classname
         generate_classname("pb_select", select_margin_bottom, separator: " ")
       end

@@ -49,3 +49,20 @@ test('returns dark class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark`)
 })
+
+test('returns multiple variant', () => {
+  render(
+    <Select
+        data={{ testid: "selectMultiple" }}
+        label="Favorite Food"
+        multiple
+        name="food"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId("selectMultiple");
+  const selectElement = kit.querySelector('select');
+
+  expect(selectElement).toHaveAttribute('multiple', '');
+});