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

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

@@ -1,23 +1,9 @@
 examples:
-  rails:
-  - dropdown_default: Default
-  - dropdown_subcomponent_structure: Subcomponent Structure
-  - dropdown_with_label: With Label
-  - dropdown_with_custom_options: Custom Options
-  - dropdown_with_custom_display: Custom Display
-  - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
-
+  
+  
   react:
   - dropdown_default: Default
-  - dropdown_subcomponent_structure: Subcomponent Structure
-  - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
-  # - dropdown_with_autocomplete: Autocomplete
-  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
-  # - dropdown_with_external_control: useDropdown Hook
-  # - dropdown_with_hook: useDropdown Hook with Any Trigger
 

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

@@ -2,10 +2,3 @@ export { default as DropdownDefault } from './_dropdown_default.jsx'
 export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
-export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
-export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
-export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
-export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
-export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
-export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
-export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'

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

@@ -1,207 +1,17 @@
-import React from "react"
-import { render, screen } from "../utilities/test-utils"
+import { renderKit } from '../utilities/test-utils'
 
-import { Dropdown, Icon } from '../'
+import { Dropdown } from '../'
 
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
 
-const testId = 'dropdown'
-
-const options = [
-  {
-    label: "United States",
-    value: "United States",
-    areaCode: "+1",
-    icon: "🇺🇸",
-    id: "United-states"
-  },
-  {
-    label: "Canada",
-    value: "Canada",
-    areaCode: "+1",
-    icon: "🇨🇦",
-    id: "canada"
-  },
-  {
-    label: "Pakistan",
-    value: "Pakistan",
-    areaCode: "+92",
-    icon: "🇵🇰",
-    id: "pakistan"
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
   }
-];
-
-const DefaultDropdownKit = () => {
-  return (
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-    >
-    {options.map((option) => (
-      <Dropdown.Option key={option.id} 
-          option={option}
-      /> 
-    ))}
-    </Dropdown>
-  )
-}
 
-test('generated default kit and classname', () => {
-  render(<DefaultDropdownKit/>)
-
-  const kit = screen.getByTestId(testId)
+  const kit = renderKit(Dropdown , props)
   expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_dropdown')
-})
-
-test('generated default Trigger and Container when none passed in', () => {
-  render(<DefaultDropdownKit/>)
-
-  const kit = screen.getByTestId(testId)
-
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  expect(trigger).toBeInTheDocument()
-
-  const container = kit.querySelector('.pb_dropdown_container')
-  expect(container).toBeInTheDocument()
-
-  const defaultTrigger = kit.querySelector('.dropdown_trigger_wrapper_select_only')
-  expect(defaultTrigger).toBeInTheDocument()
-})
-
-test('generated Options', () => {
-  render(<DefaultDropdownKit/>)
-
-  const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option_list')
-  expect(option).toBeInTheDocument()
-})
-
-test('generated customDisplay for trigger', () => {  
-  render (
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-    >
-      <Dropdown.Trigger 
-          customDisplay={<Icon icon="flag" />}
-      />
-      {options.map((option) => (
-      <Dropdown.Option key={option.id} 
-          option={option}
-      /> 
-    ))}
-    </Dropdown>
-  )
-
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customDisplay = trigger.querySelector('.fa-flag.pb_icon_kit.fa-fw')
-  expect(customDisplay).toBeInTheDocument()
 })
-
-test('generated placeholder prop', () => { 
-  render (
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-    >
-      <Dropdown.Trigger 
-          placeholder="Select a country"
-      />
-      {options.map((option) => (
-      <Dropdown.Option key={option.id} 
-          option={option}
-      /> 
-    ))}
-    </Dropdown>
-  )
-
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  expect(trigger).toHaveTextContent('Select a country')
-
-})
-
-test('generated label prop', () => { 
-  render (
-    <Dropdown
-        data={{ testid: testId }}
-        label="Countries"
-        options={options}
-    >
-      {options.map((option) => (
-      <Dropdown.Option key={option.id} 
-          option={option}
-      /> 
-    ))}
-    </Dropdown>
-  )
-
-  const kit = screen.getByTestId(testId)
-  const label = kit.querySelector('.pb_caption_kit_md')
-  expect(label).toHaveTextContent('Countries')
-})
-
-test('generated custom option', () => {
-  render (
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-    >
-      {options.map((option) => (
-      <Dropdown.Option key={option.id} 
-          option={option}
-      >
-         <Icon icon={option.icon} />
-      </Dropdown.Option>
-    ))}
-    </Dropdown>
-  )
-
-  const kit = screen.getByTestId(testId)
-  const customOption = kit.querySelector('.pb_icon_kit_emoji')
-  expect(customOption).toBeInTheDocument()
-})
-
-test('generated custom Trigger', () => {
-  render (
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-    >
-      <Dropdown.Trigger>
-          <Icon icon="home" />
-      </Dropdown.Trigger>
-      {options.map((option) => (
-      <Dropdown.Option key={option.id} 
-          option={option}
-      /> 
-    ))}
-    </Dropdown>
-  )
-
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.pb_dropdown_trigger')
-  const customTrigger = trigger.querySelector('.fa-home.pb_icon_kit.fa-fw')
-  expect(customTrigger).toBeInTheDocument()
-})
-
-test('selected option on click', () => {  
-  render (
-    <Dropdown
-        data={{ testid: testId }}
-        options={options}
-    >
-      {options.map((option) => (
-      <Dropdown.Option key={option.id} 
-          option={option}
-      /> 
-    ))}
-    </Dropdown>
-  )
-
-  const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option_list')
-  option.click()
-  expect(option).toHaveClass('pb_dropdown_option_selected p_xs')
-})

data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx

@@ -1,11 +1,11 @@
 import {useState} from 'react';
 
 
-const useDropdown = (initial= true) => {
+const useDropdown = (initial=true) => {
     
 const [isDropDownClosed, setIsDropDownClosed] = useState(initial);
 
-const toggleDropdown = () => setIsDropDownClosed((prev) => !prev);
+const toggleDropdown = () => setIsDropDownClosed(!isDropDownClosed);
 
 return [
     isDropDownClosed,

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx

@@ -6,21 +6,16 @@ export const useHandleOnKeyDown = () => {
 
 const {
   autocomplete,
-  filteredOptions,
   focusedOptionIndex,
-  handleBackspace,
-  handleOptionClick,
-  selected,
+  filteredOptions,
   setFocusedOptionIndex,
+  handleOptionClick,
   setIsDropDownClosed,
+  handleBackspace,
+  selected
 }= useContext(DropdownContext)
 
   return (e: React.KeyboardEvent) => {
-
-    if (e.key !== "Tab" && autocomplete && selected && selected.label) {
-      handleBackspace();
-    }
-
     switch (e.key) {
     case "Backspace":
     case "Delete":
@@ -48,13 +43,13 @@ const {
         e.preventDefault();
         handleOptionClick(filteredOptions[focusedOptionIndex]);
         setFocusedOptionIndex(-1)
-      } else if (focusedOptionIndex === -1) {
-        setIsDropDownClosed(false)
       }
       break;
-      case "Tab":
-        setIsDropDownClosed(true);
-        setFocusedOptionIndex(-1)
+    default:
+        if (selected && selected.label) {
+          e.preventDefault();
+          handleBackspace();
+        }
         break;
   }
 }

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

@@ -4,7 +4,6 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 
@@ -17,11 +16,9 @@ import Body from "../../pb_body/_body";
 
 type DropdownContainerProps = {
   aria?: { [key: string]: string };
-  children?: React.ReactChild[] | React.ReactChild;
   className?: string;
-  dark?: boolean;
+  children?: React.ReactChild[] | React.ReactChild;
   data?: { [key: string]: string };
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
 };
@@ -29,29 +26,24 @@ type DropdownContainerProps = {
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {
     aria = {},
-    children,
     className,
-    dark = false,
+    children,
     data = {},
-    htmlOptions = {},
     id,
     searchbar = false,
   } = props;
 
   const {
-    dropdownContainerRef,
-    filteredOptions,
-    filterItem,
+    isDropDownClosed,
     handleChange,
+    filterItem,
+    filteredOptions,
     inputRef,
-    isDropDownClosed,
     setFocusedOptionIndex,
-    triggerRef
   } = useContext(DropdownContext);
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown_container"),
     `${isDropDownClosed ? "close" : "open"}`,
@@ -62,16 +54,12 @@ const DropdownContainer = (props: DropdownContainerProps) => {
   return (
     <div {...ariaProps} 
         {...dataProps} 
-        {...htmlProps}
         className={classes} 
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}
-        ref={dropdownContainerRef}
-        style={triggerRef ? {} : { position: "absolute"}}
     >
       {searchbar && (
-        <TextInput dark={dark}
-            paddingTop="xs" 
+        <TextInput paddingTop="xs" 
             paddingX="xs"
         >
             <input
@@ -82,10 +70,9 @@ const DropdownContainer = (props: DropdownContainerProps) => {
             />
         </TextInput>
       )}
-      <List dark={dark}>
-        {
+      <List>{
         filteredOptions?.length === 0 ? (
-          <ListItem dark={dark}
+          <ListItem
               display="flex"
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore
@@ -93,7 +80,6 @@ const DropdownContainer = (props: DropdownContainerProps) => {
               padding="xs"
           >
             <Body color="light" 
-                dark={dark}
                 text="no option"
             />
           </ListItem>

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

@@ -4,9 +4,8 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps,
 } from "../../utilities/props";
-import { globalProps, GlobalProps } from "../../utilities/globalProps";
+import { globalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
@@ -17,38 +16,19 @@ import { GenericObject } from "../../types";
 
 type DropdownOptionProps = {
   aria?: { [key: string]: string };
-  children?: React.ReactChild[] | React.ReactChild;
   className?: string;
-  dark?: boolean;
+  children?: React.ReactChild[] | React.ReactChild;
   data?: { [key: string]: string };
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
-  key?: string;
   option?: GenericObject;
-  padding?: string;
-}  & GlobalProps;
+  key?: string;
+};
 
 const DropdownOption = (props: DropdownOptionProps) => {
-  const {
-    aria = {},
-    children,
-    className,
-    dark = false,
-    data = {},
-    htmlOptions = {},
-    id,
-    key,
-    option,
-    padding = "xs",
-  } = props;
+  const { aria = {}, className, children, data = {}, id, option, key } = props;
 
-  const {
-    filteredOptions,
-    filterItem,
-    focusedOptionIndex,
-    handleOptionClick,
-    selected,
-  } = useContext(DropdownContext);
+  const { handleOptionClick, selected, filterItem, filteredOptions, focusedOptionIndex } =
+    useContext(DropdownContext);
 
   const isItemMatchingFilter = (option: GenericObject) =>
     option?.label.toLowerCase().includes(filterItem.toLowerCase());
@@ -56,58 +36,51 @@ const DropdownOption = (props: DropdownOptionProps) => {
   if (!isItemMatchingFilter(option)) {
     return null;
   }
-  const isFocused =
-    focusedOptionIndex >= 0 &&
-    filteredOptions[focusedOptionIndex].label === option.label;
-  const focusedClass = isFocused && "focused";
+  const isFocused = focusedOptionIndex >= 0 && filteredOptions[focusedOptionIndex].label === option.label
+  const focusedClass = isFocused && "dropdown_option_focused"
 
   const selectedClass = `${
     selected.label === option.label
-      ? "selected"
-      : "list"
-  }`;
+        ? "dropdown_option_selected"
+        : "dropdown_option_list"
+  }`
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
-    buildCss(
-      "pb_dropdown_option",
-      selectedClass,
-      focusedClass,
-    ),
-    globalProps(props, {padding}),
+    buildCss("pb_dropdown_option"),
+    selectedClass,
+    focusedClass,
+    globalProps(props),
     className
   );
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+    <div {...ariaProps} 
+        {...dataProps} 
+        className={classes} 
+        id={id} 
         key={key}
-        onClick= {() => handleOptionClick(option)}
     >
       <ListItem
           cursor="pointer"
-          dark={dark}
           data-name={option.value}
+          htmlOptions={{ onClick: () => handleOptionClick(option) }}
           key={option.label}
-          padding="none"
+          padding="xs"
       >
         <Flex
             align="center"
-            className="dropdown_option_wrapper"
+            className="dropdown_option"
             justify="between"
             paddingX="sm"
             paddingY="xxs"
         >
-          {children ? 
-              children : 
-              <Body dark={dark} 
-                  text={option.label} 
-              />
+          {
+            children ? (
+              children
+            ) : (
+              <Body text={option.label}/>
+            )
           }
         </Flex>
       </ListItem>