playbook_ui 13.15.0.pre.alpha.PLAY10851907 → 13.15.0.pre.alpha.PLAY11311893

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

@@ -9,7 +9,7 @@ import NavItem from '../../pb_nav/_item'
 
 import { ToolbarTypes } from './EditorTypes'
 
-const ToolbarDropdown = ({editor}: any): React.ReactElement => {
+const ToolbarDropdown = ({editor}: any) => {
   const [showPopover, setShowPopover] = useState(false)
 
 const toolbarDropdownItems = [
@@ -81,21 +81,11 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
   if (isActive) {
     activeCount ++
     activeItems.push(
-      <Flex align="center"
-          gap="xs"
-          key={icon}
-      >
-        <Icon icon={icon}
-            size="lg"
-        />
+      <Flex align="center" key={icon} gap="xs">
+        <Icon icon={icon} size="lg" />
         <div>{text}</div>
-        <Flex className={showPopover ? "fa-flip-vertical" : ""}
-            display="inline_flex"
-        >
-          <Icon fixedWidth
-              icon="angle-down"
-              margin-left="xs"
-          />
+        <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
+          <Icon fixedWidth icon="angle-down" margin-left="xs" />
         </Flex>
       </Flex>
     );
@@ -103,10 +93,7 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
 }
 
 const popoverReference = (
-  <Button className="editor-dropdown-button"
-      onClick={handleTogglePopover}
-      variant="secondary"
-  >
+  <Button className="editor-dropdown-button" onClick={handleTogglePopover} variant="secondary">
     {
        activeCount === 2 ? (
         activeItems[1]
@@ -114,21 +101,11 @@ const popoverReference = (
         activeCount === 1 ? (
         activeItems[0] || null
         ) : (
-          <Flex align="center"
-              gap="xs"
-              key="paragraph"
-          >
-            <Icon icon="paragraph"
-                size="lg"
-            />
+          <Flex align="center" key="paragraph" gap="xs">
+            <Icon icon="paragraph" size="lg" />
             <div>Paragraph</div>
-            <Flex className={showPopover ? "fa-flip-vertical" : ""}
-                display="inline_flex"
-            >
-              <Icon fixedWidth
-                  icon="angle-down"
-                  margin-left="xs"
-              />
+            <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
+              <Icon fixedWidth icon="angle-down" margin-left="xs" />
             </Flex>
           </Flex>
         )
@@ -147,21 +124,21 @@ const popoverReference = (
           show={showPopover}
       >
         <Nav 
-            paddingBottom="xs"
-            paddingTop="xs" 
-            variant="subtle"
+          paddingTop="xs"
+          paddingBottom="xs" 
+          variant="subtle"
         >
-          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}: ToolbarTypes, index: number) => (
+          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
             <NavItem
-                className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
-                cursor="pointer"
-                iconLeft={icon}
-                key={`${text}_${index}`}
-                margin='none'
-                onClick={()=> {onclick(); setShowPopover(false)}}
-                paddingBottom='xxs'
-                paddingTop='xxs'
-                text={text}
+              cursor="pointer"
+              className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
+              iconLeft={icon}
+              key={`${text}_${index}`}
+              margin='none'
+              onClick={()=> {onclick(); setShowPopover(false)}}
+              text={text}
+              paddingTop='xxs'
+              paddingBottom='xxs'
             />
           ))}
         </Nav>

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx

@@ -3,7 +3,7 @@ import FlexItem from "../../pb_flex/_flex_item";
 import EditorButton from "./EditorButton";
 import { ToolbarTypes } from "./EditorTypes";
 
-const ToolbarHistoryItems = ({editor}: any): React.ReactElement => {
+const ToolbarHistoryItems = ({editor}:any) => {
 
 const toolbarHistoryItems = [
     {
@@ -26,14 +26,14 @@ const toolbarHistoryItems = [
     <>
     <FlexItem displayFlex>
           {toolbarHistoryItems.map(
-            ({ onclick, classname, disable, icon, text }: ToolbarTypes, index: number) => (
+            ({ onclick, classname, disable, icon, text }:ToolbarTypes, index:number) => (
               <EditorButton
-                  classname={classname}
-                  disable={disable}
-                  icon={icon}
-                  key={index}
-                  onclick={onclick}
-                  text={text}
+                classname={classname}
+                onclick={onclick}
+                disable={disable}
+                icon={icon}
+                key={index}
+                text={text}
               />
             )
           )}

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx

@@ -2,7 +2,7 @@ import React, {useCallback} from "react";
 import EditorButton from "./EditorButton";
 import { ToolbarTypes } from "./EditorTypes";
 
-const ToolbarNodes = ({editor}: any): React.ReactElement => {
+const ToolbarNodes = ({editor}:any) => {
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
 const setLink = useCallback(() => {
@@ -42,13 +42,13 @@ const toolbarNodesItems = [
 
 return (
     <>
-        {toolbarNodesItems.map(({ onclick, icon, text, isActive }: ToolbarTypes, index: number) => (
+        {toolbarNodesItems.map(({ onclick, icon, text, isActive }:ToolbarTypes, index:number) => (
             <EditorButton
-                classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
-                icon={icon}
-                key={index}
-                onclick={onclick}
-                text={text}
+            classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
+            onclick={onclick}
+            icon={icon}
+            key={index}
+            text={text}
             />
         ))}
    </>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -17,27 +17,27 @@ import { TrixEditor } from "react-trix"
 import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {
-  attributeIsActive?: ([any]: string) => boolean,
+  attributeIsActive?: Function,
   element?: HTMLElement,
-  getSelectedDocument?: () => any,
+  getSelectedDocument?: Function,
   getSelectedRange?: () => Array<number>,
-  insertHTML?: ([any]: string) => void,
-  loadHTML?: ([any]: string) => void,
-  setSelectedRange?: (range: Array<number>) => void,
+  insertHTML?: Function,
+  loadHTML?: Function,
+  setSelectedRange?: (range: Array<number>) => void,  
 }
 
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
-  toolbarBottom?: boolean,
+  toolbarBottom?: Boolean,
   children?: React.ReactNode | React.ReactNode[]
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  inline?: boolean,
+  inline?: boolean, 
   extensions?: { [key: string]: string }[],
   name?: string,
   onChange: (html: string, text: string) => void,
@@ -49,7 +49,7 @@ type RichTextEditorProps = {
   maxWidth?: string
 } & GlobalProps
 
-const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
+const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
     advancedEditor,
@@ -81,6 +81,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
     element = editor?.element
 
+
   // DOM manipulation must wait for editor to be ready
   if (editor) {
     const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
@@ -116,7 +117,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     focus
       ? (document.addEventListener('trix-focus', useFocus),
         document.addEventListener('trix-blur', useFocus),
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useFocus())
       : null
 
@@ -164,10 +164,10 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={css}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={css}
     >
       {
         advancedEditor ? (
@@ -175,11 +175,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
               className={classnames("pb_rich_text_editor_advanced_container", { 
               ["toolbar-active"]: advancedEditorToolbar,
               })}
-          >
+            >
             {advancedEditorToolbar && (
-              <EditorToolbar editor={advancedEditor}
-                  extensions={extensions}
-              />
+              <EditorToolbar extensions={extensions} editor={advancedEditor}/>
             )}
           { children }
           </div>

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -20,7 +20,7 @@ type SectionSeparatorProps = {
   variant?: "card" | "background",
 }
 
-const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
+const SectionSeparator = (props: SectionSeparatorProps) => {
   const {
     aria = {},
     children,
@@ -42,19 +42,17 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   return (
 
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       {
         children && children ||
         text && (
           <span>
-            <Caption dark={dark}
-                text={text}
-            />
+            <Caption text={text} dark={dark} />
           </span>
         )
       }

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -102,20 +102,29 @@
     pointer-events: none;
   }
   &.inline {
+    @mixin active_arrow_style {
+      svg {
+        color: $primary !important;
+        font-size: 16px;
+      }
+    }
     &:not(:hover) {
       svg {
         display: none;
       }
     }
+    &.show_arrow:not(:hover) {
+      svg {
+        display: block;
+      }
+      @include active_arrow_style();
+    }
     &:hover {
+      @include active_arrow_style();
       select {
         color: $primary !important;
         background: rgba(0,130,255,0.1);
       }
-      svg {
-        color: $primary !important;
-        font-size: 16px;
-      }
     }
     select {
       box-shadow: none;

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

@@ -36,6 +36,7 @@ type SelectProps = {
   onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
+  showArrow?: boolean,
   value?: string,
 } & GlobalProps
 
@@ -66,6 +67,7 @@ const Select = ({
   onChange = () => undefined,
   options = [],
   required = false,
+  showArrow = false,
   value,
   ...props
 }: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
@@ -77,15 +79,16 @@ const Select = ({
   const inlineClass = inline ? 'inline' : null
   const compactClass = compact ? 'compact' : null
   const classes = classnames(
-    buildCss('pb_select'),
+    buildCss("pb_select"),
     globalProps({
       ...props,
-      marginBottom: props.marginBottom || props.margin || 'sm',
+      marginBottom: props.marginBottom || props.margin || "sm",
     }),
     className,
     inlineClass,
+    { show_arrow: showArrow },
     compactClass
-  )
+  );
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("select", props: {
+  label: "Favorite Food",
+  name: "food",
+  inline: true,
+  options: [
+    {
+      value: "1",
+      value_text: "Burgers",
+    },
+    {
+      value: "2",
+      value_text: "Pizza",
+    },
+    {
+      value: "3",
+      value_text: "Tacos",
+    },
+    {
+      value: "4",
+      value_text: "BBQ",
+    },
+  ],
+  show_arrow: true
+}) %>

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Body, Select } from '../..'
+
+const SelectInlineShowArrow = (props) => {
+  const options = [
+    {
+      value: '1',
+      text: 'Burgers',
+    },
+    {
+      value: '2',
+      text: 'Pizza',
+    },
+    {
+      value: '3',
+      text: 'Tacos',
+    },
+  ]
+
+  return (
+    <div>
+      <Select
+          inline
+          label="Favorite Food"
+          name="food"
+          options={options}
+          showArrow
+          {...props}
+      />
+      <Body
+          status="negative"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectInlineShowArrow

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

@@ -10,6 +10,7 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
+  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
@@ -26,6 +27,7 @@ examples:
   - select_custom_select: Custom Select
   - select_error: Select w/ Error
   - select_inline: Select Inline
+  - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
 

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

@@ -7,5 +7,6 @@ export { default as SelectCustomSelect } from './_select_custom_select.jsx'
 export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
 export { default as SelectError } from './_select_error.jsx'
 export { default as SelectInline } from './_select_inline.jsx'
+export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'

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

@@ -19,10 +19,11 @@ module Playbook
       prop :name
       prop :onchange
       prop :options, type: Playbook::Props::HashArray, required: false, default: []
+      prop :show_arrow, type: Playbook::Props::Boolean, default: false
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classnames
-        classname + inline_class + compact_class
+        classname + inline_class + compact_class + show_arrow_class
       end
 
       def all_attributes
@@ -49,6 +50,10 @@ module Playbook
         compact ? "compact" : ""
       end
 
+      def show_arrow_class
+        show_arrow ? "show_arrow" : ""
+      end
+
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       end

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx

@@ -33,7 +33,7 @@ type SelectableCardIconProps = {
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
 }
 
-const SelectableCardIcon = (props: SelectableCardIconProps): React.ReactElement => {
+const SelectableCardIcon = (props: SelectableCardIconProps) => {
   const {
     aria = {},
     checkmark = false,
@@ -70,37 +70,36 @@ const SelectableCardIcon = (props: SelectableCardIconProps): React.ReactElement
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
     >
       <SelectableCard
-          checked={checked}
-          customIcon={customIcon}
-          dark={dark}
-          disabled={disabled}
-          icon={checkmark}
-          inputId={inputId}
-          multi={multi}
-          name={name}
-          onChange={onChange}
-          value={value}
+        checked={checked}
+        customIcon={customIcon}
+        dark={dark}
+        disabled={disabled}
+        icon={checkmark}
+        inputId={inputId}
+        multi={multi}
+        name={name}
+        onChange={onChange}
+        value={value}
       >
         {
           <>
             <SelectableIcon
-                customIcon={customIcon}
-                icon={icon}
-                inputId={''}
-                inputs="disabled"
-                name={''}
-                text={titleText}
-            />
+              customIcon={customIcon}
+              icon={icon}
+              inputId={''}
+              inputs="disabled"
+              name={''}
+              text={titleText} />
             <Body
-                color="light"
-                dark={dark}
-                text={bodyText}
+              color="light"
+              dark={dark}
+              text={bodyText}
             />
           </>
         }

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx

@@ -6,11 +6,10 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
-  buildHtmlProps
+  buildHtmlProps 
 } from '../utilities/props'
 import Icon from '../pb_icon/_icon'
 import Title from '../pb_title/_title'
-import { GenericObject } from '../types'
 
 type SelectableIconProps = {
   aria?: {[key: string]: string},
@@ -18,7 +17,7 @@ type SelectableIconProps = {
   className?: string,
   customIcon?: {[key: string] :SVGElement},
   disabled?: boolean,
-  data?: GenericObject,
+  data?: Object,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon: string,
   inputId: string,
@@ -45,7 +44,7 @@ const SelectableIcon = ({
   text,
   value,
   ...props
-}: SelectableIconProps): React.ReactElement => {
+}: SelectableIconProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -65,22 +64,22 @@ const SelectableIcon = ({
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
     >
       {inputs === 'disabled' && (
         <>
           <Icon
-              customIcon={customIcon}
-              icon={icon}
-              size="2x"
+            customIcon={customIcon}
+            icon={icon}
+            size="2x"
           />
           <Title
-              size={4}
-              tag="h4"
-              text={text}
+            size={4}
+            tag="h4"
+            text={text}
           />
         </>
       )}
@@ -88,24 +87,24 @@ const SelectableIcon = ({
       {inputs === 'enabled' && (
         <>
           <input
-              {...props}
-              checked={checked}
-              disabled={disabled}
-              id={inputIdPresent}
-              name={name}
-              type={inputType}
-              value={value}
+            {...props}
+            checked={checked}
+            disabled={disabled}
+            id={inputIdPresent}
+            name={name}
+            type={inputType}
+            value={value}
           />
           <label htmlFor={inputIdPresent}>
             <Icon
-                customIcon={customIcon}
-                icon={icon}
-                size="2x"
+              customIcon={customIcon}
+              icon={icon}
+              size="2x"
             />
             <Title
-                size={4}
-                tag="h4"
-                text={text}
+              size={4}
+              tag="h4"
+              text={text}
             />
           </label>
         </>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx

@@ -7,13 +7,12 @@ import { SelectableListItemProps } from './_item.js'
 
 import List from  '../pb_list/_list'
 import SelectableListItem from './_item'
-import { GenericObject } from '../types'
 
 type SelectableListProps = {
   aria?: {[key: string]: string },
   children?: React.ReactElement[],
   className?: string,
-  data?: GenericObject,
+  data?: object,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant?: 'checkbox' | 'radio',