playbook_ui 13.15.0.pre.alpha.play1141iconkitusinglibrary1956 → 13.15.0.pre.alpha.play10841940

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx

@@ -18,7 +18,7 @@ type ProgressSimpleProps = {
   width: string,
 }
 
-const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
+const ProgressSimple = (props: ProgressSimpleProps) => {
   const {
     align,
     className,
@@ -57,9 +57,9 @@ const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
 
   return (
     <div 
-        {...dataProps}
-        {...htmlProps}
-        className={wrapperClass}
+      {...dataProps}
+      {...htmlProps}
+      className={wrapperClass}
     >
       <div
           className={kitClass}

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

@@ -7,7 +7,7 @@ import Tooltip from "../../pb_tooltip/_tooltip";
 
 type EditorButtonProps = {
   classname?: string,
-  onclick?: () => undefined | void,
+  onclick?: () => {} | void,
   icon?: string;
   text?: string;
   disable?: boolean
@@ -19,31 +19,29 @@ const EditorButton = ({
   onclick,
   icon,
   text,
-}: EditorButtonProps): React.ReactElement => {
+}: EditorButtonProps) => {
   return (
-    <Tooltip
-        delay={{
+    <Tooltip 
+      delay={{
         open: 2000
       }}
-        interaction
-        placement="top"
-        text={text}
+      interaction 
+      placement="top" 
+      text={text}
     >
       <button
-          className={classname}
-          disabled={disable}
-          onClick={onclick}
-          role="button"
-          type="button"
+        className={classname}
+        disabled={disable}
+        onClick={onclick}
+        role="button"
+        type="button"
       >
-        <Flex
-            align="center"
-            className="toolbar_button_icon"
-            justify="center"
+        <Flex 
+          align="center"
+          className="toolbar_button_icon"
+          justify="center"
         >
-          <Icon icon={icon}
-              size="lg"
-          />
+          <Icon icon={icon} size="lg" />
         </Flex>
       </button>
     </Tooltip>

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts

@@ -3,7 +3,7 @@ export type ToolbarTypes = {
     icon?: string,
     isActive?: string | null,
     text?: string,
-    onclick?: () => undefined
+    onclick?: () => {}
     classname?: string
     disable?: boolean
 }

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

@@ -20,19 +20,17 @@ const MoreExtensionsDropdown = ({extensions}: any) => {
 
 const popoverReference = (
     <button
-        className="toolbar_button"
-        onClick={handleTogglePopover}
-        role="button"
-        type="button"
+      className="toolbar_button"
+      onClick={handleTogglePopover}
+      role="button"
+      type="button"
     >
     <Flex 
-        align="center"
-        className="toolbar_button_icon"
-        justify="center"
+      align="center"
+      className="toolbar_button_icon"
+      justify="center"
     >
-      <Icon icon="ellipsis"
-          size="lg"
-      />
+      <Icon icon="ellipsis" size="lg" />
     </Flex>
   </button>
 
@@ -48,21 +46,21 @@ const popoverReference = (
           show={showPopover}
       >
         <Nav 
-            paddingBottom={extensions.length > 1 ? "xs" : "none"}
-            paddingTop={extensions.length > 1 ? "xs" : "none"} 
-            variant="subtle"
+          paddingTop={extensions.length > 1 ? "xs" : "none"}
+          paddingBottom={extensions.length > 1 ? "xs" : "none"} 
+          variant="subtle"
         >
-          {extensions && extensions.map(({ icon, text, onclick, isActive}: any, index: number) => ( 
+          {extensions && extensions.map(({ icon, text, onclick, isActive}:any, 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/Toolbar.tsx

@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
 import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
-const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
+const EditorToolbar = ({ editor, extensions }:any) => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -34,27 +34,19 @@ const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
   ]
 
   return (
-    <Background backgroundColor="white"
-        className="toolbar"
-    >
-      <Flex flex="0"
-          justify="between"
-          paddingX="sm"
-          paddingY="xxs"
-      >
-        <FlexItem className="toolbar_block"
-            displayFlex
-        >
+    <Background backgroundColor="white" className="toolbar">
+      <Flex flex="0" justify="between" paddingX="sm" paddingY="xxs">
+        <FlexItem className="toolbar_block" displayFlex>
           <ToolbarDropdown editor={editor}/>
           <SectionSeparator orientation="vertical" />
             {toolbaritems && toolbaritems.map(
-              ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
+              ({ icon, text, classname, onclick}:ToolbarTypes, index:number) => (
                 <EditorButton
-                    classname={classname}
-                    icon={icon}
-                    key={index}
-                    onclick={onclick}
-                    text={text}
+                  classname={classname}
+                  icon={icon}
+                  key={index}
+                  text={text}
+                  onclick={onclick}
                 />
               )
             )}

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,29 +102,20 @@
     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,7 +36,6 @@ type SelectProps = {
   onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
-  showArrow?: boolean,
   value?: string,
 } & GlobalProps
 
@@ -64,10 +63,9 @@ const Select = ({
   inline = false,
   multiple = false,
   name,
-  onChange = () => undefined,
+  onChange = () => {},
   options = [],
   required = false,
-  showArrow = false,
   value,
   ...props
 }: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
@@ -79,16 +77,15 @@ 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/example.yml

@@ -10,7 +10,6 @@ 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
@@ -27,7 +26,6 @@ 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,6 +7,5 @@ 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,11 +19,10 @@ 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 + show_arrow_class
+        classname + inline_class + compact_class
       end
 
       def all_attributes
@@ -50,10 +49,6 @@ 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