playbook_ui 6.0.1.pre.alpha6 → 6.0.1

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing as spacingFunc } from '../utilities/spacing.js'
 type FlexProps = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
@@ -52,7 +52,7 @@ const Flex = (props: FlexProps) => {
           wrapClass
         ),
         className,
-        globalProps(props)
+        spacingFunc(props)
       )}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 type FlexItemPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
   fixedSize: String,
@@ -18,7 +18,7 @@ const FlexItem = (props: FlexItemPropTypes) => {
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), className, globalProps(props))}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), className, spacing(props))}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -24,7 +24,6 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-  <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true, value: "test-val" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -27,7 +27,6 @@
   <%= form.text_area :example_text_area, props: { label: true, required: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -13,8 +13,7 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field,
-    :example_checkbox_field
+    :example_collection_select_field
 
 
     def self.model_name
@@ -50,7 +49,6 @@
   <%= form.input :example_text_area, as: :text %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
-  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb

@@ -13,8 +13,7 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field,
-    :example_checkbox_field
+    :example_collection_select_field
 
 
     def self.model_name
@@ -50,7 +49,6 @@
   <%= form.input :example_text_area, {as: :text, input_html: {props: {required: true}}} %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
-  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder.rb

@@ -14,11 +14,9 @@ module Playbook
         prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
         prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
         prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
-        # prepend(FormFieldBuilder.new(:check_box, kit_name: "checkbox"))
         prepend(TypeaheadField)
         prepend(SelectField)
         prepend(CollectionSelectField)
-        prepend(CheckboxField)
 
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

data/app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb

@@ -12,7 +12,6 @@ module Playbook
             options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
             options[:required] = true if props[:required]
             options[:placeholder] = props[:placeholder] || ""
-            options[:value] = props[:value]
 
             if props.key?(:validation)
               validation = props[:validation]

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
 import Icon from '../pb_icon/_icon.jsx'
 import Avatar from '../pb_avatar/_avatar.jsx'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type FormPillProps = {
   className?: String,
@@ -19,7 +19,7 @@ const FormPill = (props: FormPillProps) => {
   const { className, text, name, onClick = () => {}, avatarUrl } = props
   const css = classnames(
     [`pb_form_pill_kit_${'primary'}`, className],
-    globalProps(props)
+    spacing(props)
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 
 import { Badge } from '../'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type HashtagProps = {
   className?: String,
@@ -32,7 +32,7 @@ const Hashtag = (props: HashtagProps) => {
         className={classnames(
         className,
         buildCss('pb_hashtag_kit', { dark: dark }),
-        globalProps(props)
+        spacing(props)
       )}
     >
       <a href={url}>

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx

@@ -3,7 +3,7 @@
 import Highlighter from 'react-highlight-words'
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type HighlightProps = {
   className?: String,
@@ -27,7 +27,7 @@ const Highlight = (props: HighlightProps) => {
     <Highlighter
         autoEscape
         data={data}
-        highlightClassName={classnames(className, globalProps(props))}
+        highlightClassName={classnames(className, spacing(props))}
         highlightTag="span"
         id={id}
         searchWords={highlightedText}

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 
 import { joinPresent, titleize } from '../utilities/text'
 import { Body, Hashtag, Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type HomeAddressStreetProps = {
   address: String,
@@ -45,7 +45,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
         'pb_home_address_street': !dark,
         'pb_home_address_street_dark': dark,
       },
-      globalProps(props)
+      spacing(props)
     )
   return (
     <div className={classes(className, dark)}>

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type IconProps = {
   aria?: Object,
@@ -72,7 +72,7 @@ const Icon = (props: IconProps) => {
       [`fa-pull-${pull}`]: pull,
       [`fa-rotate-${rotation}`]: rotation,
     },
-    globalProps(props)
+    spacing(props)
   )
 
   return (

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 
 import { Icon } from '../'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type IconCircleProps = {
   className?: string,
@@ -27,7 +27,7 @@ const IconCircle = (props: IconCircleProps) => {
   const css = buildCss('pb_icon_circle_kit', size, variant)
 
   return (
-    <div className={classnames(className, css, globalProps(props))}>
+    <div className={classnames(className, css, spacing(props))}>
       <Icon icon={icon} />
     </div>
   )

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx

@@ -6,7 +6,7 @@ import { Body, Icon } from '../'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type IconValueProps = {
   align?: "left" | "center" | "right",
@@ -36,7 +36,7 @@ const IconValue = (props: IconValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(className, pbCss, globalProps(props))}
+        className={classnames(className, pbCss, spacing(props))}
         id={id}
     >
       <Body color="light">

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -2,8 +2,8 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type ImageProps = {
   alt?: String,
@@ -25,7 +25,7 @@ const Image = (props: ImageProps) => {
   } = props
 
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, globalProps(props))
+  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, spacing(props))
   const dataProps = buildDataProps(data)
 
   return (

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
@@ -30,7 +30,7 @@ const LabelPill = (props: LabelPillProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const css = classnames(['pb_label_pill_kit', className], globalProps(props))
+  const css = classnames(['pb_label_pill_kit', className], spacing(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx

@@ -4,8 +4,8 @@ import React from 'react'
 import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
 import { Body, Caption, Flex, Icon, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type LabelValueProps = {
   aria?: object,
@@ -53,7 +53,7 @@ const LabelValue = (props: LabelValueProps) => {
   const themeStyle = dark === true ? '_dark' : ''
   const css = classnames(
     ['pb_label_value_kit' + themeStyle, className],
-    globalProps(props)
+    spacing(props)
   )
 
   return (

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type LayoutPropTypes = {
   aria?: object,
@@ -46,7 +46,7 @@ type LayoutFooterProps = {
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_sidebar', className, globalProps(props))}>
+    <div className={classnames('layout_sidebar', className, spacing(props))}>
       {children}
     </div>
   )
@@ -56,7 +56,7 @@ const Side = (props: LayoutSideProps) => {
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_body', className, globalProps(props))}>
+    <div className={classnames('layout_body', className, spacing(props))}>
       {children}
     </div>
   )
@@ -66,7 +66,7 @@ const Body = (props: LayoutBodyProps) => {
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_header', className, globalProps(props))}>
+    <div className={classnames('layout_header', className, spacing(props))}>
       {children}
     </div>
   )
@@ -76,7 +76,7 @@ const Header = (props: LayoutHeaderProps) => {
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_footer', className, globalProps(props))}>
+    <div className={classnames('layout_footer', className, spacing(props))}>
       {children}
     </div>
   )
@@ -148,7 +148,7 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
-        globalProps(props)
+        spacing(props)
       )}
     >
       {subComponentTags('Side')}

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 import { Body, Title } from '../'
 
@@ -41,7 +41,7 @@ const Legend = (props: LegendProps) => {
   const darkClass = dark ? 'dark' : 'light'
   const bodyCSS = classnames(
     buildCss('pb_legend_kit', color, darkClass), className,
-    globalProps(props)
+    spacing(props)
   )
 
   return (

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 import { pbChart } from '../'
 
 type LineGraphProps = {
@@ -77,7 +77,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
 
     return (
       <div
-          className={classnames(className, globalProps(this.props))}
+          className={classnames(className, spacing(this.props))}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -3,7 +3,7 @@
 import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type ListProps = {
   aria?: object,
@@ -53,7 +53,7 @@ const List = (props: ListProps) => {
       ordered: ordered,
       xpadding: xpadding,
     }), className,
-    globalProps(props)
+    spacing(props)
   )
 
   return (

data/app/pb_kits/playbook/pb_list/_list_item.jsx

@@ -3,7 +3,7 @@
 import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type ListItemProps = {
   aria?: object,
@@ -28,7 +28,7 @@ const ListItem = (props: ListItemProps) => {
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_item_kit'), className,
-    globalProps(props)
+    spacing(props)
   )
 
   return (

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { Body, Icon } from '../'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type LoadingInlineProps = {
   align?: "left" | "center" | "right",
@@ -18,7 +18,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
   const { align = 'left' } = props
   return (
     <div
-        className={classnames(`pb_loading_inline_kit_${align}`, globalProps(props))}
+        className={classnames(`pb_loading_inline_kit_${align}`, spacing(props))}
     >
       <Body color="light">
         <Icon