playbook_ui 10.21.1.pre.alpha1 → 10.22.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 90a49eef5f7ef47b1e7921d940c7d1e6d56c7c11971e0612f88cd9aa6202079d
-  data.tar.gz: '0068f6fa35d25227519e9400cfc73fe66755f07c8e2521170829ff47e3926231'
+  metadata.gz: ea3a606f6fc57caa794e3c5fdf56f6b03244681e3706e111c5f96936581ce012
+  data.tar.gz: '039e8111a96de8430865f0bf180b4c65f22ec7dfa4a964c7bdc2f53abee4521e'
 SHA512:
-  metadata.gz: f9e65e6665780627141458de4acdb6e73e827ffe7f426cc4e0ce7ee71f40fd024d4c263c7c8fb126d88ea256b19d9a576914f60a075521959e5d2d196ec6dc10
-  data.tar.gz: f38dcd80a6acc7940e961c3f25bae68f70cf204cce40cdbed752222c2e762cf388e1aff147f6e9ee0218eefae3bbf342c96defb1e2ec01ef33d6412c64543020
+  metadata.gz: 968ed3f5a5f03354909f874344838c9e546b1d76b2dca1a8f3d78678fd56785d32d1b1759535da9057d745d4b10e824c203b4d1603601b7c08802f4d853dbd83
+  data.tar.gz: 78d1ad057032a67956c079646761ee9c66af33bd4594f44e8fcda00573b55ff569a03643ef32cbb11557477ae96ab621ac9251bc761bc5e46381d72517ce20d6

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -15,6 +15,7 @@ type ButtonPropTypes = {
   data?: object,
   disabled?: boolean,
   fixedWidth?: boolean,
+  form?: string,
   fullWidth?: boolean,
   icon?: string,
   id?: string,
@@ -69,6 +70,7 @@ const Button = (props: ButtonPropTypes) => {
     text,
     htmlType = 'button',
     value,
+    form = null
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -119,6 +121,7 @@ const Button = (props: ButtonPropTypes) => {
           {...dataProps}
           className={css}
           disabled={disabled}
+          form={form}
           id={id}
           onClick={onClick}
           role="button"

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -13,9 +13,9 @@ $pb_button_sizes: (
     &[class*=size_#{$name}] {
       font-size: $size;
       padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
-      @if $name == "sm" {
-        min-height: 0;
-      }
+    }
+    @if $name == "sm" {
+      min-height: 0;
     }
   }
 

data/app/pb_kits/playbook/pb_button/button.rb

@@ -21,6 +21,7 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: ["sm", "md", "lg", nil],
                   default: nil
+      prop :form, default: nil
 
       def options
         {
@@ -32,6 +33,7 @@ module Playbook
           role: "button",
           type: type,
           value: value,
+          form: form,
         }.compact
       end
 

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb

@@ -1 +1 @@
-<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "Go to Google"}, tag: "a", link: "http://google.com"}) %>

data/app/pb_kits/playbook/pb_button/docs/_button_form.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("button", props: { text: "Button with Form Attribute", form: "form-id"}) %>

data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Button } from '../../'
+
+const ButtonForm = (props) => (
+  <div>
+    <Button
+        form="form-id"
+        text="Button with Form Attribute"
+        {...props}
+    />
+  </div>
+)
+
+export default ButtonForm

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

@@ -8,6 +8,7 @@ examples:
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
   - button_size: Button Size
+  - button_form: Button Form Attribute
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -17,3 +18,4 @@ examples:
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size
+  - button_form: Button Form Attribute

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

@@ -6,3 +6,4 @@ export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
+export { default as ButtonForm } from './_button_form.jsx'

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -41,7 +41,6 @@
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     min-height: 45px;
-    margin-bottom: 16px;
   }
 
   & > [class^=pb_button_kit]:not(:first-child) {
@@ -49,7 +48,6 @@
     border-top-left-radius: 0;
     border-left-width: 0;
     min-height: 45px;
-    margin-bottom: 16px;
   }
 
   & > [class^=pb_date_picker_kit]:not(:last-child) {

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -73,7 +73,7 @@ module Playbook
 
       def render_svg(path)
         if File.extname(path) == ".svg"
-          doc = Nokogiri::XML(URI.open(path)) # rubocop:disable Security/Open
+          doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
           svg = doc.at_css "svg"
           svg["class"] = "pb_custom_icon " + object.custom_icon_classname
           raw doc

data/app/pb_kits/playbook/pb_image/docs/{_default_image.tsx → _default_image.jsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Image from '../_image'
 
-const DefaultImage = (props: any) => {
+const DefaultImage = (props) => {
   return (
     <>
       <br />

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

@@ -1,4 +1,4 @@
-export { default as DefaultImage } from './_default_image'
-export { default as RoundedImage } from './_rounded_image'
-export { default as CustomErrorImage } from './_custom_error_image'
-export { default as TransitionImage } from './_transition_image'
+export { default as DefaultImage } from './_default_image.jsx'
+export { default as RoundedImage } from './_rounded_image.jsx'
+export { default as CustomErrorImage } from './_custom_error_image.jsx'
+export { default as TransitionImage } from './_transition_image.jsx'

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

@@ -1,12 +1,12 @@
 /* @flow */
 /* eslint-disable react-hooks/rules-of-hooks */
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 try {
   const Trix = require('trix')
@@ -16,8 +16,6 @@ try {
   }
 } catch (_e) { /* do nothing */ }
 
-import { TrixEditor } from "react-trix"
-
 type RichTextEditorProps = {
   aria?: object,
   toolbarBottom?: Boolean,
@@ -27,7 +25,7 @@ type RichTextEditorProps = {
   id?: string,
   inline?: boolean,
   name?: string,
-  onChange: (html: string, text: string) => void,
+  onChange: (string) => void,
   placeholder?: string,
   simple?: boolean,
   sticky?: boolean,
@@ -42,117 +40,134 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     className,
     data = {},
     focus = false,
+    id,
     inline = false,
     name,
-    onChange = noop,
+    onChange,
     placeholder,
     simple = false,
     sticky = false,
     template = '',
     value = '',
   } = props
+  const trixRef = useRef()
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
 
-  const ariaProps = buildAriaProps(aria),
-  dataProps = buildDataProps(data),
-  [editor, setEditor] = useState()
+  useEffect(() => {
+    trixRef.current.addEventListener('trix-initialize', (event) => {
+      const element = event.target
 
-  const handleOnEditorReady = (editorInstance) => setEditor(editorInstance),
-  element = editor?.element
+      const { toolbarElement, editor } = element
 
-  // DOM manipulation must wait for editor to be ready
-  if (editor) {
-    const toolbarElement = element.parentElement.querySelector('trix-toolbar'),
-    blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]')
+      const blockCodeButton = toolbarElement.querySelector(
+        '[data-trix-attribute=code]'
+      )
+      const inlineCodeButton = blockCodeButton.cloneNode(true)
 
-    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]')
-    if (!inlineCodeButton) inlineCodeButton = blockCodeButton.cloneNode(true)
+      inlineCodeButton.hidden = true
+      inlineCodeButton.dataset.trixAttribute = 'inlineCode'
+      blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
 
-    // set button attributes
-    inlineCodeButton.dataset.trixAttribute = 'inlineCode'
-    blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+      const getCodeFormattingType = () => {
+        if (editor.attributeIsActive('code')) return 'block'
+        if (editor.attributeIsActive('inlineCode')) return 'inline'
 
-    if (toolbarBottom) editor.element.after(toolbarElement)
+        const range = editor.getSelectedRange()
+        if (range[0] == range[1]) return 'block'
 
-    const getCodeFormattingType = (): string => {
-      if (editor.attributeIsActive('code')) return 'block'
-      if (editor.attributeIsActive('inlineCode')) return 'inline'
+        const text = editor.getSelectedDocument().toString().trim()
+        return /\n/.test(text) ? 'block' : 'inline'
+      }
 
-      const range = editor.getSelectedRange()
-      if (range[0] == range[1]) return 'block'
+      element.addEventListener('trix-selection-change', () => {
+        const type = getCodeFormattingType()
+        blockCodeButton.hidden = type == 'inline'
+        inlineCodeButton.hidden = type == 'block'
+      })
 
-      const text = editor.getSelectedDocument().toString().trim()
-      return /\n/.test(text) ? 'block' : 'inline'
-    }
+      if (toolbarBottom) editor.element.after(toolbarElement)
+    })
 
-    // DOM event listeners
-    element.addEventListener('trix-selection-change', () => {
-      const type = getCodeFormattingType()
-      blockCodeButton.hidden = type == 'inline'
-      inlineCodeButton.hidden = type == 'block'
+    trixRef.current.addEventListener('trix-change', (event) => {
+      onChange && onChange(event.target.innerHTML)
     })
+  }, [trixRef])
+
+  useEffect(() => {
+    const editor = trixRef.current.editorController.editor
+    if (template) {
+      editor.loadHTML('')
+      editor.setSelectedRange([0, 0])
+      editor.insertHTML(template)
+    }
+  }, [template])
+
+  focus
+    ? (document.addEventListener('trix-focus', useFocus),
+    document.addEventListener('trix-blur', useFocus),
+    useFocus())
+    : null
+
+  document.addEventListener('trix-focus', inlineFocus)
+  document.addEventListener('trix-blur', inlineFocus)
 
-    focus
-      ? (document.addEventListener('trix-focus', useFocus),
-      document.addEventListener('trix-blur', useFocus),
-      useFocus())
-      : null
+  const handleAnchorElementClick = (clickedElement) => {
+    const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
+    if (!trixEditorContainer) return
 
-    document.addEventListener('trix-focus', inlineFocus)
-    document.addEventListener('trix-blur', inlineFocus)
+    const anchorElement = clickedElement.closest('a')
+    if (!anchorElement) return
+
+    if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
+  }
+
+  const handleClick = (event) => {
+    handleAnchorElementClick(event.target)
   }
 
   useEffect(() => {
-    if (!editor || !template) return
-    editor.loadHTML('')
-    editor.setSelectedRange([0, 0])
-    editor.insertHTML(template)
-  }, [editor, template])
+    trixRef.current.addEventListener('click', handleClick)
+  }, [])
 
   useEffect(() => {
-    if (!element) return
-    element.addEventListener('click', ({target}) => {
-      const trixEditorContainer = target.closest('.pb_rich_text_editor_kit')
-      if (!trixEditorContainer) return
+    trixRef.current.editor.loadHTML(value)
+  }, [value])
 
-      const anchorElement = target.closest('a')
-      if (!anchorElement) return
-
-      if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
-    })
-  }, [element])
-
-  const richTextEditorClass = 'pb_rich_text_editor_kit',
-  simpleClass = simple ? 'simple' : '',
-  focusClass = focus ? 'focus-editor-targets' : '',
-  stickyClass = sticky ? 'sticky' : '',
-  inlineClass = inline ? 'inline' : '',
-  toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
-
-  let css = classnames(globalProps(props), className)
-  css = classnames(
-    richTextEditorClass,
-    simpleClass,
-    focusClass,
-    stickyClass,
-    inlineClass,
-    toolbarBottomClass,
-    css
-  )
+  const RichTextEditorClass = 'pb_rich_text_editor_kit'
+  const SimpleClass = simple ? 'simple' : ''
+  const FocusClass = focus ? 'focus-editor-targets' : ''
+  const StickyClass = sticky ? 'sticky' : ''
+  const InlineClass = inline ? 'inline' : ''
+  const ToolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
+  const css = classnames(globalProps(props), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={css}
+        className={classnames(
+        RichTextEditorClass,
+        SimpleClass,
+        FocusClass,
+        StickyClass,
+        InlineClass,
+        ToolbarBottomClass,
+        css
+      )}
     >
-      <TrixEditor
-          className=""
-          fileParamName={name}
-          onChange={onChange}
-          onEditorReady={handleOnEditorReady}
-          placeholder={placeholder}
+      <input
+          id={id}
+          name={name}
+          type="hidden"
           value={value}
       />
+      <trix-editor
+          input={id}
+          name={name}
+          placeholder={placeholder}
+          ref={trixRef}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
+<%= pb_rails("rich_text_editor", props: {id: "default"}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx

@@ -1,19 +1,12 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { RichTextEditor } from '../../'
 
-const RichTextEditorDefault = (props) => {
-  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
-  handleOnChange = (html) => setValue(html)
-
-  return (
-    <div>
-      <RichTextEditor
-          onChange={handleOnChange}
-          value={value}
-          {...props}
-      />
-    </div>
-  )
-}
+const RichTextEditorDefault = (props) => (
+  <div>
+    <RichTextEditor
+        {...props}
+    />
+  </div>
+)
 
 export default RichTextEditorDefault

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -0,0 +1,175 @@
+// Prop categories
+const spacingProps = ({
+  marginRight,
+  marginLeft,
+  marginTop,
+  marginBottom,
+  marginX,
+  marginY,
+  margin,
+  paddingRight,
+  paddingLeft,
+  paddingTop,
+  paddingBottom,
+  paddingX,
+  paddingY,
+  padding,
+}) => {
+  let css = ''
+  css += marginRight ? `mr_${marginRight} ` : ''
+  css += marginLeft ? `ml_${marginLeft} ` : ''
+  css += marginTop ? `mt_${marginTop} ` : ''
+  css += marginBottom ? `mb_${marginBottom} ` : ''
+  css += marginX ? `mx_${marginX} ` : ''
+  css += marginY ? `my_${marginY} ` : ''
+  css += margin ? `m_${margin} ` : ''
+  css += paddingRight ? `pr_${paddingRight} ` : ''
+  css += paddingLeft ? `pl_${paddingLeft} ` : ''
+  css += paddingTop ? `pt_${paddingTop} ` : ''
+  css += paddingBottom ? `pb_${paddingBottom} ` : ''
+  css += paddingX ? `px_${paddingX} ` : ''
+  css += paddingY ? `py_${paddingY} ` : ''
+  css += padding ? `p_${padding} ` : ''
+  return css
+}
+
+const darkProps = ({ dark }) => {
+  let css = ''
+  css += dark ? 'dark' : ''
+  return css
+}
+
+const numberSpacingProps = ({ numberSpacing }) => {
+  let css = ''
+  css += numberSpacing ? `ns_${numberSpacing} ` : ''
+  return css
+}
+
+const maxWidthProps = ({ maxWidth }) => {
+  let css = ''
+  css += maxWidth ? `max_width_${maxWidth} ` : ''
+  return css
+}
+
+const zIndexProps = ({ zIndex }) => {
+  let css = ''
+  css += zIndex ? `z_index_${zIndex} ` : ''
+  return css
+}
+
+const shadowProps = ({ shadow }) => {
+  let css = ''
+  css += shadow ? `shadow_${shadow} ` : ''
+  return css
+}
+
+const lineHeightProps = ({ lineHeight }) => {
+  let css = ''
+  css += lineHeight ? `line_height_${lineHeight} ` : ''
+  return css
+}
+
+const displayProps = ({ display }) => {
+  let css = ''
+  css += display ? `display_${display} ` : ''
+  return css
+}
+
+const cursorProps = ({ cursor }) => {
+  let css = ''
+  css += cursor ? `cursor_${cursor} ` : ''
+  return css
+}
+
+const flexDirectionProps = ({ flexDirection }) => {
+  let css = ''
+  css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
+    flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
+      flexDirection ? `flex_direction_${flexDirection} ` : ''
+  return css
+}
+
+const flexWrapProps = ({ flexWrap }) => {
+  let css = ''
+  css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
+    flexWrap == 'noWrap' ? 'flex_nowrap' :
+      flexWrap ? `flex_wrap_${flexWrap} ` : ''
+  return css
+}
+
+const justifyContentProps = ({ justifyContent }) => {
+  let css = ''
+  css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
+    justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
+      justifyContent == 'spaceAround' ? 'justify_content_space_around' :
+        justifyContent ? `justify_content_${justifyContent}` : ''
+  return css
+}
+
+const justifySelfProps = ({ justifySelf }) => {
+  let css = ''
+  css += justifySelf ? `justify_self_${justifySelf}` : ''
+  return css
+}
+
+const alignItemsProps = ({ alignItems }) => {
+  let css = ''
+  css += alignItems == 'flexStart' ? 'align_items_flex_start' :
+    alignItems == 'flexEnd' ? 'align_items_flex_end' :
+      alignItems ? `align_items_${alignItems}` : ''
+  return css
+}
+
+const alignContentProps = ({ alignContent }) => {
+  let css = ''
+  css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
+    alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
+      alignContent == 'spaceAround' ? 'align_content_space_around' :
+        alignContent ? `align_content_${alignContent}` : ''
+  return css
+}
+
+const alignSelfProps = ({ alignSelf }) => {
+  let css = ''
+  css += alignSelf ? `align_self_${alignSelf}` : ''
+  return css
+}
+
+const flexProps = ({ flex }) => {
+  let css = ''
+  css += flex ? `flex_${flex}` : ''
+  return css
+}
+
+const flexGrowProps = ({ flexGrow }) => {
+  let css = ''
+  css += flexGrow ? `flex_grow_${flexGrow}` : ''
+  return css
+}
+
+const flexShrinkProps = ({ flexShrink }) => {
+  let css = ''
+  css += flexShrink ? `flex_shrink_${flexShrink}` : ''
+  return css
+}
+
+const orderProps = ({ order }) => {
+  let css = ''
+  css += order ? `order_${order}` : ''
+  return css
+}
+
+// All Exported as a single function
+export const globalProps = (props, defaultProps = {}) => {
+  const allProps = { ...props, ...defaultProps }
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps) + zIndexProps(allProps) + numberSpacingProps(allProps) + shadowProps(allProps) + lineHeightProps(allProps) + cursorProps(allProps) + displayProps(allProps) + flexDirectionProps(allProps) + flexWrapProps(allProps) + justifyContentProps(allProps) + justifySelfProps(allProps) + alignItemsProps(allProps) + alignContentProps(allProps) + alignSelfProps(allProps) + flexProps(allProps) + flexGrowProps(allProps) + flexShrinkProps(allProps) + orderProps(allProps)
+}
+
+export const deprecatedProps = (kit, props = []) => {
+  if (process.env.NODE_ENV === 'development') {
+    /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+    props.forEach((prop) => {
+      console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
+    })
+  }
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -59,59 +59,7 @@ type BorderRadius = {
   borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
 }
 
-type Flex = {
-  flex?: "none" | "initial" | "auto" | 1
-}
-
-type FlexDirection = {
-  flexDirection?: "row" | "column" | "rowReverse" | "columnReverse"
-}
-
-type FlexGrow = {
-  flexGrow?: 0 | 1
-}
-
-type FlexShrink = {
-  flexShrink?: 0 | 1
-}
-
-type FlexWrap = {
-  flexWrap?: "wrap" | "nowrap" | "wrapReverse"
-}
-
-type Alignment = "start" | "end" | "center"
-
-type Space = "spaceBetween" | "spaceAround" | "spaceEvenly"
-
-type JustifyContent = {
-  justifyContent?: Alignment & Space
-}
-
-type JustifySelf = {
-  justifySelf?: Alignment & ("auto" | "stretch")
-}
-
-type AlignContent = {
-  alignContent?: Alignment & Space
-}
-
-type AlignItems = {
-  alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
-}
-
-type AlignSelf = {
-  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
-}
-
-type Order = {
-  order?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-}
-
-export type GlobalProps = AlignContent & AlignItems & AlignSelf &
-  BorderRadius & Cursor & Dark & Display & Flex & FlexDirection &
-  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
-  Shadow & ZIndex
+export type GlobalProps = BorderRadius & Cursor & Dark & Display & LineHeight & Margin & MaxWidth & NumberSpacing & Padding & Shadow & ZIndex
 
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
@@ -187,81 +135,15 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     let css = ''
     css += cursor ? `cursor_${cursor} ` : ''
     return css
-  },
-  flexDirectionProps: ({ flexDirection }: FlexDirection) => {
-    let css = ''
-    css += flexDirection == 'columnReverse' ? 'flex_direction_column_reverse' :
-      flexDirection == 'rowReverse' ? 'flex_direction_row_reverse' :
-        flexDirection ? `flex_direction_${flexDirection} ` : ''
-    return css
-  },
-  flexWrapProps: ({ flexWrap }: FlexWrap) => {
-    let css = ''
-    css += flexWrap == 'wrapReverse' ? 'flex_wrap_reverse' :
-      flexWrap == 'nowrap' ? 'flex_nowrap' :
-        flexWrap ? `flex_wrap_${flexWrap} ` : ''
-    return css
-  },
-  justifyContentProps: ({ justifyContent }: JustifyContent) => {
-    let css = ''
-    css += justifyContent == 'spaceBetween' ? 'justify_content_space_between' :
-      justifyContent == 'spaceEvenly' ? 'justify_content_space_evenly' :
-        justifyContent == 'spaceAround' ? 'justify_content_space_around' :
-          justifyContent ? `justify_content_${justifyContent}` : ''
-    return css
-  },
-  justifySelfProps: ({ justifySelf }: JustifySelf) => {
-    let css = ''
-    css += justifySelf ? `justify_self_${justifySelf}` : ''
-    return css
-  },
-  alignItemsProps: ({ alignItems }: AlignItems) => {
-    let css = ''
-    css += alignItems == 'flexStart' ? 'align_items_flex_start' :
-      alignItems == 'flexEnd' ? 'align_items_flex_end' :
-        alignItems ? `align_items_${alignItems}` : ''
-    return css
-  },
-  alignContentProps: ({ alignContent }: AlignContent) => {
-    let css = ''
-    css += alignContent == 'spaceBetween' ? 'align_content_space_between' :
-      alignContent == 'spaceEvenly' ? 'align_content_space_evenly' :
-        alignContent == 'spaceAround' ? 'align_content_space_around' :
-          alignContent ? `align_content_${alignContent}` : ''
-    return css
-  },
-  alignSelfProps: ({ alignSelf }: AlignSelf) => {
-    let css = ''
-    css += alignSelf ? `align_self_${alignSelf}` : ''
-    return css
-  },
-  flexProps: ({ flex }: Flex) => {
-    let css = ''
-    css += flex ? `flex_${flex}` : ''
-    return css
-  },
-  flexGrowProps: ({ flexGrow }: FlexGrow) => {
-    let css = ''
-    css += flexGrow ? `flex_grow_${flexGrow}` : ''
-    return css
-  },
-  flexShrinkProps: ({ flexShrink }: FlexShrink) => {
-    let css = ''
-    css += flexShrink ? `flex_shrink_${flexShrink}` : ''
-    return css
-  },
-  orderProps: ({ order }: Order) => {
-    let css = ''
-    css += order ? `order_${order}` : ''
-    return css
   }
 }
 
+// All Exported as a single function
 export const globalProps = (props: GlobalProps, defaultProps: {[key: string]: string} | {} = {}): string => {
   const allProps = { ...props, ...defaultProps }
   return Object.keys(PROP_CATEGORIES).map((key) => {
     return PROP_CATEGORIES[key](allProps)
-  }).filter((value) => value?.length > 0).join(" ")
+  }).join("")
 }
 
 export const deprecatedProps = (kit: string, props: string[] = []): void => {

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "10.21.0"
-  VERSION = "10.21.1.pre.alpha1"
+  VERSION = "10.22.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.21.1.pre.alpha1
+  version: 10.22.0
 platform: ruby
 authors:
 - Power UX
@@ -417,6 +417,8 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_default.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_default.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_default.md
+- app/pb_kits/playbook/pb_button/docs/_button_form.html.erb
+- app/pb_kits/playbook/pb_button/docs/_button_form.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_full_width.md
@@ -1090,7 +1092,7 @@ files:
 - app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
 - app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx
 - app/pb_kits/playbook/pb_image/docs/_default_image.html.erb
-- app/pb_kits/playbook/pb_image/docs/_default_image.tsx
+- app/pb_kits/playbook/pb_image/docs/_default_image.jsx
 - app/pb_kits/playbook/pb_image/docs/_description.md
 - app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
 - app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
@@ -2084,6 +2086,7 @@ files:
 - app/pb_kits/playbook/utilities/_positioning.scss
 - app/pb_kits/playbook/utilities/_shadow.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
+- app/pb_kits/playbook/utilities/globalProps.js
 - app/pb_kits/playbook/utilities/globalProps.ts
 - app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
@@ -2161,9 +2164,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.6
 signing_key: