RubyGems - playbook_ui - Versions diffs - 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.PLAY11641991 - Mend

playbook_ui 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.PLAY11641991

Files changed (54) hide show

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx CHANGED Viewed

@@ -20,6 +20,14 @@ type ProgressPillsProps = {
   value?: string,
 }
+const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
+  <div
+      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
+      }`}
+      key={step}
+  />
+)
 const showSteps = (steps: number, active: number, dark: boolean) => {
   const items = []
@@ -30,14 +38,6 @@ const showSteps = (steps: number, active: number, dark: boolean) => {
   return items
 }
-const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
-  <div
-    className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
-      }`}
-    key={step}
-  />
-)
 const ProgressPills = (props: ProgressPillsProps) => {
   const {
     active = 0,
@@ -59,24 +59,24 @@ const ProgressPills = (props: ProgressPillsProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       {title &&
         <div className="progress_pills_status">
           <Title
-            dark={dark}
-            size={4}
-            tag="h4"
-            text={title}
+              dark={dark}
+              size={4}
+              tag="h4"
+              text={title}
           />
           <Body
-            color="light"
-            dark={dark}
-            text={value}
+              color="light"
+              dark={dark}
+              text={value}
           />
         </div>}
       <div className="progress_pills">{showSteps(steps, active, dark)}</div>

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

@@ -18,7 +18,7 @@ type ProgressSimpleProps = {
   width: string,
 }
-const ProgressSimple = (props: ProgressSimpleProps) => {
+const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
   const {
     align,
     className,
@@ -57,9 +57,9 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
   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 CHANGED Viewed

@@ -7,7 +7,7 @@ import Tooltip from "../../pb_tooltip/_tooltip";
 type EditorButtonProps = {
   classname?: string,
-  onclick?: () => {} | void,
+  onclick?: () => undefined | void,
   icon?: string;
   text?: string;
   disable?: boolean
@@ -19,29 +19,31 @@ const EditorButton = ({
   onclick,
   icon,
   text,
-}: EditorButtonProps) => {
+}: EditorButtonProps): React.ReactElement => {
   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 CHANGED Viewed

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

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

@@ -20,17 +20,19 @@ 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>
@@ -46,21 +48,21 @@ const popoverReference = (
           show={showPopover}
       >
         <Nav
-          paddingTop={extensions.length > 1 ? "xs" : "none"}
-          paddingBottom={extensions.length > 1 ? "xs" : "none"}
-          variant="subtle"
+            paddingBottom={extensions.length > 1 ? "xs" : "none"}
+            paddingTop={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
-              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'
+                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}
             />
           ))}
         </Nav>

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

@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
 import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
-const EditorToolbar = ({ editor, extensions }:any) => {
+const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -34,19 +34,27 @@ const EditorToolbar = ({ editor, extensions }:any) => {
   ]
   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}
-                  text={text}
-                  onclick={onclick}
+                    classname={classname}
+                    icon={icon}
+                    key={index}
+                    onclick={onclick}
+                    text={text}
                 />
               )
             )}

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

@@ -9,7 +9,7 @@ import NavItem from '../../pb_nav/_item'
 import { ToolbarTypes } from './EditorTypes'
-const ToolbarDropdown = ({editor}: any) => {
+const ToolbarDropdown = ({editor}: any): React.ReactElement => {
   const [showPopover, setShowPopover] = useState(false)
 const toolbarDropdownItems = [
@@ -81,11 +81,21 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
   if (isActive) {
     activeCount ++
     activeItems.push(
-      <Flex align="center" key={icon} gap="xs">
-        <Icon icon={icon} size="lg" />
+      <Flex align="center"
+          gap="xs"
+          key={icon}
+      >
+        <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>
     );
@@ -93,7 +103,10 @@ 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]
@@ -101,11 +114,21 @@ const popoverReference = (
         activeCount === 1 ? (
         activeItems[0] || null
         ) : (
-          <Flex align="center" key="paragraph" gap="xs">
-            <Icon icon="paragraph" size="lg" />
+          <Flex align="center"
+              gap="xs"
+              key="paragraph"
+          >
+            <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>
         )
@@ -124,21 +147,21 @@ const popoverReference = (
           show={showPopover}
       >
         <Nav
-          paddingTop="xs"
-          paddingBottom="xs"
-          variant="subtle"
+            paddingBottom="xs"
+            paddingTop="xs"
+            variant="subtle"
         >
-          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
+          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}: ToolbarTypes, index: number) => (
             <NavItem
-              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'
+                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}
             />
           ))}
         </Nav>

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

@@ -3,7 +3,7 @@ import FlexItem from "../../pb_flex/_flex_item";
 import EditorButton from "./EditorButton";
 import { ToolbarTypes } from "./EditorTypes";
-const ToolbarHistoryItems = ({editor}:any) => {
+const ToolbarHistoryItems = ({editor}: any): React.ReactElement => {
 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}
-                onclick={onclick}
-                disable={disable}
-                icon={icon}
-                key={index}
-                text={text}
+                  classname={classname}
+                  disable={disable}
+                  icon={icon}
+                  key={index}
+                  onclick={onclick}
+                  text={text}
               />
             )
           )}

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

@@ -2,7 +2,7 @@ import React, {useCallback} from "react";
 import EditorButton from "./EditorButton";
 import { ToolbarTypes } from "./EditorTypes";
-const ToolbarNodes = ({editor}:any) => {
+const ToolbarNodes = ({editor}: any): React.ReactElement => {
 // 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' : ''}`}
-            onclick={onclick}
-            icon={icon}
-            key={index}
-            text={text}
+                classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
+                icon={icon}
+                key={index}
+                onclick={onclick}
+                text={text}
             />
         ))}
    </>

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

@@ -17,27 +17,27 @@ import { TrixEditor } from "react-trix"
 import EditorToolbar from './TipTap/Toolbar'
 type Editor = {
-  attributeIsActive?: Function,
+  attributeIsActive?: ([any]: string) => boolean,
   element?: HTMLElement,
-  getSelectedDocument?: Function,
+  getSelectedDocument?: () => any,
   getSelectedRange?: () => Array<number>,
-  insertHTML?: Function,
-  loadHTML?: Function,
-  setSelectedRange?: (range: Array<number>) => void,
+  insertHTML?: ([any]: string) => void,
+  loadHTML?: ([any]: string) => void,
+  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) => {
+const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   const {
     aria = {},
     advancedEditor,
@@ -81,7 +81,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   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,
@@ -117,6 +116,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     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) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={css}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={css}
     >
       {
         advancedEditor ? (
@@ -175,9 +175,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
               className={classnames("pb_rich_text_editor_advanced_container", {
               ["toolbar-active"]: advancedEditorToolbar,
               })}
-            >
+          >
             {advancedEditorToolbar && (
-              <EditorToolbar extensions={extensions} editor={advancedEditor}/>
+              <EditorToolbar editor={advancedEditor}
+                  extensions={extensions}
+              />
             )}
           { children }
           </div>

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

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

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

@@ -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 CHANGED Viewed

@@ -36,6 +36,7 @@ type SelectProps = {
   onChange: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
+  showArrow?: boolean,
   value?: string,
 } & GlobalProps
@@ -63,9 +64,10 @@ const Select = ({
   inline = false,
   multiple = false,
   name,
-  onChange = () => {},
+  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 ADDED Viewed

@@ -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
+}) %>