playbook_ui 15.4.0.pre.alpha.PLAY2627requiredmultiselectdropdownbug12416 → 15.4.0.pre.alpha.PLAY2627requiredmultiselectdropdownbug12442

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ccec73ff9da24371018279eed782db5b535c23fa452eed663389ef339ec64257
-  data.tar.gz: 16ed40f32b267d471031f73b72b48b5beaaa8f872d6e1923e2248c6c72bb234f
+  metadata.gz: e497d506916a6a8c97612016445cb48518fdd40aa15707f40be73898a84cee44
+  data.tar.gz: 8d77efa786d47b2c5ee169e9b898c7d2b7e3202c8a63f728d7b73f93e4427244
 SHA512:
-  metadata.gz: 68d0361d59daead7dc1a5d010dc5a07ca80ea2b268d1bdb6220242b41973f7a80432e735ada36f12e3dbc6585bf6b41728c1a026a3f1403fc38a184720275877
-  data.tar.gz: f7084f65225e083853a288d1323d80f9781cb794f432064839a535e26087cad177fa4de396cd6de13082099c945df5e7111f7b361b4c3e87d0cd98f6b2cdc77d
+  metadata.gz: 224b7a7ea3edd7d9fed655c2a4331cc314ac080a2705bcc492569d8a7d96912b767de9d429a2b7c3374f791e67fef5d61f58e17add18c298ea9686124ae7a08f
+  data.tar.gz: ccd0e13f740be905e8851024c12b831759b2364fd96c4f39022527403daaa96ef31ab71ed79c4dec90a339362953a141e175249ec1096cd3ba6b6fe12d2b30b5

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -17,6 +17,7 @@ type DateTimeProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: "sm" | "md",
+  showCurrentYear?: boolean,
   showDayOfWeek: boolean,
   showIcon?: boolean,
   timeZone?: string
@@ -32,6 +33,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
     showDayOfWeek = false,
     datetime,
     id,
+    showCurrentYear = false,
     showIcon = false,
     size = 'md',
     timeZone = 'America/New_York',
@@ -59,6 +61,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
           vertical="baseline"
       >
         <FormattedDate
+            showCurrentYear={showCurrentYear}
             showDayOfWeek={showDayOfWeek}
             size={size}
             value={datetime}

data/app/pb_kits/playbook/pb_date_time/date_time.html.erb

@@ -9,6 +9,7 @@
         dark: object.dark,
         date: object.date,
         show_day_of_week: object.show_day_of_week,
+        show_current_year: object.show_current_year,
         size: object.size,
         timezone: object.timezone,
       }) %>

data/app/pb_kits/playbook/pb_date_time/date_time.rb

@@ -16,6 +16,7 @@ module Playbook
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :show_icon, type: Playbook::Props::Boolean, default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean, default: false
+      prop :show_current_year, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_date_time_kit", align)

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_current_year: true
+}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import DateTime from '../_date_time'
+
+const DateTimeShowCurrentYear = (props) => (
+  <div>
+    <DateTime
+        datetime={new Date()}
+        showCurrentYear
+        {...props}
+    />
+  </div>
+)
+
+export default DateTimeShowCurrentYear

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md

@@ -0,0 +1 @@
+Pass in `show_current_year` to show this date's current year.

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md

@@ -0,0 +1 @@
+Pass in `showCurrentYear` to show this date's current year.

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

@@ -1,14 +1,16 @@
 examples:
-  
+
   rails:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+  - date_time_show_current_year: Show Current Year
 
   react:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+  - date_time_show_current_year: Show Current Year
 
   swift:
   - date_time_default_swift: Default

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

@@ -1,3 +1,4 @@
 export { default as DateTimeDefault } from './_date_time_default.jsx'
 export { default as DateTimeAlign } from './_date_time_align.jsx'
 export { default as DateTimeSize } from './_date_time_size.jsx'
+export { default as DateTimeShowCurrentYear } from './_date_time_show_current_year.jsx'

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -17,6 +17,7 @@ type DateTimeStackedProps = {
   datetime: Date,
   dark: boolean,
   timeZone?: string,
+  showCurrentYear?: boolean,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
@@ -28,6 +29,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     dark,
     htmlOptions = {},
     timeZone = 'America/New_York',
+    showCurrentYear = false,
   } = props
 
   const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
@@ -46,6 +48,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
             bold
             dark={dark}
             date={date || datetime}
+            showCurrentYear={showCurrentYear}
         />
       </FlexItem>
 

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -1,8 +1,8 @@
-<%= pb_content_tag do %>
+  <%= pb_content_tag do %>
 
   <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>
-        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
+        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark, show_current_year: object.show_current_year }) %>
       <% end %>
       <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -10,6 +10,8 @@ module Playbook
                   default: false
       prop :timezone, type: Playbook::Props::String,
                       default: "America/New_York"
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
 
       def date_time_value
         date || date_time

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -41,3 +41,36 @@ test('renders time in timezone', () => {
   const kit = renderKit(DateTimeStacked, props)
   expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
 })
+
+test('renders current year when showCurrentYear is true', () => {
+  const currentYearDate = new Date()
+  const currentYear = currentYearDate.getFullYear()
+  
+  const kit = renderKit(DateTimeStacked, {
+    data: { testid: 'datetimestacked-current-year' },
+    datetime: currentYearDate,
+    dark: false,
+    showCurrentYear: true,
+  })
+  expect(kit).toHaveTextContent(currentYear.toString())
+})
+
+test('hides current year by default', () => {
+  const currentYearDate = new Date()
+  const currentYear = currentYearDate.getFullYear()
+  
+  const kit = renderKit(DateTimeStacked, {
+    data: { testid: 'datetimestacked-hide-year' },
+    datetime: currentYearDate,
+    dark: false,
+  })
+ 
+  const yearElement = kit.querySelector('.pb_caption_kit_xs')
+
+  if (yearElement) {
+    expect(yearElement.textContent).not.toBe(currentYear.toString())
+  } else {
+
+    expect(yearElement).toBeNull()
+  }
+})

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true }) %>
+<br>
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true, timezone: "America/Denver" }) %>
+

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import DateTimeStacked from '../_date_time_stacked'
+
+const DateTimeStackedShowCurrentYear = (props) => (
+  <div>
+    <DateTimeStacked
+        datetime={new Date()}
+        showCurrentYear
+        {...props}
+    />
+    <br />
+    <DateTimeStacked
+        datetime={new Date()}
+        showCurrentYear
+        timeZone="America/Denver"
+        {...props}
+    />
+  </div>
+);
+
+export default DateTimeStackedShowCurrentYear;

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date Time Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.

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

@@ -2,9 +2,11 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-  
+  - date_time_stacked_show_current_year: Show Current Year
+
   react:
   - date_time_stacked_default: Default
+  - date_time_stacked_show_current_year: Show Current Year
   
   swift:
   - date_time_stacked_default_swift: Default

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

@@ -1 +1,2 @@
 export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
+export { default as DateTimeStackedShowCurrentYear } from './_date_time_stacked_show_current_year.jsx'

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -33,6 +33,8 @@ export default class PbDropdown extends PbEnhancedElement {
     this.formPillProps = this.element.dataset.formPillProps
       ? JSON.parse(this.element.dataset.formPillProps)
       : {};
+    const baseInput = this.element.querySelector(DROPDOWN_INPUT);
+    this.wasOriginallyRequired = baseInput && baseInput.hasAttribute("required");
     this.setDefaultValue();
     this.bindEventListeners();
     this.bindSearchInput();
@@ -587,7 +589,9 @@ export default class PbDropdown extends PbEnhancedElement {
     // for multi_select, for each selectedOption, create a hidden input
     const name = baseInput.getAttribute("name");
     this.selectedOptions.forEach((raw) => {
-      const id = JSON.parse(raw).id;
+      const optionData = JSON.parse(raw);
+      // Use id if available, otherwise fall back to value
+      const id = optionData.id || optionData.value;
       const inp = document.createElement("input");
       inp.type = "hidden";
       inp.name = name;
@@ -595,7 +599,19 @@ export default class PbDropdown extends PbEnhancedElement {
       inp.dataset.generated = "true";
       baseInput.insertAdjacentElement("afterend", inp);
     });
-    baseInput.value = "";
+    
+    // For multi-select, remove required from base input when there are selections
+    // The generated inputs handle the form submission with actual values
+    // Restore required attribute when there are no selections (if it was originally required)
+    if (this.selectedOptions.size > 0) {
+      baseInput.value = "";
+      baseInput.removeAttribute("required");
+    } else {
+      baseInput.value = "";
+      if (this.wasOriginallyRequired) {
+        baseInput.setAttribute("required", "");
+      }
+    }
   }
 
   handleBackspaceClear() {

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

@@ -119,21 +119,22 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-left-shadow');
                     }
 
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
+                    const headerWidth = (header as HTMLElement).offsetWidth;
+                    accumulatedWidth += headerWidth;
 
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+                    cells.forEach((cell) => {
+                        cell.classList.add('sticky');
+                        (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}px`;
 
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border-right');
-                        cell.classList.remove('sticky-left-shadow');
-                    } else {
-                        cell.classList.remove('with-border-right');
-                        cell.classList.add('sticky-left-shadow');
-                    }
-                });
+                        if (!isLastColumn) {
+                            cell.classList.add('with-border-right');
+                            cell.classList.remove('sticky-left-shadow');
+                        } else {
+                            cell.classList.remove('with-border-right');
+                            cell.classList.add('sticky-left-shadow');
+                        }
+                    });
+                }
             });
         };
 
@@ -170,21 +171,22 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-right-shadow');
                     }
 
-                    accumulatedWidth += (header as HTMLElement).offsetWidth;
-                }
+                    const headerWidth = (header as HTMLElement).offsetWidth;
+                    accumulatedWidth += headerWidth;
 
-                cells.forEach((cell) => {
-                    cell.classList.add('sticky');
-                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+                    cells.forEach((cell) => {
+                        cell.classList.add('sticky');
+                        (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
 
-                    if (!isLastColumn) {
-                        cell.classList.add('with-border-left');
-                        cell.classList.remove('sticky-right-shadow');
-                    } else {
-                        cell.classList.remove('with-border-left');
-                        cell.classList.add('sticky-right-shadow');
-                    }
-                });
+                        if (!isLastColumn) {
+                            cell.classList.add('with-border-left');
+                            cell.classList.remove('sticky-right-shadow');
+                        } else {
+                            cell.classList.remove('with-border-left');
+                            cell.classList.add('sticky-right-shadow');
+                        }
+                    });
+                }
             });
         };
 

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -213,10 +213,24 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
-  return keys.map((size: Sizes) => {
-    const propValue: string = typeof(prop[size]) === 'string' ? camelToSnakeCase(prop[size]) : prop[size]
-    return `${classPrefix}_${size}_${propValue}`
-  }).join(" ")
+  const screenSizeValues = ["xs", "sm", "md", "lg", "xl"]
+  let classResult = ''
+  
+  // Handle default value separately (generates base class without size prefix)
+  if (prop.default !== undefined) {
+    const defaultValue: string = typeof(prop.default) === 'string' ? camelToSnakeCase(prop.default) : prop.default
+    classResult += `${classPrefix}_${defaultValue} `
+  }
+  
+  // Handle responsive sizes (generates classes with size prefix)
+  keys.forEach((key) => {
+    if (screenSizeValues.includes(key)) {
+      const propValue: string = typeof(prop[key]) === 'string' ? camelToSnakeCase(prop[key]) : prop[key]
+      classResult += `${classPrefix}_${key}_${propValue} `
+    }
+  })
+  
+  return classResult.trim()
 }
 
 //reusable function for top, bottom, right and left props
@@ -436,9 +450,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof zIndexEntry[1] == "number") {
           css += `z_index_${zIndexEntry[1]} `
         } else if (typeof zIndexEntry[1] == "object") {
-          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
-            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
+          const responsiveObj: {[key: string]: string} = {}
+          Object.entries(zIndexEntry[1]).forEach(([key, value]) => {
+            responsiveObj[key] = value.toString()
           })
+          css += getResponsivePropClasses(responsiveObj, 'z_index')
         } else if (zIndexEntry[1] === 'max') {
           css += `z_index_max `
         }
@@ -463,9 +479,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
         if (typeof displayEntry[1] == "string") {
           css += `display_${displayEntry[1]} `
         } else if (typeof displayEntry[1] == "object") {
-          Object.entries(displayEntry[1]).forEach((displayObj) => {
-            css += `display_${displayObj[0]}_${displayObj[1]} `
+          const responsiveObj: {[key: string]: string} = {}
+          Object.entries(displayEntry[1]).forEach(([key, value]) => {
+            responsiveObj[key] = typeof value === 'string' ? value : value.toString()
           })
+          css += getResponsivePropClasses(responsiveObj, 'display')
         } else {
           ' '
         }

data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        alignContent={{ default: "spaceAround", xs: "center", sm: "spaceAround", md: "center" }}
+        data={{ testid: testId }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`align_content_space_around`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`align_content_xs_center`)
+  expect(kit).toHaveClass(`align_content_sm_space_around`)
+  expect(kit).toHaveClass(`align_content_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js

@@ -34,3 +34,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        alignItems={{ default: "end", xs: "center", sm: "end", md: "center" }}
+        data={{ testid: testId }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`align_items_end`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`align_items_xs_center`)
+  expect(kit).toHaveClass(`align_items_sm_end`)
+  expect(kit).toHaveClass(`align_items_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        alignSelf={{ default: "end", xs: "center", sm: "end", md: "center" }}
+        data={{ testid: testId }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`align_self_end`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`align_self_xs_center`)
+  expect(kit).toHaveClass(`align_self_sm_end`)
+  expect(kit).toHaveClass(`align_self_md_center`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -36,3 +36,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        display={{ default: "none", xs: "block", sm: "none", md: "block" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`display_none`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`display_xs_block`)
+  expect(kit).toHaveClass(`display_sm_none`)
+  expect(kit).toHaveClass(`display_md_block`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js

@@ -62,3 +62,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flex={{ default: "3", xs: "1", sm: "3", md: "1" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_3`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_xs_1`)
+  expect(kit).toHaveClass(`flex_sm_3`)
+  expect(kit).toHaveClass(`flex_md_1`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexDirection={{ default: "column", xs: "row", sm: "column", md: "row" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_direction_column`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_direction_xs_row`)
+  expect(kit).toHaveClass(`flex_direction_sm_column`)
+  expect(kit).toHaveClass(`flex_direction_md_row`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js

@@ -33,3 +33,21 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexGrow={{ default: 1, xs: 0, sm: 1, md: 0 }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_grow_1`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_grow_xs_0`)
+  expect(kit).toHaveClass(`flex_grow_sm_1`)
+  expect(kit).toHaveClass(`flex_grow_md_0`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js

@@ -33,3 +33,21 @@ test('Global Props: Returns ordinal suffixed class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexShrink={{ default: 0, xs: 1, sm: 0, md: 1 }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_shrink_0`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_shrink_xs_1`)
+  expect(kit).toHaveClass(`flex_shrink_sm_0`)
+  expect(kit).toHaveClass(`flex_shrink_md_1`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        flexWrap={{ default: "wrap", xs: "nowrap", sm: "wrap", md: "nowrap" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`flex_wrap_wrap`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`flex_wrap_xs_nowrap`)
+  expect(kit).toHaveClass(`flex_wrap_sm_wrap`)
+  expect(kit).toHaveClass(`flex_wrap_md_nowrap`)
+})

data/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js

@@ -35,3 +35,21 @@ test('Global Props: returns proper class name', () => {
     })
   }
 })
+
+test('Global Props: returns proper class name with default key', () => {
+  const testId = `${testSubject}-default-responsive`
+  render(
+    <Body
+        data={{ testid: testId }}
+        justifyContent={{ default: "spaceBetween", xs: "start", sm: "spaceBetween", md: "start" }}
+        text="Hi"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  // Should have base class for default value
+  expect(kit).toHaveClass(`justify_content_space_between`)
+  // Should have responsive classes for screen sizes
+  expect(kit).toHaveClass(`justify_content_xs_start`)
+  expect(kit).toHaveClass(`justify_content_sm_space_between`)
+  expect(kit).toHaveClass(`justify_content_md_start`)
+})