playbook_ui 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 → 13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2783

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')
-  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')
-  option.click()
-  expect(option).toHaveClass('pb_dropdown_option 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,13 +6,13 @@ export const useHandleOnKeyDown = () => {
 
 const {
   autocomplete,
-  filteredOptions,
   focusedOptionIndex,
-  handleBackspace,
-  handleOptionClick,
-  selected,
+  filteredOptions,
   setFocusedOptionIndex,
+  handleOptionClick,
   setIsDropDownClosed,
+  handleBackspace,
+  selected,
 }= useContext(DropdownContext)
 
   return (e: React.KeyboardEvent) => {

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

@@ -17,9 +17,8 @@ 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;
@@ -29,9 +28,8 @@ type DropdownContainerProps = {
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {
     aria = {},
-    children,
     className,
-    dark = false,
+    children,
     data = {},
     htmlOptions = {},
     id,
@@ -39,14 +37,12 @@ const DropdownContainer = (props: DropdownContainerProps) => {
   } = props;
 
   const {
-    dropdownContainerRef,
-    filteredOptions,
-    filterItem,
+    isDropDownClosed,
     handleChange,
+    filterItem,
+    filteredOptions,
     inputRef,
-    isDropDownClosed,
     setFocusedOptionIndex,
-    triggerRef
   } = useContext(DropdownContext);
 
   const ariaProps = buildAriaProps(aria);
@@ -66,12 +62,9 @@ const DropdownContainer = (props: DropdownContainerProps) => {
         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 +75,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 +85,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

@@ -17,37 +17,35 @@ 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;
+  key?: string;
   padding?: string;
 }  & GlobalProps;
 
 const DropdownOption = (props: DropdownOptionProps) => {
   const {
     aria = {},
-    children,
     className,
-    dark = false,
+    children,
     data = {},
     htmlOptions = {},
     id,
-    key,
     option,
+    key,
     padding = "xs",
   } = props;
 
   const {
-    filteredOptions,
-    filterItem,
-    focusedOptionIndex,
     handleOptionClick,
     selected,
+    filterItem,
+    filteredOptions,
+    focusedOptionIndex,
   } = useContext(DropdownContext);
 
   const isItemMatchingFilter = (option: GenericObject) =>
@@ -89,7 +87,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
     >
       <ListItem
           cursor="pointer"
-          dark={dark}
           data-name={option.value}
           key={option.label}
           padding="none"
@@ -101,12 +98,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
             paddingX="sm"
             paddingY="xxs"
         >
-          {children ? 
-              children : 
-              <Body dark={dark} 
-                  text={option.label} 
-              />
-          }
+          {children ? children : <Body text={option.label} />}
         </Flex>
       </ListItem>
     </div>

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

@@ -21,7 +21,6 @@ type DropdownTriggerProps = {
   children?: React.ReactChild[] | React.ReactChild;
   className?: string;
   customDisplay?: React.ReactChild[] | React.ReactChild;
-  dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
@@ -31,10 +30,9 @@ type DropdownTriggerProps = {
 const DropdownTrigger = (props: DropdownTriggerProps) => {
   const {
     aria = {},
-    children,
     className,
+    children,
     customDisplay,
-    dark = false,
     data = {},
     htmlOptions = {},
     id,
@@ -43,17 +41,15 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
 
   const {
     autocomplete,
+    handleWrapperClick,
+    selected,
     filterItem,
     handleChange,
-    handleWrapperClick,
-    inputRef,
-    inputWrapperRef,
+    toggleDropdown,
     isDropDownClosed,
+    inputRef,
     isInputFocused,
-    selected,
     setIsInputFocused,
-    toggleDropdown,
-    triggerRef,
   } = useContext(DropdownContext);
 
   const handleKeyDown = useHandleOnKeyDown();
@@ -67,11 +63,9 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     className
   );
 
-  const triggerWrapperClasses = buildCss(
-    "dropdown_trigger_wrapper",
-    isInputFocused && "focus",
-    !autocomplete && "select_only"
-  );
+  const triggerWrapperClasses = `dropdown_trigger_wrapper ${
+    isInputFocused && "dropdown_trigger_wrapper_focus"
+  } ${!autocomplete && "dropdown_trigger_wrapper_select_only"}`;
 
   const customDisplayPlaceholder = selected.label ? (
     <b>{selected.label}</b>
@@ -98,91 +92,79 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
         className={classes} 
         id={id}
     >
-      {
-        !triggerRef && (
-          children ? (
-            <div
-                onClick={() => toggleDropdown()}
-                onKeyDown= {handleKeyDown}
-                ref={inputWrapperRef}
-                style={{ display: "inline-block" }}
-                tabIndex= {0}
-            >
-              {children}
-            </div>
-          ) : (
-            <>
-              <Flex
-                  align="center"
-                  borderRadius="lg"
-                  className={triggerWrapperClasses}
-                  cursor={`${autocomplete ? "text" : "pointer"}`}
-                  htmlOptions={{
-                    onClick: () => handleWrapperClick(),
-                    onKeyDown: handleKeyDown,
-                    tabIndex: "0",
-                    ref:inputWrapperRef
-                  }}
-                  justify="between"
-                  paddingX="sm"
-                  paddingY="xs"
-              >
-                <FlexItem>
+      {children ? (
+        <div
+            onClick={() => toggleDropdown()}
+            onKeyDown= {handleKeyDown}
+            style={{ display: "inline-block" }}
+            tabIndex= {0}
+        >
+          {children}
+        </div>
+      ) : (
+        <>
+          <Flex
+              align="center"
+              borderRadius="lg"
+              className={triggerWrapperClasses}
+              cursor={`${autocomplete ? "text" : "pointer"}`}
+              htmlOptions={{
+                onClick: () => handleWrapperClick(),
+                onKeyDown: handleKeyDown,
+                tabIndex: "0",
+              }}
+              justify="between"
+              paddingX="sm"
+              paddingY="xs"
+          >
+            <FlexItem>
+              <Flex align="center">
+                {customDisplay ? (
                   <Flex align="center">
-                    {customDisplay ? (
-                      <Flex align="center">
-                        {customDisplay}
-                        <Body dark={dark} 
-                            paddingLeft={`${selected.label ? "xs" : "none"}`}
-                        >
-                          {customDisplayPlaceholder}
-                        </Body>
-                      </Flex>
-                    ) : (
-                      <Body dark={dark} 
-                          text={defaultDisplayPlaceholder} 
-                      />
-                    )}
-                    {autocomplete && (
-                      <input
-                          className="dropdown_input"
-                          onChange={handleChange}
-                          onClick={() => toggleDropdown()}
-                          onFocus={() => setIsInputFocused(true)}
-                          onKeyDown={handleKeyDown}
-                          placeholder={
-                            selected.label
-                              ? ""
-                              : placeholder
-                              ? placeholder
-                              : "Select..."
-                          }
-                          ref={inputRef}
-                          value={filterItem}
-                      />
-                    )}
+                    {customDisplay}
+                    <Body paddingLeft={`${selected.label ? "xs" : "none"}`}>
+                      {customDisplayPlaceholder}
+                    </Body>
                   </Flex>
-                </FlexItem>
-                  <Body
-                      dark={dark}
-                      display="flex"
-                      htmlOptions={{
-                        onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
-                      }}
-                      key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                  >
-                    <Icon
-                        cursor="pointer"
-                        dark={dark}
-                        icon={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                        size="sm"
-                    />
-                  </Body>
+                ) : (
+                  <Body text={defaultDisplayPlaceholder} />
+                )}
+                {autocomplete && (
+                  <input
+                      className="dropdown_input"
+                      onChange={handleChange}
+                      onClick={() => toggleDropdown()}
+                      onFocus={() => setIsInputFocused(true)}
+                      onKeyDown={handleKeyDown}
+                      placeholder={
+                        selected.label
+                          ? ""
+                          : placeholder
+                          ? placeholder
+                          : "Select..."
+                      }
+                      ref={inputRef}
+                      value={filterItem}
+                  />
+                )}
               </Flex>
-            </>
-          )
-        )
-      }
+            </FlexItem>
+              <Body
+                  display="flex"
+                  htmlOptions={{
+                    onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
+                  }}
+                  key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+              >
+                <Icon
+                    cursor="pointer"
+                    icon={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+                    size="sm"
+                />
+              </Body>
+          </Flex>
+        </>
+      )}
     </div>
   );
 };

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

@@ -4,12 +4,11 @@ import DropdownContainer from "../subcomponents/DropdownContainer";
 
 type PrepareComponentsProps = {
   children: React.ReactChild[] | React.ReactChild;
-  container: React.ReactChild;
-  dark?: boolean;
-  hasContainerSubcomponent: boolean;
   hasTriggerSubcomponent: boolean;
-  otherChildren: React.ReactChild[];
+  hasContainerSubcomponent: boolean;
   trigger: React.ReactChild;
+  container: React.ReactChild;
+  otherChildren: React.ReactChild[];
 };
 
 export const separateChildComponents = (children: React.ReactChild[] | React.ReactChild | ReactElement[]) => {
@@ -37,20 +36,19 @@ export const prepareSubcomponents = ({
   trigger,
   container,
   otherChildren,
-  dark
 }: PrepareComponentsProps) => {
   const componentsToRender = [];
 
   if (!hasTriggerSubcomponent && !hasContainerSubcomponent) {
-    componentsToRender.push(<DropdownTrigger dark={dark}/>);
-    componentsToRender.push(<DropdownContainer dark={dark}>{children}</DropdownContainer>);
+    componentsToRender.push(<DropdownTrigger />);
+    componentsToRender.push(<DropdownContainer>{children}</DropdownContainer>);
   } else if (!hasTriggerSubcomponent && hasContainerSubcomponent) {
-    componentsToRender.push(<DropdownTrigger dark={dark}/>);
+    componentsToRender.push(<DropdownTrigger />);
     componentsToRender.push(children);
   } else if (hasTriggerSubcomponent && !hasContainerSubcomponent) {
     componentsToRender.push(trigger);
     componentsToRender.push(
-      <DropdownContainer dark={dark}>{otherChildren}</DropdownContainer>
+      <DropdownContainer>{otherChildren}</DropdownContainer>
     );
   } else {
     componentsToRender.push(trigger);

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -127,7 +127,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
             }
           }}
           role="tooltip_trigger"
-          style={{ display: "inline-flex" }}
           {...ariaProps}
           {...dataProps}
           {...htmlProps}