playbook_ui 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

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

@@ -1,154 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-import { PbDropdownKeyboard } from "./keyboard_accessibility";
-
-const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
-const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
-const CONTAINER_SELECTOR = "[data-dropdown-container]";
-const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
-const UP_ARROW_SELECTOR = "#dropdown_close_icon";
-const OPTION_SELECTOR = "[data-dropdown-option-label]";
-const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-
-export default class PbDropdown extends PbEnhancedElement {
-  static get selector() {
-    return DROPDOWN_SELECTOR;
-  }
-
-  connect() {
-    this.keyboardHandler = new PbDropdownKeyboard(this);
-    this.bindEventListeners();
-    this.updateArrowDisplay(false);
-  }
-
-  bindEventListeners() {
-    const customTrigger =
-      this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
-    customTrigger.addEventListener("click", () =>
-      this.toggleElement(this.target)
-    );
-
-    this.target.addEventListener("click", this.handleOptionClick.bind(this));
-    document.addEventListener(
-      "click",
-      this.handleDocumentClick.bind(this),
-      true
-    );
-  }
-
-  handleOptionClick(event) {
-    const option = event.target.closest(OPTION_SELECTOR);
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-    if (option) {
-      const value = option.dataset.dropdownOptionLabel;
-      hiddenInput.value = JSON.parse(value).id;
-      this.onOptionSelected(value, option);
-    }
-  }
-
-  handleDocumentClick(event) {
-    if (this.isClickOutside(event) && this.target.classList.contains("open")) {
-      this.hideElement(this.target);
-      this.updateArrowDisplay(false);
-    }
-  }
-
-  isClickOutside(event) {
-    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
-    if (customTrigger) {
-      return !customTrigger.contains(event.target);
-    } else {
-      const triggerElement = this.element.querySelector(TRIGGER_SELECTOR);
-      const containerElement =
-        this.element.parentNode.querySelector(CONTAINER_SELECTOR);
-
-      const isOutsideTrigger = triggerElement
-        ? !triggerElement.contains(event.target)
-        : true;
-      const isOutsideContainer = containerElement
-        ? !containerElement.contains(event.target)
-        : true;
-
-      return isOutsideTrigger && isOutsideContainer;
-    }
-  }
-
-  onOptionSelected(value, selectedOption) {
-    const triggerElement = this.element.querySelector(
-      "#dropdown_trigger_display"
-    );
-    const customDisplayElement = this.element.querySelector(
-      "#dropdown_trigger_custom_display"
-    );
-    if (triggerElement) {
-      const selectedLabel = JSON.parse(value).label;
-      triggerElement.textContent = selectedLabel;
-      if (customDisplayElement) {
-        customDisplayElement.style.display = "block";
-        customDisplayElement.style.paddingRight = "8px";
-      }
-    }
-
-    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
-    if (customTrigger) {
-      if (this.target.classList.contains("open")) {
-        this.hideElement(this.target);
-        this.updateArrowDisplay(false);
-      }
-    }
-
-    const options = this.element.querySelectorAll(OPTION_SELECTOR);
-    options.forEach((option) => {
-      option.classList.remove("pb_dropdown_option_selected");
-    });
-    selectedOption.classList.add("pb_dropdown_option_selected");
-    console.log(`Selected value: ${value}`);
-  }
-
-  get target() {
-    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
-  }
-
-  showElement(elem) {
-    elem.classList.remove("close");
-    elem.classList.add("open");
-    elem.style.height = elem.scrollHeight + "px";
-  }
-
-  hideElement(elem) {
-    elem.style.height = elem.scrollHeight + "px";
-    window.setTimeout(() => {
-      elem.classList.add("close");
-      elem.classList.remove("open");
-      this.resetFocus();
-    }, 0);
-  }
-
-  resetFocus() {
-    if (this.keyboardHandler) {
-      this.keyboardHandler.focusedOptionIndex = -1;
-      const options = this.element.querySelectorAll(OPTION_SELECTOR);
-      options.forEach((option) =>
-        option.classList.remove("pb_dropdown_option_focused")
-      );
-    }
-  }
-
-  toggleElement(elem) {
-    if (elem.classList.contains("open")) {
-      this.hideElement(elem);
-      this.updateArrowDisplay(false);
-      return;
-    }
-    this.showElement(elem);
-    this.updateArrowDisplay(true);
-  }
-
-  updateArrowDisplay(isOpen) {
-    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
-    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
-    if (downArrow && upArrow) {
-      downArrow.style.display = isOpen ? "none" : "inline-block";
-      upArrow.style.display = isOpen ? "inline-block" : "none";
-    }
-  }
-}

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

@@ -1,77 +0,0 @@
-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

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

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

@@ -1,41 +0,0 @@
-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

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

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

@@ -1,3 +0,0 @@
-<%= 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

@@ -1,16 +0,0 @@
-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

@@ -1 +0,0 @@
-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_radio/docs/_radio_disabled.html.erb

@@ -1,26 +0,0 @@
-<%= 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

@@ -1,31 +0,0 @@
-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