playbook_ui 12.30.1.pre.alpha.hovertesting914 → 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e94ee5e2d1744b1c8cb4257f6cbabe864f3cbe7f7a23c89ecbbf704d96e0881c
-  data.tar.gz: 63d9209ce6bdced8f6c934971d2b0ca8d8e67a4ca683a289091fdf7c70e894a4
+  metadata.gz: 34a695910f67fbd8f8a01279fe53bcfd4115ca6fc419a2a4f598b48464ade926
+  data.tar.gz: d17f2e8534379076372aa29bcf3daadbb83acc5fc47bb5be5bd3ff31a2541461
 SHA512:
-  metadata.gz: 405c56bbb3852436d2792bb9b90ecb9dbdc85601201f6fc1e89b7942f1dc0cc822050b0c3bdf2f2ae7966d14c1eeae5330c026c3ebebfcabd537881b2a24342d
-  data.tar.gz: 2eac3a3bc6353031c3f242191866eeba63789609ea03d2d3ee199720c6035f1636da744cf3ce0ca3a9e8a34fe602c4b2776613a17853c9921d5bef607ee7e60a
+  metadata.gz: 82adeb777f4240ec21972169b4866a1b857597d02f63c30859b30e3a407abdd62427807e837beef23780136a9002c01513cc6478ca0c023c8fc5c564ea3ac52f
+  data.tar.gz: fdc73b9b2eed6973de5a14011ce0240cf3c84fcff6e9f8e454ceecf15de721a974958d349803d6657302b682cf8ed64ac4a1f87f97971f818c2607a20ce9b012

data/app/pb_kits/playbook/_playbook.scss

@@ -110,7 +110,5 @@
 @import './utilities/display';
 @import './utilities/flexbox';
 @import './utilities/focus';
-@import './utilities/border_radius';
-@import './utilities/hover';
 
 @import 'pb_multi_level_select/multi_level_select';

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

@@ -21,4 +21,3 @@ examples:
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size
   - button_form: Button Form Attribute
-  - button_hover: Button Hover

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

@@ -8,4 +8,3 @@ 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'
-export { default as ButtonHover } from './_button_hover.jsx'

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -3,6 +3,7 @@
 
 [class^=pb_card_kit] {
   @include pb_card;
+  padding: $space_md;
 
   &[class*=_selected] {
     @include pb_card_selected;
@@ -25,6 +26,7 @@
     flex-shrink: 0;
     flex-basis: auto;
     min-height: 1px;
+    padding: $space_sm;
     border: 0;
     border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
     @each $color_name, $color_value in $pb_card_header_colors {
@@ -57,6 +59,7 @@
     flex-basis: auto;
     min-height: 1px;
     border: 0;
+    padding: $space_md;
   }
 
   &[class*=_highlight] {

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -42,10 +42,10 @@ type CardBodyProps = {
 
 // Header component
 const Header = (props: CardHeaderProps) => {
-  const { children, className, headerColor = 'category_1', headerColorStriped = false, padding = 'sm' } = props
+  const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
   const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
 
-  const headerSpacing = globalProps(props, { padding })
+  const headerSpacing = globalProps(props)
 
   return (
     <div className={classnames(headerCSS, headerSpacing, className)}>
@@ -57,9 +57,9 @@ const Header = (props: CardHeaderProps) => {
 
 // Body component
 const Body = (props: CardBodyProps) => {
-  const { children, padding = 'md', className } = props
+  const { children, className } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-  const bodySpacing = globalProps(props, { padding })
+  const bodySpacing = globalProps(props)
 
   return (
     <div className={classnames(bodyCSS, bodySpacing, className)}>
@@ -80,7 +80,6 @@ const Card = (props: CardPropTypes) => {
     highlight = {},
     selected = false,
     tag = 'div',
-    padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
   const selectedCSS = selected == true ? 'selected' : 'deselected'
@@ -114,7 +113,7 @@ const Card = (props: CardPropTypes) => {
     <Tag
         {...ariaProps}
         {...dataProps}
-        className={classnames(cardCss, globalProps(props, { padding }), className)}
+        className={classnames(cardCss, globalProps(props), className)}
     >
       {subComponentTags('Header')}
       {nonHeaderChildren}

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -4,9 +4,7 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-  <%= pb_rails("card/card_body", props: { padding: object.body_padding, flex_direction: object.body_flex_direction, flex_wrap: object.body_flex_wrap, justify_content: object.body_justify_content, justify_self: object.body_justify_self, align_items: object.body_align_items, align_content: object.body_align_content, align_self: object.body_align_self, flex: object.body_flex, flex_grow: object.body_flex_grow, flex_shrink: object.body_flex_shrink, order: object.body_order }) do %>
-    <%= content %>
-  <% end if content.present? %>
+    <%= content.presence %>
 <% end %>
 
 

data/app/pb_kits/playbook/pb_card/card.rb

@@ -28,102 +28,6 @@ module Playbook
                            highlight_color_class)
       end
 
-      def body_padding
-        if padding.present?
-          ""
-        else
-          "p_md"
-        end
-      end
-
-      def body_flex_direction
-        if flex_direction.present?
-          "flex_direction_#{flex_direction}"
-        else
-          ""
-        end
-      end
-
-      def body_flex_wrap
-        if flex_wrap.present?
-          "flex_wrap_#{flex_wrap}"
-        else
-          ""
-        end
-      end
-
-      def body_justify_content
-        if justify_content.present?
-          "justify_content_#{justify_content}"
-        else
-          ""
-        end
-      end
-
-      def body_justify_self
-        if justify_self.present?
-          "justify_self_#{justify_self}"
-        else
-          ""
-        end
-      end
-
-      def body_align_items
-        if align_items.present?
-          "align_items_#{align_items}"
-        else
-          ""
-        end
-      end
-
-      def body_align_content
-        if align_content.present?
-          "align_content_#{align_content}"
-        else
-          ""
-        end
-      end
-
-      def body_align_self
-        if align_self.present?
-          "align_self_#{align_self}"
-        else
-          ""
-        end
-      end
-
-      def body_flex
-        if flex.present?
-          "flex_#{flex}"
-        else
-          ""
-        end
-      end
-
-      def body_flex_grow
-        if flex_grow.present?
-          "flex_grow_#{flex_grow}"
-        else
-          ""
-        end
-      end
-
-      def body_flex_shrink
-        if flex_shrink.present?
-          "flex_shrink_#{flex_shrink}"
-        else
-          ""
-        end
-      end
-
-      def body_order
-        if order.present?
-          "order_#{order}"
-        else
-          ""
-        end
-      end
-
     private
 
       def selected_class

data/app/pb_kits/playbook/pb_card/card_body.rb

@@ -4,7 +4,99 @@ module Playbook
   module PbCard
     class CardBody < Playbook::KitBase
       def classname
-        generate_classname("pb_card_body_kit", padding, flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
+        generate_classname("pb_card_body_kit", flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
+      end
+
+      def body_padding
+        "" if padding.present?
+      end
+
+      def body_flex_direction
+        if flex_direction.present?
+          "flex_direction_#{flex_direction}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_wrap
+        if flex_wrap.present?
+          "flex_wrap_#{flex_wrap}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_content
+        if justify_content.present?
+          "justify_content_#{justify_content}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_self
+        if justify_self.present?
+          "justify_self_#{justify_self}"
+        else
+          ""
+        end
+      end
+
+      def body_align_items
+        if align_items.present?
+          "align_items_#{align_items}"
+        else
+          ""
+        end
+      end
+
+      def body_align_content
+        if align_content.present?
+          "align_content_#{align_content}"
+        else
+          ""
+        end
+      end
+
+      def body_align_self
+        if align_self.present?
+          "align_self_#{align_self}"
+        else
+          ""
+        end
+      end
+
+      def body_flex
+        if flex.present?
+          "flex_#{flex}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_grow
+        if flex_grow.present?
+          "flex_grow_#{flex_grow}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_shrink
+        if flex_shrink.present?
+          "flex_shrink_#{flex_shrink}"
+        else
+          ""
+        end
+      end
+
+      def body_order
+        if order.present?
+          "order_#{order}"
+        else
+          ""
+        end
       end
     end
   end

data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss

@@ -1,6 +1,9 @@
 @import "./tokens/colors";
+@import "./tokens/spacing";
 
 [class^=pb_collapsible_kit] {
+  padding: $space_md;
+
   .toggle-content {
     display: none;
     height: 0;
@@ -18,3 +21,11 @@
       color: $primary
   }
 }
+
+[class^=pb_collapsible_main_kit] {
+  padding: $space_md;
+}
+
+[class^=pb_collapsible_content_kit] {
+  padding: $space_md;
+}

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -19,7 +19,6 @@ type CollapsibleProps = {
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   iconSize?: typeof IconSizes
   id?: string,
-  padding?: string,
 }
 
 const useCollapsible = (initial = false) => {
@@ -40,7 +39,6 @@ const Collapsible = ({
   iconColor = 'default',
   iconSize,
   id,
-  padding = 'md',
   ...props
 }: CollapsibleProps) => {
   const [isCollapsed, collapse] = useCollapsible(collapsed)
@@ -59,7 +57,7 @@ const Collapsible = ({
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_collapsible_kit'),
-    globalProps(props, { padding }),
+    globalProps(props),
     className
   )
 

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -9,18 +9,16 @@ import CollapsibleContext from '../context'
 export type CollapsibleContentProps = {
   children?: React.ReactNode[] | React.ReactNode | string,
   className?: string,
-  padding?: string,
 }
 
 const CollapsibleContent = ({
   children,
   className,
-  padding = 'md',
   ...props
 }: CollapsibleContentProps) => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
-  const contentSpacing = globalProps(props, { padding })
+  const contentSpacing = globalProps(props)
 
   return (
     <AnimateHeight

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -31,7 +31,6 @@ const colorMap = {
 type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-  padding?: string,
   cursor?: string,
 
 }
@@ -63,12 +62,11 @@ const CollapsibleMain = ({
   children,
   className,
   cursor = 'pointer',
-  padding = 'md',
   ...props
 }: CollapsibleMainProps): React.ReactElement=> {
   const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
-  const mainSpacing = globalProps(props, { cursor, padding })
+  const mainSpacing = globalProps(props, { cursor })
 
   return (
     <div className={classnames(mainCSS, className, mainSpacing)}>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Collapsible } from '../..'
 
 const CollapsibleDefault = () => (
-  <Collapsible>
+  <Collapsible >
     <Collapsible.Main>
       <div>{'Main Section'}</div>
     </Collapsible.Main>

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -263,6 +263,18 @@
 	}	
 }
 
+[class*="dialog_body"] {
+  padding: $space_sm;
+}
+
+[class*="dialog_header"] {
+  padding: $space_sm;
+}
+
+[class*="dialog_footer"] {
+  padding: $space_sm;
+}
+
 //styles specific to rails version of kit
 // rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
 .pb_dialog_wrapper_rails {

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx

@@ -11,9 +11,9 @@ type DialogBodyProps = {
 
 // Body component
 const DialogBody = (props: DialogBodyProps) => {
-  const { children, padding = "sm", className } = props
+  const { children, className } = props
   const bodyCSS = buildCss("dialog_body")
-  const bodySpacing = globalProps(props, { padding })
+  const bodySpacing = globalProps(props)
 
   return (
     <div className={classnames(bodyCSS, bodySpacing, className)}>

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx

@@ -25,16 +25,13 @@ type DialogFooterProps = {
 const DialogFooter = (props: DialogFooterProps) => {
   const {
     children,
-    padding = "sm",
-    paddingBottom = "sm",
-    paddingX = "sm",
     className,
     spacing = "between",
     separator = false,
   } = props
 
   const footerCSS = buildCss("dialog_footer")
-  const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
+  const footerSpacing = globalProps(props)
 
   return (
     <>

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -28,7 +28,6 @@ const DialogHeader = (props: DialogHeaderProps) => {
     children,
     className,
     data = {},
-    padding = "sm",
     spacing = "between",
     closeable = true,
     separator = true,
@@ -38,7 +37,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
   const dataProps = buildDataProps(data)
   const api = useContext(DialogContext)
   const headerCSS = buildCss("dialog_header")
-  const headerSpacing = globalProps(props, { padding })
+  const headerSpacing = globalProps(props)
 
   /* eslint-disable react/jsx-handler-names */
 

data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx

@@ -1,33 +1,43 @@
-import React from "react"
+import React from 'react'
 
-import Message from "../_message"
-import Image from "../../pb_image/_image"
+import Message from '../_message'
+import Image from '../../pb_image/_image'
 
 const MessageDefault = (props) => {
   return (
     <div>
       <Message
-          avatarName='Mike Bishop'
-          avatarStatus='online'
-          avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
-          borderRadius='rounded'
-          label='Anna Black'
-          message='How can we assist you today?'
-          timestamp='20 seconds ago'
+          avatarName="Mike Bishop"
+          avatarStatus="online"
+          avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
+          label="Anna Black"
+          message="How can we assist you today?"
+          timestamp="20 seconds ago"
           {...props}
       />
 
       <br />
       <br />
+
+      <Message
+          alignTimestamp="left"
+          avatarName="Wade Winningham"
+          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
+          label="Patrick Welch"
+          message="We will escalate this issue to a Senior Support agent."
+          timestamp="9 minutes ago"
+          {...props}
+      />
+
       <br />
       <br />
 
       <Message
-          avatarName='Becca Jacobs'
-          avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
-          label='Lucille Sanchez'
-          message='Application for Kate Smith is waiting for your approval'
-          timestamp='2 days ago'
+          avatarName="Becca Jacobs"
+          avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
+          label="Lucille Sanchez"
+          message="Application for Kate Smith is waiting for your approval"
+          timestamp="2 days ago"
           {...props}
       />
 
@@ -35,10 +45,10 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          avatarName='Timothy Wenhold'
-          label='Beverly Reyes'
-          message='We are so sorry you had a bad experience!'
-          timestamp='2 days ago'
+          avatarName="Timothy Wenhold"
+          label="Beverly Reyes"
+          message="We are so sorry you had a bad experience!"
+          timestamp="2 days ago"
           {...props}
       />
 
@@ -46,23 +56,24 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          label='Keith Craig'
-          message='Please hold for one moment, I will check with my manager.'
-          timestamp='2 days ago'
+          label="Keith Craig"
+          message="Please hold for one moment, I will check with my manager."
+          timestamp="2 days ago"
           {...props}
       />
 
       <br />
       <br />
 
-      <Message label='Keith Craig'
-          timestamp='2 days ago'
+      <Message
+          label="Keith Craig"
+          timestamp="2 days ago"
           {...props}
       >
         <Image
-            alt='picture of a misty forest'
-            size='md'
-            url='https://unsplash.it/500/400/?image=634'
+            alt="picture of a misty forest"
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
         />
       </Message>
 
@@ -70,17 +81,18 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          label='Keith Craig'
-          message='Please hold for one moment, I will check with my manager.'
-          timestamp='2 days ago'
+          label="Keith Craig"
+          message="Please hold for one moment, I will check with my manager."
+          timestamp="2 days ago"
           {...props}
       >
         <Image
-            alt='picture of a misty forest'
-            size='md'
-            url='https://unsplash.it/500/400/?image=634'
+            alt="picture of a misty forest"
+            size="md"
+            url="https://unsplash.it/500/400/?image=634"
         />
       </Message>
+
     </div>
   )
 }

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

@@ -8,5 +8,4 @@ examples:
   react:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
-  - message_hover: Hover
 

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

@@ -1,4 +1,2 @@
 export { default as MessageDefault } from './_message_default.jsx'
 export { default as MessageTimestamp } from './_message_timestamp.jsx'
-export { default as MessageHover } from './_message_hover.jsx'
-

data/app/pb_kits/playbook/utilities/_colors.scss

@@ -1,7 +1,5 @@
 // Color Helper Utilities
 
-$transition-speed: 0.2s;
-
 @function shade($color, $percentage) {
   @return mix($charcoal, $color, $percentage);
 }
@@ -29,7 +27,6 @@ $transition-speed: 0.2s;
   }
 }
 
-
 @mixin text-color($colors-list) {
   @each $name, $color in $colors-list {
     .#{$name} {