playbook_ui 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.30.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 34a695910f67fbd8f8a01279fe53bcfd4115ca6fc419a2a4f598b48464ade926
-  data.tar.gz: d17f2e8534379076372aa29bcf3daadbb83acc5fc47bb5be5bd3ff31a2541461
+  metadata.gz: be0a7b566ae2becf6f879bd4f1cd39c0c27f487ef1a0a962238469eeec8753c6
+  data.tar.gz: ff75740ac1377ced70e9c9b6dc4dbe78f3f7a4ec7a0320d202f4be2b5c3601cd
 SHA512:
-  metadata.gz: 82adeb777f4240ec21972169b4866a1b857597d02f63c30859b30e3a407abdd62427807e837beef23780136a9002c01513cc6478ca0c023c8fc5c564ea3ac52f
-  data.tar.gz: fdc73b9b2eed6973de5a14011ce0240cf3c84fcff6e9f8e454ceecf15de721a974958d349803d6657302b682cf8ed64ac4a1f87f97971f818c2607a20ce9b012
+  metadata.gz: 589840dca5165dd2173a6d2eb01bf95045918ddf958598262a5040cc9e18560ec5cc1cc1073fd522ed50266bb2a3d9fbee1b42ca5eea8d862ffe2a0408e3163f
+  data.tar.gz: d04f64d8a30a45a41541f861c39db6dc82fc21b636e5caa87ec1c889399eaa28fd09374f1994a3266c4cf8bec4d5e3bc80bbe0dfe346a65713b0bdda06c2b321

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

@@ -3,7 +3,6 @@
 
 [class^=pb_card_kit] {
   @include pb_card;
-  padding: $space_md;
 
   &[class*=_selected] {
     @include pb_card_selected;
@@ -26,7 +25,6 @@
     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 {
@@ -59,7 +57,6 @@
     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 } = props
+  const { children, className, headerColor = 'category_1', headerColorStriped = false, padding = 'sm' } = props
   const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
 
-  const headerSpacing = globalProps(props)
+  const headerSpacing = globalProps(props, { padding })
 
   return (
     <div className={classnames(headerCSS, headerSpacing, className)}>
@@ -57,9 +57,9 @@ const Header = (props: CardHeaderProps) => {
 
 // Body component
 const Body = (props: CardBodyProps) => {
-  const { children, className } = props
+  const { children, padding = 'md', className } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-  const bodySpacing = globalProps(props)
+  const bodySpacing = globalProps(props, { padding })
 
   return (
     <div className={classnames(bodyCSS, bodySpacing, className)}>
@@ -80,6 +80,7 @@ const Card = (props: CardPropTypes) => {
     highlight = {},
     selected = false,
     tag = 'div',
+    padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
   const selectedCSS = selected == true ? 'selected' : 'deselected'
@@ -113,7 +114,7 @@ const Card = (props: CardPropTypes) => {
     <Tag
         {...ariaProps}
         {...dataProps}
-        className={classnames(cardCss, globalProps(props), className)}
+        className={classnames(cardCss, globalProps(props, { padding }), className)}
     >
       {subComponentTags('Header')}
       {nonHeaderChildren}

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

@@ -4,7 +4,9 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-    <%= content.presence %>
+  <%= 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? %>
 <% end %>
 
 

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

@@ -28,6 +28,102 @@ 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,99 +4,7 @@ module Playbook
   module PbCard
     class CardBody < Playbook::KitBase
       def classname
-        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
+        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: " ")
       end
     end
   end

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

@@ -1,9 +1,6 @@
 @import "./tokens/colors";
-@import "./tokens/spacing";
 
 [class^=pb_collapsible_kit] {
-  padding: $space_md;
-
   .toggle-content {
     display: none;
     height: 0;
@@ -21,11 +18,3 @@
       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,6 +19,7 @@ type CollapsibleProps = {
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   iconSize?: typeof IconSizes
   id?: string,
+  padding?: string,
 }
 
 const useCollapsible = (initial = false) => {
@@ -39,6 +40,7 @@ const Collapsible = ({
   iconColor = 'default',
   iconSize,
   id,
+  padding = 'md',
   ...props
 }: CollapsibleProps) => {
   const [isCollapsed, collapse] = useCollapsible(collapsed)
@@ -57,7 +59,7 @@ const Collapsible = ({
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_collapsible_kit'),
-    globalProps(props),
+    globalProps(props, { padding }),
     className
   )
 

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

@@ -9,16 +9,18 @@ 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)
+  const contentSpacing = globalProps(props, { padding })
 
   return (
     <AnimateHeight

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

@@ -31,6 +31,7 @@ const colorMap = {
 type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
+  padding?: string,
   cursor?: string,
 
 }
@@ -62,11 +63,12 @@ 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 })
+  const mainSpacing = globalProps(props, { cursor, padding })
 
   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,18 +263,6 @@
 	}	
 }
 
-[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, className } = props
+  const { children, padding = "sm", className } = props
   const bodyCSS = buildCss("dialog_body")
-  const bodySpacing = globalProps(props)
+  const bodySpacing = globalProps(props, { padding })
 
   return (
     <div className={classnames(bodyCSS, bodySpacing, className)}>

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

@@ -25,13 +25,16 @@ 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)
+  const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
 
   return (
     <>

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

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