RubyGems - playbook_ui - Versions diffs - 13.24.0 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713 - Mend

playbook_ui 13.24.0 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

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

@@ -0,0 +1,91 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import DropdownContext from "../context";
+import Flex from "../../pb_flex/_flex";
+import Body from "../../pb_body/_body";
+import ListItem from "../../pb_list/_list_item";
+import { GenericObject } from "../../types";
+type DropdownOptionProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  children?: React.ReactChild[] | React.ReactChild;
+  data?: { [key: string]: string };
+  id?: string;
+  option?: GenericObject;
+  key?: string;
+};
+const DropdownOption = (props: DropdownOptionProps) => {
+  const { aria = {}, className, children, data = {}, id, option, key } = props;
+  const { handleOptionClick, selected, filterItem, filteredOptions, focusedOptionIndex } =
+    useContext(DropdownContext);
+  const isItemMatchingFilter = (option: GenericObject) =>
+    option?.label.toLowerCase().includes(filterItem.toLowerCase());
+  if (!isItemMatchingFilter(option)) {
+    return null;
+  }
+  const isFocused = focusedOptionIndex >= 0 && filteredOptions[focusedOptionIndex].label === option.label
+  const focusedClass = isFocused && "dropdown_option_focused"
+  const selectedClass = `${
+    selected.label === option.label
+        ? "dropdown_option_selected"
+        : "dropdown_option_list"
+  }`
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown_option"),
+    selectedClass,
+    focusedClass,
+    globalProps(props),
+    className
+  );
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+        key={key}
+    >
+      <ListItem
+          cursor="pointer"
+          data-name={option.value}
+          htmlOptions={{ onClick: () => handleOptionClick(option) }}
+          key={option.label}
+          padding="xs"
+      >
+        <Flex
+            align="center"
+            className="dropdown_option"
+            justify="between"
+            paddingX="sm"
+            paddingY="xxs"
+        >
+          {
+            children ? (
+              children
+            ) : (
+              <Body text={option.label}/>
+            )
+          }
+        </Flex>
+      </ListItem>
+    </div>
+  );
+};
+export default DropdownOption;

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

@@ -0,0 +1,128 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
+import DropdownContext from "../context";
+import Body from "../../pb_body/_body";
+import Icon from "../../pb_icon/_icon";
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+type DropdownTriggerProps = {
+  aria?: { [key: string]: string };
+  children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  customDisplay?: React.ReactChild[] | React.ReactChild;
+  data?: { [key: string]: string };
+  id?: string;
+};
+const DropdownTrigger = (props: DropdownTriggerProps) => {
+  const { aria = {}, className, children, customDisplay, data = {}, id } = props;
+  const {
+    autocomplete,
+    handleWrapperClick,
+    selected,
+    filterItem,
+    handleChange,
+    toggleDropdown,
+    isDropDownClosed,
+    inputRef,
+    isInputFocused,
+    setIsInputFocused
+  } = useContext(DropdownContext);
+  const handleKeyDown = useHandleOnKeyDown();
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown_trigger"),
+    globalProps(props),
+    className
+  );
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {children ? (
+        <div
+            onClick={() => toggleDropdown()}
+            style={{ display: "inline-block" }}
+        >
+          {children}
+        </div>
+      ) : (
+        <>
+          <Flex align="center"
+              borderRadius="lg"
+              className={`dropdown_trigger_wrapper ${isInputFocused && 'dropdown_trigger_wrapper_focus'}`}
+              cursor="pointer"
+              htmlOptions={{
+                onClick: () => handleWrapperClick(),
+                onKeyDown: handleKeyDown,
+                tabIndex:"0",
+              }}
+              justify="between"
+              paddingX="sm"
+              paddingY="xs"
+          >
+            <FlexItem>
+                <Flex align="center">
+                    {customDisplay ? (
+                      <Flex align="center">
+                          {customDisplay}
+                          <Body paddingLeft={`${selected.label ? "xs" : "none"}`}>
+                            {selected.label ? <b>{selected.label}</b> : autocomplete ? "" : "Select..." }
+                          </Body>
+                      </Flex>
+                      ) : (
+                        <Body text={selected.label ? selected.label : autocomplete ? "" : "Select..."} />
+                      )
+                    }
+                    {
+                      autocomplete && (
+                        <input
+                            className="dropdown_input"
+                            onChange={handleChange}
+                            onClick={() => toggleDropdown()}
+                            onFocus={() => setIsInputFocused(true)}
+                            onKeyDown={handleKeyDown}
+                            placeholder={selected.label ? "" : "Select..."}
+                            ref={inputRef}
+                            value={filterItem}
+                        />
+                      )
+                    }
+                </Flex>
+            </FlexItem>
+            <FlexItem>
+                <Body display="flex"
+                    key={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                >
+                    <Icon cursor="pointer"
+                        icon={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                        size="sm"
+                    />
+                </Body>
+            </FlexItem>
+          </Flex>
+        </>
+      )}
+    </div>
+  );
+};
+export default DropdownTrigger;

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

@@ -0,0 +1,59 @@
+import React, { ReactElement } from "react";
+import DropdownTrigger from "../subcomponents/DropdownTrigger";
+import DropdownContainer from "../subcomponents/DropdownContainer";
+type PrepareComponentsProps = {
+  children: React.ReactChild[] | React.ReactChild;
+  hasTriggerSubcomponent: boolean;
+  hasContainerSubcomponent: boolean;
+  trigger: React.ReactChild;
+  container: React.ReactChild;
+  otherChildren: React.ReactChild[];
+};
+export const separateChildComponents = (children: React.ReactChild[] | React.ReactChild | ReactElement[]) => {
+  let trigger: React.ReactChild = null;
+  let container: React.ReactChild = null;
+  const otherChildren: React.ReactChild[] = [];
+  React.Children.forEach(children, (child) => {
+    if (child && (child as ReactElement).type === DropdownTrigger) {
+      trigger = child;
+    } else if (child && (child as ReactElement).type === DropdownContainer) {
+      container = child;
+    } else {
+      otherChildren.push(child);
+    }
+  });
+  return { trigger, container, otherChildren };
+};
+export const prepareSubcomponents = ({
+  children,
+  hasTriggerSubcomponent,
+  hasContainerSubcomponent,
+  trigger,
+  container,
+  otherChildren,
+}: PrepareComponentsProps) => {
+  const componentsToRender = [];
+  if (!hasTriggerSubcomponent && !hasContainerSubcomponent) {
+    componentsToRender.push(<DropdownTrigger />);
+    componentsToRender.push(<DropdownContainer>{children}</DropdownContainer>);
+  } else if (!hasTriggerSubcomponent && hasContainerSubcomponent) {
+    componentsToRender.push(<DropdownTrigger />);
+    componentsToRender.push(children);
+  } else if (hasTriggerSubcomponent && !hasContainerSubcomponent) {
+    componentsToRender.push(trigger);
+    componentsToRender.push(
+      <DropdownContainer>{otherChildren}</DropdownContainer>
+    );
+  } else {
+    componentsToRender.push(trigger);
+    componentsToRender.push(container);
+  }
+  return componentsToRender;
+};

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss CHANGED Viewed

@@ -51,7 +51,7 @@ $pb_icon_circle_sizes: (
   }
   @each $name, $size in $pb_icon_circle_sizes {
-    &[class*=_#{$name}] {
+    &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
       border-radius: $size/2;

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx CHANGED Viewed

@@ -43,7 +43,7 @@ const IconCircle = (props: IconCircleProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_icon_circle_kit', size, variant), globalProps(props), className)
+  const classes = classnames(buildCss('pb_icon_circle_kit', `size_${size}`, variant), globalProps(props), className)
   return (

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb CHANGED Viewed

@@ -14,7 +14,7 @@ module Playbook
                      default: "default"
       def classname
-        generate_classname("pb_icon_circle_kit", size, variant)
+        generate_classname("pb_icon_circle_kit", "size_#{size}", variant)
       end
     end
   end

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js CHANGED Viewed

@@ -16,7 +16,7 @@ describe("IconCircle Kit", () => {
         )
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_circle_kit_md_default")
+        expect(kit).toHaveClass("pb_icon_circle_kit_size_md_default")
     })
     test("renders icon", () => {
@@ -66,7 +66,7 @@ describe("IconCircle Kit", () => {
             />
           )
           const kit = screen.getByTestId(testId)
-          expect(kit).toHaveClass(`pb_icon_circle_kit_sm_${colorVariant}`)
+          expect(kit).toHaveClass(`pb_icon_circle_kit_size_sm_${colorVariant}`)
           cleanup()
         })
@@ -89,7 +89,7 @@ describe("IconCircle Kit", () => {
             />
           )
           const kit = screen.getByTestId(testId)
-          expect(kit).toHaveClass(`pb_icon_circle_kit_${sizeVariant}_default`)
+          expect(kit).toHaveClass(`pb_icon_circle_kit_size_${sizeVariant}_default`)
           cleanup()
         })

data/app/pb_kits/playbook/pb_list/_list_item.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 type ListItemProps = {
   aria?: { [key: string]: string },
@@ -11,7 +11,7 @@ type ListItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tabIndex?: number,
-}
+} & GlobalProps
 const ListItem = (props: ListItemProps) => {
   const {

data/app/pb_kits/playbook/pb_source/source.test.js CHANGED Viewed

@@ -52,13 +52,13 @@ test('should pass source prop', () => {
 test('should not hide icon by default', () => {
     render(<SourceDefault />)
     const kit = screen.getByTestId(testId)
-    expect(kit.querySelector('.pb_icon_circle_kit_sm_default')).toBeTruthy()
+    expect(kit.querySelector('.pb_icon_circle_kit_size_sm_default')).toBeTruthy()
 })
 test('should hide icon', () => {
     render(<SourceDefault hideIcon />)
     const kit = screen.getByTestId(testId)
-    expect(kit.querySelector('.pb_icon_circle_kit_sm_default')).toBeFalsy()
+    expect(kit.querySelector('.pb_icon_circle_kit_size_sm_default')).toBeFalsy()
 })
 test('should pass user prop', () => {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx CHANGED Viewed

@@ -7,17 +7,21 @@ import { get, isString, uniqueId } from 'lodash'
 import { globalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
-import Control from './components/Control'
-import ClearIndicator from './components/ClearIndicator'
-import IndicatorsContainer from './components/IndicatorsContainer'
-import MenuList from './components/MenuList'
-import MultiValue from './components/MultiValue'
-import Option from './components/Option'
-import Placeholder from './components/Placeholder'
-import ValueContainer from './components/ValueContainer'
+import {
+  Control,
+  ClearIndicator,
+  IndicatorsContainer,
+  MenuList,
+  MultiValue,
+  Option,
+  Placeholder,
+  ValueContainer,
+} from "./components"
+import * as kitComponents from "./components"
 import { noop, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { Noop } from '../types'
+import { GenericObject, Noop } from '../types'
 /**
  * @typedef {object} Props
@@ -29,7 +33,7 @@ import { Noop } from '../types'
 type TypeaheadProps = {
   async?: boolean,
   className?: string,
-  components?: object,
+  components?: GenericObject,
   createable?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
@@ -100,7 +104,7 @@ const Typeahead = ({
     multiKit: '',
     onCreateOption: null as null,
     plusIcon: false,
-    onMultiValueClick: (_option: SelectValueType) => { },
+    onMultiValueClick: (_option: SelectValueType): any => undefined,
     ...props,
   }
@@ -137,19 +141,23 @@ const Typeahead = ({
   const inlineClass = selectProps.inline ? 'inline' : null
   return (
-    <div
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(classes, inlineClass)}
+    <div
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(classes, inlineClass)}
     >
       <Tag
-        classNamePrefix="typeahead-kit-select"
-        error={error}
-        onChange={handleOnChange}
-        {...selectProps}
+          classNamePrefix="typeahead-kit-select"
+          error={error}
+          onChange={handleOnChange}
+          {...selectProps}
       />
     </div>
   )
 }
+Object.keys(kitComponents).forEach((k) => {
+  (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
+})
 export default Typeahead

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx CHANGED Viewed

@@ -1,10 +1,12 @@
 import React from 'react'
 import { components } from 'react-select'
-const MenuList = (props: any) => (
+const MenuList = (props: any) => {
+  return (
   <components.MenuList {...props}>
     {props.children}
+    {props.footer}
   </components.MenuList>
-)
+)}
 export default MenuList

data/app/pb_kits/playbook/pb_typeahead/components/index.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import Control from './Control'
+import ClearIndicator from './ClearIndicator'
+import IndicatorsContainer from './IndicatorsContainer'
+import MenuList from './MenuList'
+import MultiValue from './MultiValue'
+import Option from './Option'
+import Placeholder from './Placeholder'
+import ValueContainer from './ValueContainer'
+export {
+  Control,
+  ClearIndicator,
+  IndicatorsContainer,
+  MenuList,
+  MultiValue,
+  Option,
+  Placeholder,
+  ValueContainer,
+}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx ADDED Viewed

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import {
+  Button,
+} from '../..'
+import Typeahead from '../_typeahead'
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Amaranth', value: '#9F2B68' },
+  { label: 'Key Lime', value: '#DAF7A6' },
+  { label: 'Turquois', value: '#00FFD0' },
+]
+const TypeaheadCustomMenuList = (props) => {
+  const defaultColorOptions = options.slice(0, 3)
+  const [colorOptions, setColorOptions] = useState(defaultColorOptions)
+  const moreToLoad = colorOptions.length == defaultColorOptions.length
+  const loadColors = moreToLoad ? () => setColorOptions(options) : () => setColorOptions(defaultColorOptions)
+  const menuListProps = {
+    footer: (<Button
+        margin="sm"
+        onClick={loadColors}
+        text={`Load ${moreToLoad ? "More" : "Less"}`}
+             />)
+  }
+  const MenuList = (props) => (
+    <Typeahead.MenuList
+        {...menuListProps}
+        {...props}
+    />
+  )
+  return (
+    <Typeahead
+        components={{ MenuList }}
+        label="Colors"
+        options={colorOptions}
+        {...props}
+    />
+  )
+}
+export default TypeaheadCustomMenuList

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx CHANGED Viewed

@@ -46,7 +46,7 @@ const TypeaheadWithHighlight = (props) => {
       if (!inputValue.length) return text
       return text.replace(
         new RegExp(inputValue, 'gi'),
-        highlighted => `<mark>${highlighted}</mark>`
+        (highlighted) => `<mark>${highlighted}</mark>`
       )
     }
     return (

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml CHANGED Viewed

@@ -22,3 +22,4 @@ examples:
     - typeahead_createable: Createable
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
+    - typeahead_custom_menu_list: Custom MenuList

data/app/pb_kits/playbook/pb_typeahead/docs/index.js CHANGED Viewed

@@ -9,3 +9,4 @@ export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
 export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
+export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'

data/app/pb_kits/playbook/playbook-doc.js CHANGED Viewed

@@ -34,6 +34,7 @@ import * as DateYearStacked from 'pb_date_year_stacked/docs'
 import * as Detail from 'pb_detail/docs'
 import * as Dialog from 'pb_dialog/docs'
 import * as DistributionBarDocs from 'pb_distribution_bar/docs'
+import * as Dropdown from 'pb_dropdown/docs'
 import * as FileUpload from 'pb_file_upload/docs'
 import * as Filter from 'pb_filter/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
@@ -136,6 +137,7 @@ WebpackerReact.registerComponents({
   ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
+  ...Dropdown,
   ...FileUpload,
   ...Filter,
   ...FixedConfirmationToast,

data/app/pb_kits/playbook/tokens/_colors.scss CHANGED Viewed

@@ -213,7 +213,7 @@ $status_color_text: (
   warning:            darken($warning, 10%),
   error:              $error,
   info:               $info,
-  neutral:            darken($neutral, 15%),
+  neutral:            $text_lt_light,
   primary:            $primary
 );

data/dist/menu.yml CHANGED Viewed

@@ -254,6 +254,10 @@ kits:
         platforms: *web
         description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
         status: "stable"
+      - name: dropdown
+        platforms: *react_only
+        description: ""
+        status: "beta"
       - name: "multi_level_select"
         platforms: *web
         description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
@@ -460,4 +464,4 @@ kits:
       - name: "user"
         platforms: *web
         description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
-        status: "stable"
+        status: "stable"