playbook_ui 6.0.1.pre.alpha6 → 6.0.1

data/app/pb_kits/playbook/pb_message/_message.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Avatar, Body, Caption } from '../'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type MessageProps = {
   aria: object,
@@ -39,7 +39,7 @@ const Message = (props: MessageProps) => {
     ? 'pb_message_kit_avatar'
     : 'pb_message_kit'
 
-  const classes = classnames(buildCss(baseClassName), className, globalProps(props))
+  const classes = classnames(buildCss(baseClassName), className, spacing(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
 import { Avatar } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type MultipleUsersProps = {
   className?: String,
@@ -25,7 +25,7 @@ const MultipleUsers = (props: MultipleUsersProps) => {
         className={classnames(
         className,
         buildCss('pb_multiple_users_kit', reverse && 'reverse'),
-        globalProps(props)
+        spacing(props)
       )}
         id={id}
     >

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.jsx

@@ -3,7 +3,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 import { Avatar, Badge } from '../'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -75,7 +75,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, className, globalProps(props))}
+        className={classnames(css, className, spacing(props))}
         id={id}
     >
       {firstUser()}

data/app/pb_kits/playbook/pb_nav/_nav.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { Caption } from '../'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type NavProps = {
   title: String,
@@ -31,7 +31,7 @@ const Nav = (props: NavProps) => {
     highlight: highlight,
   })
   return (
-    <div className={classnames(cardCss, globalProps(props))}>
+    <div className={classnames(cardCss, spacing(props))}>
       <If condition={title}>
         <div className="pb_nav_list_title">
           <a

data/app/pb_kits/playbook/pb_online_status/_online_status.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 { buildDataProps } from '../utilities/props'
 
@@ -16,7 +16,7 @@ type OnlineStatusProps = {
 const OnlineStatus = (props: OnlineStatusProps) => {
   const { id, data = {}, className, status = 'offline' } = props
   const dataProps = buildDataProps(data)
-  const css = classnames([`pb_online_status_kit_${status}`, className], globalProps(props))
+  const css = classnames([`pb_online_status_kit_${status}`, className], spacing(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_person/_person.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,
@@ -32,7 +32,7 @@ const Person = (props: PersonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_person_kit'), className, globalProps(props))
+  const classes = classnames(buildCss('pb_person_kit'), className, spacing(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -9,7 +9,7 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 import { Caption, Contact, Person } from '../'
 
@@ -43,7 +43,7 @@ const PersonContact = (props: PersonContactProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_person_contact_kit'), className, globalProps(props))
+  const classes = classnames(buildCss('pb_person_contact_kit'), className, spacing(props))
 
   const wrongContacts = () => (
     contacts.filter((contactObject) => (

data/app/pb_kits/playbook/pb_pill/_pill.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 
 import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type PillProps = {
   className?: String,
@@ -15,7 +15,7 @@ type PillProps = {
 
 const Pill = (props: PillProps) => {
   const { className, text, variant = 'neutral' } = props
-  const css = classnames([`pb_pill_kit_${variant}`, className], globalProps(props))
+  const css = classnames([`pb_pill_kit_${variant}`, className], spacing(props))
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -13,7 +13,7 @@ import {
 import { buildCss, noop } from '../utilities/props'
 
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type PbPopoverProps = {
   className?: String,
@@ -58,7 +58,7 @@ const Popover = (props: PbPopoverProps) => {
     minWidth,
   } = props
 
-  const popoverSpacing = globalProps(props) ? globalProps(props) : 'p_sm'
+  const popoverSpacing = spacing(props) ? spacing(props) : 'p_sm'
   const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
   const widthHeightStyles = () => {

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx

@@ -10,7 +10,7 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type ProgressPillsProps = {
   active?: Number,
@@ -59,7 +59,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_progress_pills_kit', darkClass), className, globalProps(props))
+  const classes = classnames(buildCss('pb_progress_pills_kit', darkClass), className, spacing(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.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 ProgressSimpleProps = {
   align?: "left" | "center" | "right",
@@ -43,7 +43,7 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
   const wrapperClass = classnames(
     className,
     buildCss('pb_progress_simple_wrapper', align, { dark: dark }),
-    globalProps(props)
+    spacing(props)
   )
 
   const kitClass = classnames(

data/app/pb_kits/playbook/pb_progress_step/_progress_step.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 } from '../utilities/spacing.js'
 
 type ProgressStepProps = {
   className?: String,
@@ -33,7 +33,7 @@ const ProgressStep = (props: ProgressStepProps) => {
   )
 
   return (
-    <div className={classnames(progressStepCss, className, globalProps(props))}>
+    <div className={classnames(progressStepCss, className, spacing(props))}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_radio/_radio.jsx

@@ -4,7 +4,7 @@
 import React from 'react'
 import Body from '../pb_body/_body.jsx'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type RadioProps = {
   className?: String,
@@ -40,7 +40,7 @@ const Radio = ({
 
   return (
     <label
-        className={classnames('pb_radio_kit' + (dark === true ? '_dark ' : ' ') + errorClass + ' ' + className, globalProps(props))}
+        className={classnames('pb_radio_kit' + (dark === true ? '_dark ' : ' ') + errorClass + ' ' + className, spacing(props))}
         htmlFor={id}
     >
       <If condition={children}>

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

@@ -3,7 +3,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { Caption } from '../'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type SectionSeparatorProps = {
   aria: object,
@@ -30,7 +30,7 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   const themeStyle = dark === true ? '_dark' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, globalProps(props))
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, themeStyle), className, spacing(props))
 
   return (
 

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

@@ -14,7 +14,7 @@ import {
   buildDataProps,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 import type { InputCallback } from '../types'
 
@@ -72,7 +72,7 @@ const Select = ({
   ...props
 }: SelectProps) => {
   const errorClass = error ? ' error' : ''
-  const css = classnames(buildCss('pb_select', { dark }) + errorClass, globalProps(props))
+  const css = classnames(buildCss('pb_select', { dark }) + errorClass, spacing(props))
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -13,7 +13,7 @@ import {
   noop,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type Props = {
   aria: Object,
@@ -95,7 +95,7 @@ const SelectableCard = ({
           value={value}
       />
       <label
-          className={globalProps(props)}
+          className={spacing(props)}
           htmlFor={inputIdPresent}
       >
         {text || children}

data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 
 import { buildCss } from '../utilities/props'
 import { Body, Icon } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 const statusMap = {
   increase: 'positive',
@@ -35,7 +35,7 @@ const StatChange = (props: StatChangeProps) => {
           className={classnames(
           className,
           buildCss('pb_stat_change_kit', status),
-          globalProps(props)
+          spacing(props)
         )}
           id={id}
       >

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Title } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type StatValueProps = {
   className?: String,
@@ -44,7 +44,7 @@ const StatValue = (props: StatValueProps) => {
 
   return (
     <div
-        className={classnames('pb_stat_value_kit', className, globalProps(props))}
+        className={classnames('pb_stat_value_kit', className, spacing(props))}
         id={id}
     >
       <div className="pb_stat_value_wrapper">

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -2,7 +2,7 @@
 
 import React, { type Node } from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type TableProps = {
   children: Array<Node> | Node,
@@ -43,7 +43,7 @@ const Table = (props: TableProps) => {
           'single-line': singleLine,
           'no-hover': disableHover,
         },
-        globalProps(props)
+        spacing(props)
       )}
     >
       {children}

data/app/pb_kits/playbook/pb_table/_table_row.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 TableRowPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
@@ -17,7 +17,7 @@ const TableRow = (props: TableRowPropTypes) => {
   const tableRowCss = buildCss('pb_table_row_kit', sideHighlightClass)
 
   return (
-    <tr className={classnames(tableRowCss, className, globalProps(props))}>
+    <tr className={classnames(tableRowCss, className, spacing(props))}>
       {children}
     </tr>
   )

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Body, Caption } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 import {
   buildAriaProps,
@@ -60,7 +60,7 @@ const TextInput = ({
           dark={dark}
           text={label}
       />
-      <div className={classnames('text_input_wrapper', globalProps(props))}>
+      <div className={classnames('text_input_wrapper', spacing(props))}>
         <If condition={children}>
           {children}
           <Else />

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { Body, Caption } from '../'
 import type { InputCallback } from '../types.js'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type TextareaProps = {
   className?: String,
@@ -43,7 +43,7 @@ const Textarea = ({
   const resizeClass = ` resize_${resize}`
 
   return (
-    <div className={classnames(textareaClass, className, errorClass, resizeClass, globalProps(props))}>
+    <div className={classnames(textareaClass, className, errorClass, resizeClass, spacing(props))}>
       <Caption
           dark={dark}
           text={label}

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { Body, Caption, Icon } from '../'
 import DateTime from '../pb_kit/dateTime.js'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 type TimeRangeInlineProps = {
   className?: String,
@@ -78,7 +78,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
 
   return (
     <div
-        className={classnames('pb_time_range_inline_kit_' + alignment, className, globalProps(props))}
+        className={classnames('pb_time_range_inline_kit_' + alignment, className, spacing(props))}
     >
       <div className="pb_time_range_inline_wrapper">
         <If condition={size == 'xs'}>

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { Body, Caption } from '../'
-import { globalProps } from '../utilities/globalProps.js'
+import { spacing } from '../utilities/spacing.js'
 
 const Components = {
   body: Body,
@@ -30,7 +30,7 @@ const TimeStacked = (props: TimeStackedProps) => {
     buildCss('pb_time_stacked_kit', {
       dark: dark,
     }),
-    globalProps(props)
+    spacing(props)
   )
 
   const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))