RubyGems - playbook_ui - Versions diffs - 14.4.0.pre.alpha.stephenagreerpatch13910 → 14.4.0.pre.rc.0 - Mend

playbook_ui 14.4.0.pre.alpha.stephenagreerpatch13910 → 14.4.0.pre.rc.0

Files changed (127) hide show

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

@@ -1,6 +1,4 @@
-/*eslint-disable react/no-multi-comp */
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef, isValidElement, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
@@ -12,7 +10,6 @@ type RadioProps = {
   alignment?: string,
   checked?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
-  customChildren?: boolean,
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
@@ -32,7 +29,6 @@ const Radio = ({
   alignment,
   children,
   className,
-  customChildren = false,
   dark = false,
   disabled = false,
   error = false,
@@ -45,7 +41,7 @@ const Radio = ({
   value = 'radio_text',
   onChange = () => { void 0 },
   ...props
-}: RadioProps, ref: any) => {
+}: RadioProps ) => {
   const radioRef = useRef(null);
   const ariaProps = buildAriaProps(aria);
@@ -66,23 +62,27 @@ const Radio = ({
     className
   );
+  const isCustomChild = children && isValidElement(children) && children.type !== 'input';
   const displayRadio = (props: RadioProps & any) => {
-    if (children && customChildren == false)
-      return (children)
-    else
-    return (
-    <input
-        disabled={disabled}
-        id={id}
-        name={name}
-        onChange={onChange}
-        ref={ref}
-        text={text}
-        type="radio"
-        value={value}
-        {...props}
-    />
-  )}
+    if (isValidElement(children) && children.type === 'input') {
+      return children;
+    } else if (isCustomChild || !children) {
+      return (
+        <input
+            disabled={disabled}
+            id={id}
+            name={name}
+            onChange={onChange}
+            ref={radioRef}
+            text={text}
+            type="radio"
+            value={value}
+            {...props}
+        />
+      );
+    }
+  };
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
     if (event) {
@@ -97,7 +97,7 @@ const Radio = ({
   };
   return (
-    customChildren ? (
+    isCustomChild ? (
       <Flex
           {...ariaProps}
           {...dataProps}
@@ -114,28 +114,19 @@ const Radio = ({
           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}
-        />
+          <>{displayRadio(props)}</>
           <span className="pb_radio_button" />
         </label>
         <div id="pb-radio-children-wrapper"> {children} </div>
       </Flex>
     ) : (
-        <label
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            htmlFor={id}
-        >
+      <label
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+          htmlFor={id}
+      >
         <>{displayRadio(props)}</>
         <span className="pb_radio_button" />
         <Body
@@ -149,4 +140,4 @@ const Radio = ({
   );
 };
-export default forwardRef(Radio);
+export default forwardRef(Radio);

data/app/pb_kits/playbook/pb_radio/docs/{_radio_custom_children.jsx → _radio_children.jsx} RENAMED Viewed

@@ -17,7 +17,6 @@ const RadioChildren = (props) => {
   return (
     <div>
       <Radio
-          customChildren
           label="Select"
           marginBottom="sm"
           name="Group1"
@@ -25,14 +24,13 @@ const RadioChildren = (props) => {
           value="Select"
           {...props}
       >
-        <Select
+        <Select
             marginBottom="none"
             minWidth="xs"
             options={options}
         />
       </Radio>
       <Radio
-          customChildren
           label="Typeahead"
           marginBottom="sm"
           name="Group1"
@@ -47,7 +45,6 @@ const RadioChildren = (props) => {
         />
       </Radio>
       <Radio
-          customChildren
           defaultChecked={false}
           label="Typography"
           name="Group1"
@@ -59,4 +56,4 @@ const RadioChildren = (props) => {
     </div>
   )
 }
-export default RadioChildren
+export default RadioChildren

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

@@ -7,7 +7,6 @@ examples:
   - radio_options: With Options
   - radio_alignment: Alignment
   - radio_disabled: Disabled
-  - radio_custom_children: Custom Children
   react:
   - radio_default: Default
@@ -15,7 +14,7 @@ examples:
   - radio_error: With Error
   - radio_alignment: Alignment
   - radio_disabled: Disabled
-  - radio_custom_children: Custom Children
+  - radio_children: Children
   swift:
   - radio_default_swift: Default

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

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

data/app/pb_kits/playbook/pb_radio/radio.html.erb CHANGED Viewed

@@ -1,40 +1,18 @@
-<% if object.custom_children %>
-  <%= pb_rails("flex", props: {
+<%= content_tag(:label,
     aria: object.aria,
-    align: "center",
+    checked: object.checked,
     class: object.classname,
-    cursor: "pointer",
     data: object.data,
-    **combined_html_options
-  }) do %>
-    <%= content_tag(:label,
-      'data-pb-radio-children': 'true',
-      checked: object.checked,
-      class: object.classname,
-      id: object.id,
-      value: object.value) do %>
-      <%= input %>
-      <span class="pb_radio_button"></span>
-    <% end %>
-    <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
-  <% end %>
-<% else %>
-  <%= content_tag(:label,
-      aria: object.aria,
-      checked: object.checked,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      value: object.value,
-      **combined_html_options) do %>
+    id: object.id,
+    value: object.value,
+    **combined_html_options) do %>
-      <% if content.present? %>
-        <%= content %>
-      <% else %>
-        <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
-      <% end %>
+    <% if content.present? %>
+      <%= content %>
+    <% else %>
+      <%= radio_button_tag object.name, object.value, object.selected, object.input_options %>
+    <% end %>
-      <span class="pb_radio_button"></span>
-      <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
-  <% end %>
-<% end %>
+    <span class="pb_radio_button"></span>
+    <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
+<% end %>

data/app/pb_kits/playbook/pb_radio/radio.rb CHANGED Viewed

@@ -20,8 +20,6 @@ module Playbook
                   default: "Radio Text"
       prop :value, type: Playbook::Props::String,
                    default: "radio_text"
-      prop :custom_children, type: Playbook::Props::Boolean,
-                             default: false
       def classname
         generate_classname("pb_radio_kit") + error_class + alignment_class
@@ -36,7 +34,7 @@ module Playbook
       end
       def input
-        radio_button_tag(name, value, checked, input_options.merge(disabled: disabled || input_options[:disabled]))
+        radio_button_tag(name, value, checked, input_options.merge(disabled: disabled))
       end
     private

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

@@ -1,7 +1,5 @@
 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'
@@ -67,7 +65,6 @@ const toolbarDropdownItems = [
     },
 ]
-  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
   const handleTogglePopover = () => {
     setShowPopover(!showPopover)
@@ -95,10 +92,8 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
         <Flex className={showPopover ? "fa-flip-vertical" : ""}
             display="inline_flex"
         >
-          <Icon
-              className="svg-inline--fa"
-              customIcon={angleDown}
-              fixedWidth
+          <Icon fixedWidth
+              icon="angle-down"
               margin-left="xs"
           />
         </Flex>
@@ -130,10 +125,8 @@ const popoverReference = (
             <Flex className={showPopover ? "fa-flip-vertical" : ""}
                 display="inline_flex"
             >
-              <Icon
-                  className="svg-inline--fa"
-                  customIcon={angleDown}
-                  fixedWidth
+              <Icon fixedWidth
+                  icon="angle-down"
                   margin-left="xs"
               />
             </Flex>
@@ -176,4 +169,4 @@ const popoverReference = (
   )
 }
-export default ToolbarDropdown
+export default ToolbarDropdown

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

@@ -4,7 +4,6 @@ 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'
@@ -91,8 +90,6 @@ 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
@@ -137,9 +134,9 @@ const Select = ({
         {selectBody}
         { multiple !== true ?
           <Icon
-              className="pb_select_kit_caret svg-inline--fa"
-              customIcon={angleDown}
+              className="pb_select_kit_caret"
               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: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
+      <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
     <% end %>
   </label>
 <% end %>

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

@@ -84,10 +84,6 @@ 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_textarea/_textarea.tsx CHANGED Viewed

@@ -92,6 +92,7 @@ const Textarea = ({
       <Caption text={label} />
       {children || (
         <textarea
+            className="pb_textarea_kit"
             disabled={disabled}
             name={name}
             onChange={onChange}

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb CHANGED Viewed

@@ -15,6 +15,7 @@
     <%= text_area(
         :object,
         :method,
+        :class => "#{object.classname}",
         :max_characters => object.max_characters,
         :name => object.name,
         :onkeyup => object.onkeyup,

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,8 +16,6 @@ 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 },
@@ -55,7 +53,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,
@@ -63,6 +61,7 @@ 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 } = {},  },
@@ -96,7 +95,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     placement: preferredPlacement
   })
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -149,16 +148,13 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
               },
             })}
         >
-          <Flex
+          <Flex
               align="center"
               gap="xs"
           >
             {icon && (
-            <i className={`pb_icon_kit`}>
-              <Icon
-                  icon={icon}
-              />
-            </i>)}
+            <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
+            )}
             {text}
           </Flex>
           <div

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

@@ -68,6 +68,7 @@
     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

@@ -118,23 +118,6 @@ test('typeahead textinput has mb_sm class by default', () => {
   )
   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={{ testid: 'pills-color-test' }}
-        defaultValue={[options[0]]}
-        isMulti
-        options={options}
-        pillColor="neutral"
-    />
-  )
-  const kit = screen.getByTestId('pills-color-test')
-  const pill = kit.querySelector(".pb_form_pill_kit_neutral")
-  expect(pill).toBeInTheDocument()
+  expect(textInput).toHaveClass("mb_sm")
 })

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

@@ -46,14 +46,12 @@ type TypeaheadProps = {
   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
 export type SelectValueType = {
   label: string,
   value: string,
   imageUrl?: string,
-  pillColor?: string,
 }
 type TagOnChangeValues = {
@@ -80,13 +78,17 @@ const Typeahead = ({
   id,
   loadOptions = noop,
   marginBottom = "sm",
-  pillColor,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
     cacheOptions: true,
     components: {
-      Control,
+      Control: (controlProps: any) => (
+        <Control
+            {...controlProps}
+            marginBottom={marginBottom}
+        />
+      ),
       ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null as null,
@@ -110,7 +112,6 @@ const Typeahead = ({
     onCreateOption: null as null,
     plusIcon: false,
     onMultiValueClick: (_option: SelectValueType): any => undefined,
-    pillColor: pillColor,
     ...props,
   }
@@ -140,7 +141,6 @@ 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

@@ -6,24 +6,30 @@ import TextInput from '../../pb_text_input/_text_input'
 type Props = {
   selectProps: any,
+  marginBottom?: string,
 }
-const TypeaheadControl = (props: Props) => (
-  <div className="pb_typeahead_wrapper">
-    <TextInput
-        dark={props.selectProps.dark}
-        error={props.selectProps.error}
-        label={props.selectProps.label}
-        marginBottom="none"
-    >
-      <Flex>
-        <components.Control
-            className="text_input"
-            {...props}
-        />
-      </Flex>
-    </TextInput>
-  </div>
-)
+const TypeaheadControl = (props: Props) => {
+  const { selectProps, marginBottom } = props
+  const { dark, error, label } = selectProps
+  return (
+    <div className="pb_typeahead_wrapper">
+      <TextInput
+          dark={dark}
+          error={error}
+          label={label}
+          marginBottom={marginBottom}
+      >
+        <Flex>
+          <components.Control
+              className="text_input"
+              {...props}
+          />
+        </Flex>
+      </TextInput>
+    </div>
+  )
+}
 export default TypeaheadControl

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

@@ -8,7 +8,6 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
   multiValueTemplate: any,
-  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",
   removeProps: any,
   selectProps: any,
 }
@@ -16,55 +15,48 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor } = props.selectProps
+  const { multiKit } = props.selectProps
   const formPillProps = {
     marginRight: 'xs',
     name: label,
     avatarUrl: '',
-    dark,
   }
   if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
   return (
     <components.MultiValueContainer
-        className="text_input_multivalue_container"
-        {...props}
+      className="text_input_multivalue_container"
+      {...props}
     >
       {multiKit === 'badge' &&
         <Badge
-            closeProps={removeProps}
-            removeIcon
-            text={label}
-            variant="primary"
+          closeProps={removeProps}
+          removeIcon
+          text={label}
+          variant="primary"
         />
       }
       {multiKit !== 'badge' && imageUrl &&
         <FormPill
-            avatarUrl={imageUrl}
-            closeProps={removeProps}
-            color={pillColor}
-            dark={dark}
-            marginRight="xs"
-            name={label}
-            size={multiKit === 'smallPill' ? 'small' : ''}
-            text=''
-            {...props}
+          avatarUrl={imageUrl}
+          closeProps={removeProps}
+          marginRight="xs"
+          name={label}
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text=''
         />
       }
       {multiKit !== 'badge' && !imageUrl &&
         <FormPill
-            closeProps={removeProps}
-            color={pillColor}
-            dark={dark}
-            marginRight="xs"
-            name=''
-            size={multiKit === 'smallPill' ? 'small' : ''}
-            text={label}
-            {...props}
+          closeProps={removeProps}
+          marginRight="xs"
+          name=''
+          size={multiKit === 'smallPill' ? 'small' : ''}
+          text={label}
         />
       }
     </components.MultiValueContainer>