playbook_ui 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4903 → 14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5120

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d7b3f96db16633e2d11c150f69e673e06c4b00563a4443b4488b3c70c076e545
-  data.tar.gz: 1d7bd6f688a3bab9fc3dfdb1865bffc92a88258164a35f99d32ac658222b7a1d
+  metadata.gz: da8a7920b5da846030bda1d8bcb3c18037bf19595c200269f9db7dd51764c766
+  data.tar.gz: 8a07e7da151e04fc89634772bd5ec1cd1ef27a8aef0b69858df3063485701a6f
 SHA512:
-  metadata.gz: f7651cee71bffcb59d7fc86fd04ef361acc68620d3a16ecdad34886e240d8447983a06ae0b150c146508a28166bc1efce89a73f5910eeae6482e15069d52bf77
-  data.tar.gz: 13dda38a57028c9134c8398b2aec92ca4bb50ec6f51db65a1232d3cb704a2113cb7d7a1a6e4a2b1bd589bc4aeff821c293ae206c5202228ed65e8adc39860496
+  metadata.gz: 39185b19e732294072ed4b0f2b331d12a6f897f8803b46651af31b95589087da685e8a2f72f1d5ae93b80159176d406d154fb35751fab93fc5fe3a96ca51cf07
+  data.tar.gz: bfd1b02747edb49bfafe7601fd23bc6e38c898439f7e85b363920a46344468a06da31bd776f4a51c5670e393c28523d65d636fb089ded77314b84c55b65f4c4a

data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx

@@ -3,18 +3,13 @@ import React from "react"
 //CollapsibleTrail component
 const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
   const style: { [key: string]: string | number } = {
-    position: "absolute",
     left: `${leftOffset}em`,
-    top: 0,
-    bottom: 0,
-    width: "2px",
-    backgroundColor: "#E4E8F0",
   }
 
   return (
     <div 
         className="collapsible-trail" 
-        style={style} 
+        style={style}
     />
   )
 }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -110,9 +110,17 @@
     height: auto;
   }
 
+  .collapsible-trail {
+    background-color: $border_light;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+  }
+
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {  
-    &[class*="table-responsive-scroll"] {
+    &[class*="advanced-table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
                   -1px 0 0 0px $border_light;
@@ -150,7 +158,7 @@
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
-    &[class*="table-responsive-scroll"] {
+    &[class*="advanced-table-responsive-scroll"] {
       overflow-x: visible;
     }
   }
@@ -200,7 +208,7 @@
     }
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
-      &[class*="table-responsive-scroll"] {
+      &[class*="advanced-table-responsive-scroll"] {
         border-radius: 4px;
         box-shadow: 1px 0 0 0px $border_dark,
                     -1px 0 0 0px $border_dark;

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -240,7 +240,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
-    `table-responsive-${responsive}`,
+    `advanced-table-responsive-${responsive}`,
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -468,7 +468,7 @@ test("responsive prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
+  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-scroll")
 })
 
 test("responsive none prop functions as expected", () => {
@@ -483,7 +483,7 @@ test("responsive none prop functions as expected", () => {
   )
 
   const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
+  expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-none")
 })
 
 test("customRenderer prop functions as expected", () => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb

@@ -0,0 +1,36 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.md

@@ -0,0 +1 @@
+`collapsible_trail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.

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

@@ -2,6 +2,7 @@ examples:
   rails:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
 

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -14,14 +14,16 @@ module Playbook
                                      default: "header"
       prop :subrow_headers, type: Playbook::Props::Array,
                             default: []
+      prop :collapsible_trail, type: Playbook::Props::Boolean,
+                               default: true
 
       def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
         output = ActiveSupport::SafeBuffer.new
         is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
 
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1] }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth, collapsible_trail: collapsible_trail })
 
         if row[:children].present?
           output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -2,6 +2,14 @@
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
+                    <% if collapsible_trail && index.zero? %>
+                        <% (1..depth).each do |i| %>
+                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                            <% left_offset = i * 1.0 + additional_offset %>
+                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+                        <% end %>
+                    <% end %>
+
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -9,6 +9,8 @@ module Playbook
                                 default: []
       prop :row
       prop :depth
+      prop :collapsible_trail, type: Playbook::Props::Boolean,
+                               default: true
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -6,6 +6,14 @@
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag: "div", classname: object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
+                    <% if collapsible_trail && index.zero? %>
+                        <% (1..depth).each do |i| %>
+                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                            <% left_offset = i * 1.0 + additional_offset %>
+                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+                        <% end %>
+                    <% end %>
+
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb

@@ -12,6 +12,8 @@ module Playbook
                                      default: "header"
       prop :subrow_header, type: Playbook::Props::String,
                            default: ""
+      prop :collapsible_trail, type: Playbook::Props::Boolean,
+                               default: true
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx

@@ -1,66 +1,70 @@
 import React from 'react'
-
+import ReactDOMServer from 'react-dom/server'
 import BarGraph from '../_bar_graph'
+import Icon from '../../pb_icon/_icon'
+
+const chartData = [
+  {
+    name: 'Role',
+    data: [0, 200, 300, 654, 656],
+  },
+  {
+    name: 'Company',
+    data: [150, 524, 320, 440, 500],
+  },
+]
 
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  name: 'Manufacturing',
-  data: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
+const renderIcon = (iconName, color) => {
+  return ReactDOMServer.renderToStaticMarkup(
+  <Icon
+      color={color}
+      icon={iconName}
+  />)
+};
 
 const barGraphOptions = {
-  subtitle: {
-    text: "Overwritten subtitle",
-    style: {
-      color: "red"
-    }
+  yAxis: {
+    tickInterval: 5,
   },
   xAxis: {
-      labels: {
-          useHTML: true,
-          formatter: function() {
-              switch (this.value) {
-                  case 'Jan':
-                      return `<i class="far fa-apple-whole"></i> ${this.value}`
-                  case 'Feb':
-                      return `<i class="far fa-strawberry"></i> ${this.value}`
-                  case 'Mar':
-                      return `<i class="far fa-lemon"></i> ${this.value}`
-                  case 'Apr':
-                      return `<i class="far fa-pear"></i> ${this.value}`
-                  case 'May':
-                      return `<i class="far fa-peach"></i> ${this.value}`
-                  default:
-                      return ''
-              }
-          }
-      }
-  }
+    categories: ['1', '2', '3', '4', '5'],
+    labels: {
+      useHTML: true,
+      formatter: function () {
+        switch (this.value) {
+          case '1':
+            return `${renderIcon('frown', 'error')}`;
+          case '2':
+            return `${renderIcon('frown', 'warning')}`;
+          case '3':
+            return `${renderIcon('frown-open', 'neutral')}`;
+          case '4':
+            return `${renderIcon('smile', 'category_7')}`;
+          case '5':
+            return `${renderIcon('smile-beam', 'success')}`;
+          default:
+            return ''
+        }
+      },
+      style: {
+        fontSize: '1.4em',
+      },
+      y: 42,
+    },
+  },
+  legend: {
+    itemMarginTop: 62,
+  },
 }
 
-const BarGraphCustom = (props) => (
+const BarGraphCustom = () => (
   <div>
     <BarGraph
-        axisTitle="Number of Employees"
         chartData={chartData}
         customOptions={barGraphOptions}
-        id="bar-custom"
-        subTitle="Subtitle to replace"
+        id="happiness-dashboard"
+        legend
         title="Bar Graph with Custom Overrides"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb

@@ -1,49 +1,42 @@
 <% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
+  name: 'Role',
+  data: [0, 200, 300, 654, 656],
 }, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
+  name: 'Company',
+  data: [150, 524, 320, 440, 500],
 }] %>
 
 <% bar_graph_options = {
-    customOptions: {
-        subtitle: {
-            text: "Overwritten subtitle",
-            style: {
-                color: "red"
-            }
+  customOptions: {
+    yAxis: {
+      tickInterval: 5,
+    },
+    xAxis: {
+      categories: [
+        raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
+      ],
+      labels: {
+        useHTML: true,
+        sytle: {
+          fontSize: '1.4em',
         },
-        xAxis: {
-            categories: [
-                '<i class="far fa-apple-whole"></i> Jan',
-                '<i class="far fa-strawberry"></i> Feb',
-                '<i class="far fa-lemon"></i> Mar',
-                '<i class="far fa-pear"></i> Apr',
-                '<i class="far fa-peach"></i> May'
-            ],
-            labels: {
-                useHTML: true,
-            }
-        }
-    }
+        y: 42,
+      },
+    },
+    legend: {
+      itemMarginTop: 62,
+    },
+  } 
 } %>
 
 <%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
     chart_data: data,
     id: "bar-default",
-    y_axis_min: 0,
-    subtitle: 'Subtitle to replace',
+    legend: true,
     title: 'Bar Graph with Custom Overrides',
     custom_options: bar_graph_options
-}) %>
+}) %>

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

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
-import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
+import type { ProductColors, CategoryColors, BackgroundColors, StatusColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
 import Flex from '../pb_flex/_flex'
@@ -36,7 +36,7 @@ type CardPropTypes = {
 } & GlobalProps
 
 type CardHeaderProps = {
-  headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
+  headerColor?: BackgroundColors | ProductColors | CategoryColors | StatusColors | "none",
   headerColorStriped?: boolean,
   children: React.ReactChild[] | React.ReactChild,
   className?: string,
@@ -127,12 +127,12 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
   const Tag = tagOptions.includes(tag) ? tag : 'div'
-  
+
   return (
     <>
     {
       draggableItem ? (
-        <Draggable.Item dragId={dragId} 
+        <Draggable.Item dragId={dragId}
             key={dragId}
         >
         <Tag
@@ -140,14 +140,14 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             className={classnames(cardCss, globalProps(props), className)}
             {...restHtmlProps}
-            style={mergedStyles} 
+            style={mergedStyles}
         >
           {subComponentTags('Header')}
           {
             dragHandle ? (
               <Flex>
                 <span className="card_draggable_handle">
-                  <Icon 
+                  <Icon
                       icon="grip-dots-vertical"
                       paddingRight="xs"
                       verticalAlign="middle"
@@ -169,7 +169,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               className={classnames(cardCss, globalProps(props), className)}
               {...restHtmlProps}
-              style={mergedStyles} 
+              style={mergedStyles}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

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

@@ -24,7 +24,7 @@ $additional_colors: (
   "neutral_subtle": $neutral_subtle,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
-$pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);
+$pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $additional_colors), $category_colors), $status_colors);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -67,4 +67,24 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
+<% end %>
+
+<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success" }) do %>
+    <%= pb_rails("body", props: { text: "Success", dark: true }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error" }) do %>
+    <%= pb_rails("body", props: { text: "Error", dark: true }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -181,6 +181,56 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
+
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Status Colors"
+            />
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="success"
+                >
+                    <Body
+                        dark
+                        text="Success"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="error"
+                >
+                    <Body
+                        dark
+                        text="Error"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
         </>
     )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

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

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,6 +32,7 @@ type CollapsibleProps = {
   onClick?: ()=> void,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
 }
 
 const Collapsible = ({
@@ -47,8 +48,9 @@ const Collapsible = ({
   onIconClick,
   onClick,
   id,
+  tag = 'div',
   ...props
-}: CollapsibleProps): React.ReactElement => {
+}: CollapsibleProps & GlobalProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
@@ -76,9 +78,12 @@ const Collapsible = ({
     className
   )
   const dynamicInlineProps = globalInlineProps(props)
+
+  const Tag: React.ReactElement | any = `${tag}`;
+
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
-      <div
+      <Tag
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
@@ -96,7 +101,7 @@ const Collapsible = ({
           <CollapsibleContent {...contentProps}>
             {contentChildren}
           </CollapsibleContent>
-      </div>
+      </Tag>
     </CollapsibleContext.Provider>
   )
 }

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

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { useContext, useRef, useEffect } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 import { hideElement, showElement } from '../_helper_functions'
 
 import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps): React.ReactElement => {
+}: CollapsibleContentProps & GlobalProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)