playbook_ui 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812

data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js

@@ -0,0 +1,77 @@
+const OPTION_SELECTOR = "[data-dropdown-option-label]";
+export class PbDropdownKeyboard {
+  constructor(dropdown) {
+    this.dropdown = dropdown;
+    this.dropdownElement = dropdown.element;
+    this.options = Array.from(
+      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
+    );
+    this.focusedOptionIndex = -1;
+    this.init();
+  }
+
+  init() {
+    this.dropdownElement.addEventListener(
+      "keydown",
+      this.handleKeyDown.bind(this)
+    );
+  }
+
+  handleKeyDown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!this.dropdown.target.classList.contains("open")) {
+          this.dropdown.showElement(this.dropdown.target);
+          this.dropdown.updateArrowDisplay(true);
+        }
+        this.moveFocus(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.moveFocus(-1);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (this.focusedOptionIndex !== -1) {
+          this.selectOption();
+        } else {
+          if (!this.dropdown.target.classList.contains("open")) {
+            this.dropdown.showElement(this.dropdown.target);
+            this.dropdown.updateArrowDisplay(true);
+          }
+        }
+        break;
+      case "Escape":
+        this.dropdown.hideElement(this.dropdown.target);
+        break;
+      case "Tab":
+        this.dropdown.hideElement(this.dropdown.target);
+        this.dropdown.updateArrowDisplay(false);
+        this.resetFocus();
+        break;
+      default:
+        break;
+    }
+  }
+
+  moveFocus(direction) {
+    if (this.focusedOptionIndex !== -1) {
+      this.options[this.focusedOptionIndex].classList.remove(
+        "pb_dropdown_option_focused"
+      );
+    }
+    this.focusedOptionIndex =
+      (this.focusedOptionIndex + direction + this.options.length) %
+      this.options.length;
+    this.options[this.focusedOptionIndex].classList.add(
+      "pb_dropdown_option_focused"
+    );
+  }
+
+  selectOption() {
+    const option = this.options[this.focusedOptionIndex];
+    this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel, option);
+    this.dropdown.hideElement(this.dropdown.target);
+  }
+}

data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss

@@ -0,0 +1,18 @@
+@keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+  
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+  
+    to {
+      opacity: 0;
+    }
+  }

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -59,20 +59,22 @@ const DropdownOption = (props: DropdownOptionProps) => {
   const isFocused =
     focusedOptionIndex >= 0 &&
     filteredOptions[focusedOptionIndex].label === option.label;
-  const focusedClass = isFocused && "dropdown_option_focused";
+  const focusedClass = isFocused && "focused";
 
   const selectedClass = `${
     selected.label === option.label
-      ? "dropdown_option_selected"
-      : "dropdown_option_list"
+      ? "selected"
+      : "list"
   }`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
-    buildCss("pb_dropdown_option"),
-    selectedClass,
-    focusedClass,
+    buildCss(
+      "pb_dropdown_option",
+      selectedClass,
+      focusedClass,
+    ),
     globalProps(props, {padding}),
     className
   );
@@ -96,7 +98,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
       >
         <Flex
             align="center"
-            className="dropdown_option"
+            className="dropdown_option_wrapper"
             justify="between"
             paddingX="sm"
             paddingY="xxs"

data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx

@@ -0,0 +1,41 @@
+type HandleClickOutsideType = {
+  inputWrapperRef?: React.RefObject<HTMLDivElement>;
+  dropdownContainerRef?: React.RefObject<HTMLDivElement>;
+  setIsDropDownClosed?: (value: boolean) => void;
+  setFocusedOptionIndex?: (value: number) => void;
+  setIsInputFocused?: (value: boolean) => void;
+};
+
+export const handleClickOutside =
+  ({
+    inputWrapperRef,
+    dropdownContainerRef,
+    setIsDropDownClosed,
+    setFocusedOptionIndex,
+    setIsInputFocused,
+  }: HandleClickOutsideType) =>
+  (e: MouseEvent) => {
+    let targetElement = e.target as HTMLElement;
+    let shouldClose = true;
+
+    //Only needed for when useDropdown hook used with external trigger
+    while (targetElement && shouldClose) {
+      if (
+        targetElement.getAttribute("data-dropdown") === "pb-dropdown-trigger"
+      ) {
+        shouldClose = false;
+      }
+      targetElement = targetElement.parentElement as HTMLElement;
+    }
+    if (
+      inputWrapperRef.current &&
+      !inputWrapperRef.current.contains((e.target as HTMLElement)) &&
+      dropdownContainerRef.current &&
+      !dropdownContainerRef.current.contains((e.target as HTMLElement)) &&
+      shouldClose
+    ) {
+      setIsDropDownClosed(true);
+      setFocusedOptionIndex(-1);
+      setIsInputFocused(false);
+    }
+  };

data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts

@@ -0,0 +1,2 @@
+export { separateChildComponents, prepareSubcomponents } from './subComponentHelper';
+export { handleClickOutside } from './clickOutsideHelper';

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("flex") do %>
+ <%= pb_rails("progress_simple", props: { flex: "1", percent: 50 }) %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Flex, ProgressSimple } from '../..'
+
+const ProgressSimpleFlex = () => {
+  return (
+    <Flex>
+      <ProgressSimple
+          align="left"
+          flex="1"
+          percent={68}
+      />
+    </Flex>
+  )
+}
+
+export default ProgressSimpleFlex

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md

@@ -0,0 +1 @@
+When rendering a Progress Simple through within a Flex container, you must pass `flex="1"` to the kit itself so that it fills the available space

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
+  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted
@@ -12,6 +13,7 @@ examples:
   react:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
+  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted

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

@@ -2,6 +2,7 @@ export { default as ProgressSimpleAlign } from './_progress_simple_align.jsx'
 export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'
 export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
 export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
+export { default as ProgressSimpleFlex } from './_progress_simple_flex.jsx'
 export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
 export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'
 

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb

@@ -48,7 +48,7 @@ module Playbook
       end
 
       def wrapper_classname
-        "pb_progress_simple_wrapper_#{align}"
+        generate_classname("pb_progress_simple_wrapper_#{align}")
       end
 
       def classname

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -40,6 +40,23 @@
         border: 6px solid $primary;
       }
     }
+
+    &:disabled + .pb_radio_button {
+      cursor: not-allowed;
+      background-color: mix($charcoal, $white, 5%);
+      border-color: $border_light;
+
+      & ~ .pb_body_kit {
+        cursor: not-allowed;
+        color: $text_lt_light;
+      }
+    }
+
+    &:disabled:checked + .pb_radio_button{
+      cursor: not-allowed;
+      background-color: $white;
+      border: 6px solid $neutral;
+    }
   }
 
   &[class*=vertical] {
@@ -66,6 +83,24 @@
           border: 6px solid $primary;
         }
       }
+
+      &:disabled + .pb_radio_button {
+        cursor: not-allowed;
+        background-color: mix($charcoal, $white, 80%);
+        border: 2px solid $border_dark;
+
+        & ~ .pb_body_kit {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
+      }
+
+      &:disabled:checked {
+        & ~ .pb_radio_button {
+          background-color: mix($charcoal, $white, 80%);
+          border: 6px solid $border_dark;
+        }
+      }
     }
 
     @media (hover:hover) {

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -14,6 +14,7 @@ type RadioProps = {
   className?: string,
   dark?: boolean,
   data?: {[key: string]: string},
+  disabled?: boolean,
   error?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -31,6 +32,7 @@ const Radio = ({
   className,
   dark = false,
   data = {},
+  disabled = false,
   error = false,
   htmlOptions = {},
   id,
@@ -56,6 +58,7 @@ const Radio = ({
     else
     return (
     <input
+        disabled={disabled}
         id={id}
         name={name}
         onChange={onChange}

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Flex, Radio } from '../../'
 
-const RadioAlignment = () => {
+const RadioAlignment = (props) => {
   return (
     <Flex>
       <Radio
@@ -11,6 +11,7 @@ const RadioAlignment = () => {
           name="Group2"
           tabIndex={0}
           value="Power"
+          {...props}
       />
       <br />
       <Radio
@@ -20,6 +21,7 @@ const RadioAlignment = () => {
           marginRight="sm"
           name="Group2"
           value="Nitro"
+          {...props}
       />
       <br />
       <Radio
@@ -28,6 +30,7 @@ const RadioAlignment = () => {
           label="Google"
           name="Group2"
           value="Google"
+          {...props}
       />
     </Flex>
   )

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Radio from '../_radio'
 
-const RadioDefault = () => {
+const RadioDefault = (props) => {
   const ref = React.createRef()
 
   return (
@@ -13,6 +13,7 @@ const RadioDefault = () => {
           ref={ref}
           tabIndex={0}
           value="Power"
+          {...props}
       />
       <br />
       <Radio
@@ -20,6 +21,7 @@ const RadioDefault = () => {
           label="Nitro"
           name="Group2"
           value="Nitro"
+          {...props}
       />
       <br />
       <Radio
@@ -27,6 +29,7 @@ const RadioDefault = () => {
           label="Google"
           name="Group2"
           value="Google"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("radio", props: {
+            text: "Disabled unselected",
+            input_options: {
+                tabindex: 0,
+                disabled: true,
+            },
+            margin_bottom: "xs",
+            name: "DisabledGroup",
+            value: "Disabled unselected",
+        }) %>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("radio", props: {
+            text: "Disabled selected",
+            input_options: {
+                tabindex: 0,
+                disabled: true,
+            },
+            checked: true,
+            name: "DisabledGroup",
+            value: "Disabled selected"
+        }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import Radio from '../_radio'
+
+const RadioDisabled = (props) => {
+  const ref = React.createRef()
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+        <Radio 
+            disabled
+            label="Disabled unselected"
+            marginBottom="xs"
+            name="DisabledGroup"
+            ref={ref}
+            tabIndex={0}
+            value="Disabled unselected"
+            {...props}
+        />
+        <Radio
+            checked 
+            disabled
+            label="Disabled selected"
+            name="DisabledGroup"
+            value="Disabled selected"
+            {...props}
+        />
+    </div>
+  )
+}
+export default RadioDisabled

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Radio } from '../..'
 
-const RadioError = () => {
+const RadioError = (props) => {
   return (
     <div>
       <Radio
@@ -9,6 +9,7 @@ const RadioError = () => {
           label="Power"
           name="Group2"
           value="Power"
+          {...props}
       />
     </div>
   )

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

@@ -6,12 +6,14 @@ examples:
   - radio_error: With Error
   - radio_options: With Options
   - radio_alignment: Alignment
+  - radio_disabled: Disabled
 
   react:
   - radio_default: Default
   - radio_custom: Custom
   - radio_error: With Error
   - radio_alignment: Alignment
+  - radio_disabled: Disabled
 
   swift:
   - radio_default_swift: Default

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

@@ -2,3 +2,4 @@ export { default as RadioDefault } from './_radio_default.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
 export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
+export { default as RadioDisabled } from './_radio_disabled.jsx'

data/app/pb_kits/playbook/pb_radio/radio.rb

@@ -11,6 +11,7 @@ module Playbook
                      default: false
       prop :error, type: Playbook::Props::Boolean,
                    default: false
+      prop :disabled, type: Playbook::Props::Boolean, default: false
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
       prop :name, type: Playbook::Props::String,
@@ -32,6 +33,10 @@ module Playbook
         error ? "negative" : nil
       end
 
+      def input
+        radio_button_tag(name, value, checked, input_options.merge(disabled: disabled))
+      end
+
     private
 
       def error_class

data/app/pb_kits/playbook/pb_radio/radio.test.js

@@ -69,3 +69,20 @@ test('returns dark + error class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark error`)
 })
+
+test('has disabled attribute', () => {
+  render(
+    <Radio
+        data={{ testid: testId }}
+        disabled
+        label="Power"
+        name="Group2"
+        value="Power"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.querySelector('input')
+  expect(input).toHaveAttribute('disabled')
+})
+

data/app/pb_kits/playbook/playbook-rails.js

@@ -33,6 +33,9 @@ PbTable.start()
 import PbTextarea from './pb_textarea'
 PbTextarea.start()
 
+import PbDropdown from './pb_dropdown'
+PbDropdown.start()
+
 import 'flatpickr'
 
 // React-Rendered Rails Kits =====