playbook_ui 12.30.1.pre.alpha.PLAY906multilevelselectedidsprop917 → 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 404d26f3703a426ecde67500a1798f2813ae70c028e98ddfdd7e8f8d80105d8c
-  data.tar.gz: 64eb45d4f46d4961bd448ea55a5fae0de8b8a1ee6a30ba4dcd930d8b8062d82a
+  metadata.gz: 34a695910f67fbd8f8a01279fe53bcfd4115ca6fc419a2a4f598b48464ade926
+  data.tar.gz: d17f2e8534379076372aa29bcf3daadbb83acc5fc47bb5be5bd3ff31a2541461
 SHA512:
-  metadata.gz: 4d764ae50195612ea62e69302bea613063a6dbc42311320b044a41a198b98de8fd5a018a4eceb9ec703d230cd7a638e62e80bfc91a1dd75f9e8c8dc58f86468f
-  data.tar.gz: efb6027ee7c683ba70cb59aa19410dc1f5d0c488558e40476a21a818b50276781a70d16e5a57a42548062a4cb16f2b5f01508a9f29c0a29fd3372b38ca415bd0
+  metadata.gz: 82adeb777f4240ec21972169b4866a1b857597d02f63c30859b30e3a407abdd62427807e837beef23780136a9002c01513cc6478ca0c023c8fc5c564ea3ac52f
+  data.tar.gz: fdc73b9b2eed6973de5a14011ce0240cf3c84fcff6e9f8e454ceecf15de721a974958d349803d6657302b682cf8ed64ac4a1f87f97971f818c2607a20ce9b012

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_multi_level_select/_helper_functions.tsx

@@ -135,7 +135,7 @@ export const recursiveCheckParent = (
   return data;
 };
 
-export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
+export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
   let expandedItems: any[] = [];
 
   const traverse = (items: string | any[], ancestors: any[] = []) => {
@@ -146,9 +146,6 @@ export const getExpandedItems = (treeData: { [key: string]: string }[], selected
       if (item.expanded) {
         expandedItems.push(item.id);
       }
-      if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
-        expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
-      }
       if (Array.isArray(item.children)) {
         const hasCheckedChildren = item.children.some(
           (child: { [key: string]: string }) => child.checked

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -28,7 +28,6 @@ type MultiLevelSelectProps = {
   returnAllSelected?: boolean
   treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
-  selectedIds?: string[]
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -42,7 +41,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     returnAllSelected = false,
     treeData,
     onSelect = () => {},
-    selectedIds
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -66,14 +64,14 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   //state for return for default
   const [defaultReturn, setDefaultReturn] = useState([])
   // Get expanded items from treeData.
-  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
+  const initialExpandedItems = getExpandedItems(treeData);
   // Initialize state with expanded items.
   const [expanded, setExpanded] = useState(initialExpandedItems);
 
 
   useEffect(() => {
-    setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
-  }, [treeData, selectedIds])
+    setFormattedData(addCheckedAndParentProperty(treeData))
+  }, [treeData])
 
   useEffect(() => {
     if (returnAllSelected) {
@@ -162,7 +160,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
-    selectedIds: string[],
     parent_id: string = null,
     depth: number = 0,
   ) => {
@@ -172,7 +169,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
-        checked: selectedIds && selectedIds.length && selectedIds.includes(item.id),
         parent_id,
         depth,
       }
@@ -183,7 +179,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
             : item.children
         newItem.children = addCheckedAndParentProperty(
           children,
-          selectedIds,
           newItem.id,
           depth + 1
         )

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

@@ -2,11 +2,9 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   
   react:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
-  - multi_level_select_selected_ids: Selected Ids
   

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

@@ -1,3 +1,2 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
-export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -9,8 +9,6 @@ module Playbook
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
-      prop :selected_ids, type: Playbook::Props::Array,
-                          default: []
       prop :input_display, type: Playbook::Props::Enum,
                            values: %w[pills none],
                            default: "pills"
@@ -26,7 +24,6 @@ module Playbook
           name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
-          selectedIds: selected_ids,
         }
       end
     end