RubyGems - playbook_ui - Versions diffs - 14.4.0 → 14.5.0.pre.alpha.PBNTR374multilevelselectPOC3946 - Mend

playbook_ui 14.4.0 → 14.5.0.pre.alpha.PBNTR374multilevelselectPOC3946

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 (99) hide show

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

@@ -1,28 +1,30 @@
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+/*eslint-disable react/no-multi-comp */
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useRef } from 'react'
 import Body from '../pb_body/_body'
+import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 type RadioProps = {
-  aria?: {[key: string]: string},
+  aria?: { [key: string]: string },
   alignment?: string,
   checked?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
+  customChildren?: boolean,
   className?: string,
   dark?: boolean,
-  data?: {[key: string]: string},
+  data?: { [key: string]: string },
   disabled?: boolean,
   error?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
   id?: string,
   label: string,
   name?: string,
   value?: string,
   text?: string,
-  onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
+  onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
 } & GlobalProps
 const Radio = ({
@@ -30,10 +32,11 @@ const Radio = ({
   alignment,
   children,
   className,
+  customChildren = false,
   dark = false,
-  data = {},
   disabled = false,
   error = false,
+  data = {},
   htmlOptions = {},
   id,
   label,
@@ -43,17 +46,28 @@ const Radio = ({
   onChange = () => { void 0 },
   ...props
 }: RadioProps, ref: any) => {
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  const radioRef = useRef(null);
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
-    buildCss('pb_radio_kit', alignment ),
-    dark ? 'dark': null, error ? 'error': null,
+    buildCss('pb_radio_kit', alignment),
+    dark ? 'dark' : null,
+    error ? 'error' : null,
     globalProps(props),
-    className)
+    className
+  );
+  const classesCustom = classnames(
+    dark ? 'dark' : null,
+    error ? 'error' : null,
+    globalProps(props),
+    className
+  );
   const displayRadio = (props: RadioProps & any) => {
-    if (children)
+    if (children && customChildren == false)
       return (children)
     else
     return (
@@ -70,24 +84,69 @@ const Radio = ({
     />
   )}
+  const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
+    if (event) {
+      const target = event.target as HTMLElement;
+      if (
+        target.id === 'pb-radio-children-wrapper' ||
+        target.closest('#pb-radio-children-wrapper')
+      ) {
+        radioRef.current?.click();
+      }
+    }
+  };
   return (
-    <label
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        htmlFor={id}
-    >
-    <>{displayRadio(props)}</>
-    <span className="pb_radio_button" />
-    <Body
-        dark={dark}
-        status={error ? 'negative' : null}
-        text={label}
-        variant={null}
-    />
-    </label>
-  )
-}
+    customChildren ? (
+      <Flex
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          align='center'
+          className={classesCustom}
+          cursor='pointer'
+          htmlFor={id}
+          htmlOptions={{
+            onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+              handleContainerClick(event);
+            }) as unknown as () => void
+          }}
+          id="radio-container"
+      >
+        <label className={buildCss('pb_radio_kit', alignment)}>
+        <input
+            disabled={disabled}
+            id={id}
+            name={name}
+            onChange={onChange}
+            ref={radioRef}
+            type="radio"
+            value={value}
+            {...props}
+        />
+          <span className="pb_radio_button" />
+        </label>
+        <div id="pb-radio-children-wrapper"> {children} </div>
+      </Flex>
+    ) : (
+        <label
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            htmlFor={id}
+        >
+        <>{displayRadio(props)}</>
+        <span className="pb_radio_button" />
+        <Body
+            dark={dark}
+            status={error ? 'negative' : null}
+            text={label}
+            variant={null}
+        />
+      </label>
+    )
+  );
+};
-export default forwardRef(Radio)
+export default forwardRef(Radio);

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb CHANGED Viewed

@@ -10,6 +10,7 @@
 <%= pb_rails("radio", props: {
   custom_children: true,
   label: "Select",
+  margin_bottom: "sm",
   name: "Group1",
   value: "Select",
 }) do %>
@@ -22,6 +23,7 @@
 <%= pb_rails("radio", props: {
   custom_children: true,
   label: "Typeahead",
+  margin_bottom: "sm",
   name: "Group1",
   value: "Typeahead",
 }) do %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx ADDED Viewed

@@ -0,0 +1,62 @@
+import React from 'react'
+import Radio from '../_radio'
+import Select from '../../pb_select/_select'
+import Typeahead from '../../pb_typeahead/_typeahead'
+import Title from '../../pb_title/_title'
+const RadioChildren = (props) => {
+  const options = [
+    { label: 'Orange', value: 'Orange' },
+    { label: 'Red', value: 'Red' },
+    { label: 'Green', value: 'Green' },
+    { label: 'Blue', value: 'Blue' },
+  ]
+  return (
+    <div>
+      <Radio
+          customChildren
+          label="Select"
+          marginBottom="sm"
+          name="Group1"
+          tabIndex={0}
+          value="Select"
+          {...props}
+      >
+        <Select
+            marginBottom="none"
+            minWidth="xs"
+            options={options}
+        />
+      </Radio>
+      <Radio
+          customChildren
+          label="Typeahead"
+          marginBottom="sm"
+          name="Group1"
+          tabIndex={0}
+          value="Typeahead"
+          {...props}
+      >
+        <Typeahead
+            marginBottom="none"
+            minWidth="xs"
+            options={options}
+        />
+      </Radio>
+      <Radio
+          customChildren
+          defaultChecked={false}
+          label="Typography"
+          name="Group1"
+          value="Typography"
+          {...props}
+      >
+        <Title text="Custom Typography" />
+      </Radio>
+    </div>
+  )
+}
+export default RadioChildren

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

@@ -15,6 +15,7 @@ examples:
   - radio_error: With Error
   - radio_alignment: Alignment
   - radio_disabled: Disabled
+  - radio_custom_children: Custom Children
   swift:
   - radio_default_swift: Default

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

@@ -3,3 +3,4 @@ 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'
+export { default as RadioCustomChildren } from './_radio_custom_children.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx CHANGED Viewed

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
+import { getAllIcons } from "../../utilities/icons/allicons"
 import Flex from '../../pb_flex/_flex'
 import PbReactPopover from '../../pb_popover/_popover'
 import Button from '../../pb_button/_button'
@@ -65,6 +67,7 @@ const toolbarDropdownItems = [
     },
 ]
+  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
   const handleTogglePopover = () => {
     setShowPopover(!showPopover)
@@ -92,8 +95,10 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
         <Flex className={showPopover ? "fa-flip-vertical" : ""}
             display="inline_flex"
         >
-          <Icon fixedWidth
-              icon="angle-down"
+          <Icon
+              className="svg-inline--fa"
+              customIcon={angleDown}
+              fixedWidth
               margin-left="xs"
           />
         </Flex>
@@ -125,8 +130,10 @@ const popoverReference = (
             <Flex className={showPopover ? "fa-flip-vertical" : ""}
                 display="inline_flex"
             >
-              <Icon fixedWidth
-                  icon="angle-down"
+              <Icon
+                  className="svg-inline--fa"
+                  customIcon={angleDown}
+                  fixedWidth
                   margin-left="xs"
               />
             </Flex>
@@ -169,4 +176,4 @@ const popoverReference = (
   )
 }
-export default ToolbarDropdown
+export default ToolbarDropdown

data/app/pb_kits/playbook/pb_select/_select.tsx CHANGED Viewed

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
+import { getAllIcons } from "../utilities/icons/allicons"
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -90,6 +91,8 @@ const Select = ({
     compactClass
   );
+  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{
     if (children) return children
@@ -134,9 +137,9 @@ const Select = ({
         {selectBody}
         { multiple !== true ?
           <Icon
-              className="pb_select_kit_caret"
+              className="pb_select_kit_caret svg-inline--fa"
+              customIcon={angleDown}
               fixedWidth
-              icon="angle-down"
           />
           :
           null

data/app/pb_kits/playbook/pb_select/select.html.erb CHANGED Viewed

@@ -26,7 +26,7 @@
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% end %>
     <% if object.multiple != true %>
-      <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
+      <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
     <% end %>
   </label>
 <% end %>

data/app/pb_kits/playbook/pb_select/select.rb CHANGED Viewed

@@ -84,6 +84,10 @@ module Playbook
         end
       end
+      def angle_down_path
+        "app/pb_kits/playbook/utilities/icons/angle-down.svg"
+      end
     private
       def error_class

data/app/pb_kits/playbook/pb_text_input/_text_input.scss CHANGED Viewed

@@ -45,7 +45,6 @@
       }
     }
     .text_input_wrapper {
-      margin-bottom: 1rem;
       input::placeholder,
       .text_input .placeholder {
         @include pb_body_light_dark;

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

@@ -1,14 +1,14 @@
 import React, { useRef, useState, forwardRef, ForwardedRef } from "react"
 import {
-  arrow,
-  flip,
-  offset,
-  Placement,
-  safePolygon,
+  arrow,
+  flip,
+  offset,
+  Placement,
+  safePolygon,
   shift,
-  useFloating,
-  useHover,
+  useFloating,
+  useHover,
   useInteractions,
 } from "@floating-ui/react"
@@ -16,6 +16,8 @@ import classnames from "classnames"
 import { GlobalProps, globalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
+import { getAllIcons } from "../utilities/icons/allicons"
+import Icon from '../pb_icon/_icon'
 type TooltipProps = {
   aria?: { [key: string]: string },
@@ -53,7 +55,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
   const dataProps: { [key: string]: string } = buildDataProps(data)
   const ariaProps: { [key: string]: string } = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
     globalProps({...rest}),
     className,
@@ -61,7 +63,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
   const {
     context,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
@@ -95,7 +96,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     placement: preferredPlacement
   })
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -148,13 +149,16 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
               },
             })}
         >
-          <Flex
+          <Flex
               align="center"
               gap="xs"
           >
             {icon && (
-            <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
-            )}
+            <i className={`pb_icon_kit`}>
+              <Icon
+                  icon={icon}
+              />
+            </i>)}
             {text}
           </Flex>
           <div

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

@@ -68,7 +68,6 @@
     opacity: 0;
   }
   [class^=pb_list_kit] {
-    margin-top: -$space-sm;
     li {
       transition: background-color .25s ease-in-out;
     }

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx CHANGED Viewed

@@ -109,6 +109,20 @@ test('should pass className prop', () => {
   expect(kit).toHaveClass(className)
 })
+test('typeahead textinput has mb_sm class by default', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'default-mb-test' }}
+        options={options}
+    />
+  )
+  const kit = screen.getByTestId('default-mb-test')
+  expect(kit).toHaveClass("pb_typeahead_kit mb_sm")
+  const textInput = kit.querySelector(".pb_text_input_kit")
+  expect(textInput).toHaveClass("mb_none")
+})
 test('typeahead with colored pills', () => {
   render(
     <Typeahead

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

@@ -45,6 +45,7 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
+  marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
@@ -78,6 +79,7 @@ const Typeahead = ({
   htmlOptions = {},
   id,
   loadOptions = noop,
+  marginBottom = "sm",
   pillColor,
   ...props
 }: TypeaheadProps) => {
@@ -138,6 +140,7 @@ const Typeahead = ({
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
+    `mb_${marginBottom}`,
     globalProps(props),
     className
   )

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

@@ -11,14 +11,15 @@ type Props = {
 const TypeaheadControl = (props: Props) => (
   <div className="pb_typeahead_wrapper">
     <TextInput
-      dark={props.selectProps.dark}
-      error={props.selectProps.error}
-      label={props.selectProps.label}
+        dark={props.selectProps.dark}
+        error={props.selectProps.error}
+        label={props.selectProps.label}
+        marginBottom="none"
     >
       <Flex>
         <components.Control
-          className="text_input"
-          {...props}
+            className="text_input"
+            {...props}
         />
       </Flex>
     </TextInput>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb ADDED Viewed

@@ -0,0 +1,88 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "None",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "none",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XXS",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xxs",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XS",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xs",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "Default - SM",
+    name: :foo,
+    is_multi: false,
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "MD",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "md",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "LG",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "lg",
+  })
+%>
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-default",
+    placeholder: "All Colors",
+    options: options,
+    label: "XL",
+    name: :foo,
+    is_multi: false,
+    margin_bottom: "xl",
+  })
+%>
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

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

@@ -0,0 +1,60 @@
+import React from 'react'
+import Typeahead from '../_typeahead'
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+const TypeaheadMarginBottom = (props) => {
+  return (
+    <>
+      <Typeahead
+          label="None"
+          marginBottom="none"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XXS"
+          marginBottom="xxs"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XS"
+          marginBottom="xs"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="Default - SM"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="MD"
+          marginBottom="md"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="LG"
+          marginBottom="lg"
+          options={options}
+          {...props}
+      />
+      <Typeahead
+          label="XL"
+          marginBottom="xl"
+          options={options}
+          {...props}
+      />
+    </>
+  )
+}
+export default TypeaheadMarginBottom