playbook_ui 14.20.0.pre.alpha.play2168firstcolumnborderbug7950 → 14.20.0.pre.alpha.play2212tablekitstickycolumnswithresponsivenone7979

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fcf6c9b4cc1f09fe9f4ad71387108d0a83305a79498d68a455660c8a1d877d9a
-  data.tar.gz: c95645d5f485724ecc9af73bdfd15701be9aac3b11e3626dead28ce4767ec149
+  metadata.gz: b4e9f81a39e99264f7447b0889451c36c4676c33f5f8c836d785432d0e9b4496
+  data.tar.gz: c870628692d424816911bdaa0c05517e26c05731a5d01e12e1de2b5a80720a87
 SHA512:
-  metadata.gz: a46969b38f920b5c13d33d8f2287a56942f8f20f833734a1c282c36cd8328f693ee134a4af557d03d60cd91be39c099c816c088a070f4041cad0ee4a95d16f15
-  data.tar.gz: 05fae68a0a62be4ec28dec7c2d46b8e16f8998309da8064566003b8b7bc9471cef8f36605dbd475627fcadd1c1988d41acd513f356278d0941ab5da354dfafe9
+  metadata.gz: 827b59f32cbf03452c6fe62dd227dced2681eaf6d38fe7c1832b338b6909886f613ca5e7d7743c43073474642bdf7c6ed7a688ec0dbe679358f330f646c9c037
+  data.tar.gz: fed471e895d0f88a489c629f74b6fd49b318ca7e063e200522264433aac2b3b4628265cde7884b75549bfd462498aa058f00af42fa32eaaab7ad15d02924da03

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -368,10 +368,6 @@
     box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
   }
 
-  .pb_table_td:nth-child(2) {
-    box-shadow: inset 1px 0px 0px 0px var(--column-border-color) !important;
-  }
-
   // Color for collapsible trail
   .collapsible-trail {
     background-color: $border_light !important;
@@ -568,10 +564,6 @@
         box-shadow: $shadow_deep !important;
       }
 
-      .pb_table_td:nth-child(2) {
-        box-shadow: 0 0 0 0 !important;
-      }
-
       .pb_advanced_table_header,
       .pb_advanced_table_body {
         th.sticky-left,

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen } from "../utilities/test-utils"
+import { render, screen, fireEvent } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
 
@@ -263,4 +263,110 @@ test("searchbar prop to render TextInput in container", () => {
   const kit = screen.getByTestId(testId)
   const searchbar = kit.querySelector('.pb_text_input_kit')
   expect(searchbar).toBeInTheDocument()
-})
+})
+
+test("MultiSelect prop to allow multiple selections + add correct Form Pills", () => {
+  render(
+    <Dropdown 
+        data={{ testid: testId }} 
+        multiSelect 
+        options={options} 
+    />
+ );
+
+  const kit = screen.getByTestId(testId);
+  const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  fireEvent.click(option[0]); // Select first option
+  fireEvent.click(option[1]); // Select second option
+  const formPills = kit.querySelectorAll(".pb_form_pill_kit_primary");
+  expect(formPills.length).toBe(2);
+  expect(formPills[0]).toHaveTextContent("United States");
+  expect(formPills[1]).toHaveTextContent("Canada");
+});
+
+ test("hides each selected option from the dropdown", () => {
+
+    render(
+      <Dropdown 
+          data={{ testid: testId }} 
+          multiSelect 
+          options={options} 
+      />
+    );
+
+  const kit = screen.getByTestId(testId);
+  const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  const firstOpt = options[0].label
+  fireEvent.click(option[0]);
+  const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+  expect(option2[0]).not.toHaveTextContent(firstOpt)
+  })
+
+test("renders form pills inside trigger", () => {
+      render(
+        <Dropdown 
+            data={{ testid: testId }} 
+            multiSelect 
+            options={options} 
+        />
+      );
+
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(formPill).toBeInTheDocument()
+  })
+
+test("multiSelect and autocomplete to work together", () => {
+  render (
+    <Dropdown
+        autocomplete
+        data={{ testid: testId }}
+        multiSelect
+        options={options}
+    />   
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('.dropdown_input')
+  expect(input).toBeInTheDocument()
+    const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(formPill).toBeInTheDocument()
+})
+
+test("renders form pills with size and color", () => {
+      render(
+        <Dropdown 
+            data={{ testid: testId }} 
+            formPillProps={{ size: "small", color: "neutral" }}
+            multiSelect 
+            options={options} 
+        />
+      );
+
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  fireEvent.click(option)
+  const formPill = kit.querySelector(".pb_form_pill_kit_neutral")
+  expect(formPill).toBeInTheDocument()
+  expect(formPill).toHaveClass("small")
+  })
+
+test("defaultValue works with multiSelect", () => {
+    render(
+      <Dropdown
+          data={{ testid: testId }}
+          defaultValue={[options[0], options[2]]}
+          multiSelect
+          options={options}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit.querySelectorAll(".pb_form_pill_kit_primary")).toHaveLength(2)
+    const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
+    const firstOpt = options[0].label
+    expect(option2[0]).not.toHaveTextContent(firstOpt)
+  })

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -33,6 +33,7 @@ type PhoneNumberInputProps = {
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
   onValidate?: Callback<boolean, void>,
   onlyCountries: string[],
+  excludeCountries: string[],
   preferredCountries?: string[],
   required?: boolean,
   value?: string,
@@ -88,6 +89,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     },
     onValidate = () => null,
     onlyCountries = [],
+    excludeCountries = [],
     required = false,
     preferredCountries = [],
     value = "",
@@ -234,6 +236,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   const fallbackCountry =
     preferredCountries.length > 0 ? preferredCountries[0] :
       onlyCountries.length > 0 ? onlyCountries.sort()[0] :
+      excludeCountries.length > 0 ? excludeCountries.sort()[0] :
         "af";
 
   useEffect(() => {
@@ -244,6 +247,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       autoInsertDialCode: false,
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
+      excludeCountries,
       countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: 'gb',
+    exclude_countries: ['us', 'br']
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputExcludeCountries = (props) => (
+  <>
+    <PhoneNumberInput
+        excludeCountries={['us', 'br']}
+        id='exclude'
+        initialCountry='gb'
+        {...props}
+    />
+  </>
+)
+
+export default PhoneNumberInputExcludeCountries

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.md

@@ -0,0 +1 @@
+Excluding countries removes the selected countries from the dropdown.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx

@@ -6,7 +6,7 @@ const PhoneNumberInputOnlyCountries = (props) => (
     <PhoneNumberInput
         id='only'
         onlyCountries={['us', 'br']}
-        {...props} 
+        {...props}
     />
   </>
 )

data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml

@@ -4,7 +4,8 @@ examples:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Only Countries
+  - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
@@ -15,9 +16,9 @@ examples:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Only Countries
+  - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search
-  

data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js

@@ -2,6 +2,7 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
+export { default as PhoneNumberInputExcludeCountries } from './_phone_number_input_exclude_countries'
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -15,6 +15,8 @@ module Playbook
                   default: ""
       prop :only_countries, type: Playbook::Props::Array,
                             default: []
+      prop :exclude_countries, type: Playbook::Props::Array,
+                               default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
       prop :error, type: Playbook::Props::String,
@@ -44,6 +46,7 @@ module Playbook
           label: label,
           name: name,
           onlyCountries: only_countries,
+          excludeCountries: exclude_countries,
           preferredCountries: preferred_countries,
           required: required,
           value: value,

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -3,7 +3,7 @@
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-xs-max) {
-  [class^=pb_table] {
+  [class^=pb_table]:not(.table-responsive-scroll) {
     &.table-sm.table-collapse-sm,
     &.table-md.table-collapse-sm,
     &.table-lg.table-collapse-sm {