playbook_ui 15.4.0.pre.alpha.PLAY2627requiredmultiselectdropdownbug12442 → 15.4.0.pre.alpha.PLAY2640typeaheadmultikitbadgespacing12415

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e497d506916a6a8c97612016445cb48518fdd40aa15707f40be73898a84cee44
-  data.tar.gz: 8d77efa786d47b2c5ee169e9b898c7d2b7e3202c8a63f728d7b73f93e4427244
+  metadata.gz: 3a79f50c7005e51f9647544f9ecad8561dd0eba490d7392867d247cc26152d57
+  data.tar.gz: 4d68e0342ca547569a384c873e5e4f9e8b35242c6180b37a3a6a2e107bbcd457
 SHA512:
-  metadata.gz: 224b7a7ea3edd7d9fed655c2a4331cc314ac080a2705bcc492569d8a7d96912b767de9d429a2b7c3374f791e67fef5d61f58e17add18c298ea9686124ae7a08f
-  data.tar.gz: ccd0e13f740be905e8851024c12b831759b2364fd96c4f39022527403daaa96ef31ab71ed79c4dec90a339362953a141e175249ec1096cd3ba6b6fe12d2b30b5
+  metadata.gz: 53a825e51f1fdd056c2a818f8ebff66256d82ef617d8ccdb206a7ee221c4b882c55a7513d91773b2083e109e8e577a8ebaf4f82eb655f99ccc3b041ee056d997
+  data.tar.gz: 2638946f9c1d16561f5b6a4b06465667fe79c590c3fc4e0ba63ddfee96986e7c48293358fab4d0c20aba9deb51bb40f2922eb575971913a596cec78b944446d3

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

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

@@ -1,16 +1,14 @@
 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,4 +1,3 @@
 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,7 +17,6 @@ type DateTimeStackedProps = {
   datetime: Date,
   dark: boolean,
   timeZone?: string,
-  showCurrentYear?: boolean,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
@@ -29,7 +28,6 @@ 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))
@@ -48,7 +46,6 @@ 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, show_current_year: object.show_current_year }) %>
+        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
       <% 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,8 +10,6 @@ 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,36 +41,3 @@ 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/example.yml

@@ -2,11 +2,9 @@ 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,2 +1 @@
 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,8 +33,6 @@ 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();
@@ -358,6 +356,17 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   clearFormValidation(input) {
+    if (input.checkValidity()) {
+      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
+      dropdownWrapperElement.classList.remove("error");
+
+      const errorLabelElement = dropdownWrapperElement.querySelector(
+        ".pb_body_kit_negative"
+      );
+      if (errorLabelElement) {
+        errorLabelElement.remove();
+      }
+    }
     if (this.isMultiSelect) {
       if (this.selectedOptions.size > 0) {
         const dropdownWrapperElement = input.closest(".dropdown_wrapper");
@@ -368,19 +377,6 @@ export default class PbDropdown extends PbEnhancedElement {
         if (errorLabelElement) {
           errorLabelElement.remove();
         }
-        return;
-      }
-    }
-    
-    if (input.checkValidity()) {
-      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
-      dropdownWrapperElement.classList.remove("error");
-
-      const errorLabelElement = dropdownWrapperElement.querySelector(
-        ".pb_body_kit_negative"
-      );
-      if (errorLabelElement) {
-        errorLabelElement.remove();
       }
     }
   }
@@ -589,9 +585,7 @@ 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 optionData = JSON.parse(raw);
-      // Use id if available, otherwise fall back to value
-      const id = optionData.id || optionData.value;
+      const id = JSON.parse(raw).id;
       const inp = document.createElement("input");
       inp.type = "hidden";
       inp.name = name;
@@ -599,19 +593,7 @@ export default class PbDropdown extends PbEnhancedElement {
       inp.dataset.generated = "true";
       baseInput.insertAdjacentElement("afterend", inp);
     });
-    
-    // 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", "");
-      }
-    }
+    baseInput.value = "";
   }
 
   handleBackspaceClear() {

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

@@ -119,22 +119,21 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-left-shadow');
                     }
 
-                    const headerWidth = (header as HTMLElement).offsetWidth;
-                    accumulatedWidth += headerWidth;
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
 
-                    cells.forEach((cell) => {
-                        cell.classList.add('sticky');
-                        (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}px`;
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}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');
+                    }
+                });
             });
         };
 
@@ -171,22 +170,21 @@ const Table = (props: TableProps): React.ReactElement => {
                         header.classList.add('sticky-right-shadow');
                     }
 
-                    const headerWidth = (header as HTMLElement).offsetWidth;
-                    accumulatedWidth += headerWidth;
+                    accumulatedWidth += (header as HTMLElement).offsetWidth;
+                }
 
-                    cells.forEach((cell) => {
-                        cell.classList.add('sticky');
-                        (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
+                cells.forEach((cell) => {
+                    cell.classList.add('sticky');
+                    (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}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/pb_typeahead/_typeahead.scss

@@ -161,6 +161,10 @@
   .typeahead-plus-icon {
     color: $text_lt_lighter;
   }
+  .pb_badge_kit_primary {
+    margin-bottom: 2px;
+    margin-top: 2px;
+  }
   .pb_badge_kit_primary span {
     line-height: 16.5px;
     letter-spacing: normal;

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -62,6 +62,7 @@ const MultiValue = (props: Props) => {
             className={pillClassName}
             closeProps={removeProps}
             htmlOptions={{onKeyDown:handleKeyDown}}
+            marginRight="xs"
             removeIcon
             tabIndex={0}
             text={label}

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

@@ -213,24 +213,10 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
-  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()
+  return keys.map((size: Sizes) => {
+    const propValue: string = typeof(prop[size]) === 'string' ? camelToSnakeCase(prop[size]) : prop[size]
+    return `${classPrefix}_${size}_${propValue}`
+  }).join(" ")
 }
 
 //reusable function for top, bottom, right and left props
@@ -450,11 +436,9 @@ 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") {
-          const responsiveObj: {[key: string]: string} = {}
-          Object.entries(zIndexEntry[1]).forEach(([key, value]) => {
-            responsiveObj[key] = value.toString()
+          Object.entries(zIndexEntry[1]).forEach((zIndexObj) => {
+            css += `z_index_${zIndexObj[0]}_${zIndexObj[1]} `
           })
-          css += getResponsivePropClasses(responsiveObj, 'z_index')
         } else if (zIndexEntry[1] === 'max') {
           css += `z_index_max `
         }
@@ -479,11 +463,9 @@ 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") {
-          const responsiveObj: {[key: string]: string} = {}
-          Object.entries(displayEntry[1]).forEach(([key, value]) => {
-            responsiveObj[key] = typeof value === 'string' ? value : value.toString()
+          Object.entries(displayEntry[1]).forEach((displayObj) => {
+            css += `display_${displayObj[0]}_${displayObj[1]} `
           })
-          css += getResponsivePropClasses(responsiveObj, 'display')
         } else {
           ' '
         }

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

@@ -35,21 +35,3 @@ 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,21 +34,3 @@ 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,21 +35,3 @@ 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,21 +36,3 @@ 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,21 +62,3 @@ 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,21 +35,3 @@ 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,21 +33,3 @@ 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,21 +33,3 @@ 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,21 +35,3 @@ 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,21 +35,3 @@ 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`)
-})