playbook_ui 14.25.0.pre.alpha.testingcss9700 → 14.25.0.pre.alpha.testingcss9751

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -1,5 +1,5 @@
-[class^='pb_file_upload_kit'] {
-  [class^='pb_card_kit'] {
+.pb_file_upload_kit {
+  .pb_card_kit_deselected_border_radius_md {
     border: 1px #ccc dashed;
     text-align: center;
   }
@@ -9,22 +9,33 @@
     border: none;
     width: 0;
   }
-  &.error {
-    [class^='pb_card_kit'] {
+  &.error,
+  &.pb_file_upload_kit_error {
+    .pb_card_kit_deselected_border_radius_md {
       border-color: $error;
     }
-    [class^='pb_body_kit'][status="negative"] {
+    .pb_body_kit_negative {
       margin-top: $space_xs;
     }
   }
 }
 
-.dark [class*='pb_file_upload_kit'] {
-  [class*='pb_card_kit'] {
+.pb_file_upload_kit_error {
+  ::file-selector-button {
+    visibility: hidden;
+    padding: 0;
+    border: none;
+    width: 0;
+  }
+}
+
+.dark .pb_file_upload_kit {
+  .pb_card_kit_deselected_border_radius_md {
     border: 1px $text_dk_lighter dashed;
   }
-  &.error {
-    [class^='pb_card_kit'] {
+  &.error,
+  &.pb_file_upload_kit_error {
+    .pb_card_kit_deselected_border_radius_md {
       border-color: $error_dark;
     }
   }

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -2,7 +2,7 @@
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label
           for="upload-<%= object.id %>"
-          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
+          class="pb_button_kit pb_button_secondary pb_button_inline pb_button_enabled <%= 'dark' if object.dark %>"
         >
           <%= "#{object.label}" %>
         </label>

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -6,7 +6,7 @@
     padding: 0 $space_sm !important;
   }
 
-  [class^=pb_button_kit][class*=_link] {
+  .pb_button_kit.pb_button_link {
     flex-shrink:0;
     padding: 0 $space_xs !important;
     [id^="sort"] {
@@ -14,19 +14,19 @@
     }
   }
 
-  [class^=pb_card_body_kit][class*=_md] {
+  .pb_card_body_kit_md {
     padding: 0 !important;
   }
 }
 
-[class^=pb_filter_kit] {
-  [class^=pb_circle_icon_button_kit] {
+.pb_filter_kit {
+  .pb_circle_icon_button_kit {
     padding-left: $space_sm !important;
     padding-top: $space_sm !important;
     padding-bottom: $space_sm !important;
   }
 
-  [class^=pb-form] {
+  .pb-form {
     padding: $space_sm ;
   }
 
@@ -88,11 +88,11 @@
     z-index: 1;
   }
 
-  [class^=pb_collapsible_kit] .toggle-content.filter_section_collapsible {
+  .pb_collapsible_kit .toggle-content.filter_section_collapsible {
     padding-top: $space_xs !important;
   }
 
-  &[class*=dark] {
+  &.dark {
     .filters .filter {
     border-right: 1px solid $border_dark !important;
     }
@@ -103,4 +103,4 @@
       opacity:0;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss

@@ -13,7 +13,14 @@ $confirmation_toast_colors: (
   tip:          transparent,
 );
 
-[class^=pb_fixed_confirmation_toast_kit] {
+.pb_fixed_confirmation_toast_kit_success,
+.pb_fixed_confirmation_toast_kit_success_multi_line,
+.pb_fixed_confirmation_toast_kit_error,
+.pb_fixed_confirmation_toast_kit_error_multi_line,
+.pb_fixed_confirmation_toast_kit_neutral,
+.pb_fixed_confirmation_toast_kit_neutral_multi_line,
+.pb_fixed_confirmation_toast_kit_tip,
+.pb_fixed_confirmation_toast_kit_tip_multi_line {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -63,34 +70,63 @@ $confirmation_toast_colors: (
       right: $space_md;
     }
   }
+}
 
-  @each $color_name, $color_value in $confirmation_toast_colors {
-    &[class*=_#{$color_name}]  {
-      background: $color_value;
-      @if $color_name == "tip" {
-        @include gradient;
-      }
-
-      .pb_fixed_confirmation_toast_text {
-        color: $white;
-        margin: 0 $space_md 0 $space_md;
-        text-align: center;
-        white-space: pre;
-      }
-
-      .pb_icon {
-        color: $white;
-      }
-
-      &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
-        color: $white;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-        white-space: normal;
-        text-align: left;
-      }
-    }
+.pb_fixed_confirmation_toast_kit_neutral,
+.pb_fixed_confirmation_toast_kit_neutral_multi_line {
+  background: $text_lt_light;
+
+  .pb_icon {
+    color: $white !important;
+  }
+}
+
+.pb_fixed_confirmation_toast_text {
+    color: $white !important;
+    margin: 0 $space_md 0 $space_md !important;
+    text-align: center;
+    white-space: pre;
+  }
+
+.pb_fixed_confirmation_toast_kit_success,
+.pb_fixed_confirmation_toast_kit_success_multi_line {
+  background: $success;
+  .pb_icon {
+    color: $white !important;
+  }
+}
+
+.pb_fixed_confirmation_toast_kit_error,
+.pb_fixed_confirmation_toast_kit_error_multi_line {
+  background: $error;
+
+
+  .pb_icon {
+    color: $white !important;
   }
 }
+
+.pb_fixed_confirmation_toast_kit_tip,
+.pb_fixed_confirmation_toast_kit_tip_multi_line {
+  background: transparent;
+    .pb_icon {
+    color: $white !important;
+  }
+  @include gradient;
+}
+
+.pb_fixed_confirmation_toast_kit_success_multi_line,
+.pb_fixed_confirmation_toast_kit_error_multi_line,
+.pb_fixed_confirmation_toast_kit_neutral_multi_line,
+.pb_fixed_confirmation_toast_kit_tip_multi_line {
+  .pb_fixed_confirmation_toast_text {
+    color: $white !important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+    text-align: left;
+  }
+}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -55,8 +55,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
   const iconClass = icon && icon !== "none" ? "custom_icon" : ""
 
   const css = classnames(
-    `pb_fixed_confirmation_toast_kit_${status}`,
-    { _multi_line: multiLine },
+    `pb_fixed_confirmation_toast_kit_${status}${multiLine ? '_multi_line' : ''}`,
     { [`positioned_toast ${vertical} ${horizontal}`]: vertical && horizontal },
     `${iconClass}`,
     globalProps(props),

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -64,7 +64,7 @@ test("renders no icon when icon prop is 'none'", () => {
 
 test('renders correctly with multiLine prop', () => {
     const { container } = render(<FixedConfirmationToast multiLine />);
-    expect(container.querySelector('._multi_line')).toBeInTheDocument();
+    expect(container.querySelector('.pb_fixed_confirmation_toast_kit_neutral_multi_line')).toBeInTheDocument();
 });
 
 test('renders position when provided', () => {

data/app/pb_kits/playbook/pb_flex/_flex.scss

@@ -14,129 +14,135 @@ $gapTypes: (
   gap: gap,
   columnGap: column-gap,
   rowGap: row-gap
-  );
+);
 
-[class^=pb_flex_kit] {
+// Base flex kit
+.pb_flex_kit {
   display: flex;
   flex-wrap: nowrap;
+}
 
-  // Inline
-  &[class*=_inline] {
-    display: inline-flex;
-  }
+// Inline variant
+.pb_flex_kit_inline {
+  display: inline-flex;
+}
 
-  // Wrap
-  &[class*=_wrap] {
-    flex-wrap: wrap;
-  }
+// Wrap variant
+.pb_flex_kit_wrap {
+  flex-wrap: wrap;
+}
 
-  // Orientation
-  &[class*=_orientation_row] {
-    flex-direction: row;
+// Orientation
+.pb_flex_kit_orientation_row {
+  flex-direction: row;
+}
 
-    &[class*=_reverse] {
-      flex-direction: row-reverse;
-    }
-  }
+.pb_flex_kit_orientation_column {
+  flex-direction: column;
+}
 
-  &[class*=_orientation_column] {
-    flex-direction: column;
+// Reverse (works with orientation)
+.pb_flex_kit_orientation_row.pb_flex_kit_reverse {
+  flex-direction: row-reverse;
+}
 
-    &[class*=_reverse] {
-      flex-direction: column-reverse;
-    }
-  }
+.pb_flex_kit_orientation_column.pb_flex_kit_reverse {
+  flex-direction: column-reverse;
+}
 
-  // Alignment: Justify Content
-  &[class*=justify_content_left],
-  &[class*=justify_content_top],
-  &[class*=justify_content_start] {
-    justify-content: flex-start;
-    &[class*=_reverse] {
-      justify-content: flex-end;
-    }
-  }
+// Justify Content
+.pb_flex_kit_justify_content_left,
+.pb_flex_kit_justify_content_top,
+.pb_flex_kit_justify_content_start {
+  justify-content: flex-start;
+}
 
-  &[class*=justify_content_right],
-  &[class*=justify_content_bottom],
-  &[class*=justify_content_end] {
-    justify-content: flex-end;
-     &[class*=_reverse] {
-      justify-content: flex-start;
-    }
-  }
+.pb_flex_kit_justify_content_right,
+.pb_flex_kit_justify_content_bottom,
+.pb_flex_kit_justify_content_end {
+  justify-content: flex-end;
+}
 
-  &[class*=justify_content_center] {
-    justify-content: center;
-  }
+.pb_flex_kit_justify_content_center {
+  justify-content: center;
+}
 
+// Justify Content with Reverse
+.pb_flex_kit_justify_content_left.pb_flex_kit_reverse,
+.pb_flex_kit_justify_content_top.pb_flex_kit_reverse,
+.pb_flex_kit_justify_content_start.pb_flex_kit_reverse {
+  justify-content: flex-end;
+}
 
-  // Alignment: Align Items
-  &[class*=align_items_left],
-  &[class*=align_items_top],
-  &[class*=align_items_start] {
-    align-items: flex-start;
-  }
+.pb_flex_kit_justify_content_right.pb_flex_kit_reverse,
+.pb_flex_kit_justify_content_bottom.pb_flex_kit_reverse,
+.pb_flex_kit_justify_content_end.pb_flex_kit_reverse {
+  justify-content: flex-start;
+}
 
-  &[class*=align_items_right],
-  &[class*=align_items_bottom],
-  &[class*=align_items_end] {
-    align-items: flex-end;
-  }
+// Align Items
+.pb_flex_kit_align_items_left,
+.pb_flex_kit_align_items_top,
+.pb_flex_kit_align_items_start {
+  align-items: flex-start;
+}
 
-  &[class*=align_items_center] {
-    align-items: center;
-  }
+.pb_flex_kit_align_items_right,
+.pb_flex_kit_align_items_bottom,
+.pb_flex_kit_align_items_end {
+  align-items: flex-end;
+}
 
-  &[class*=align_items_stretch] {
-    align-items: stretch;
-  }
+.pb_flex_kit_align_items_center {
+  align-items: center;
+}
 
-  &[class*=align_items_baseline] {
-    align-items: baseline;
-  }
+.pb_flex_kit_align_items_stretch {
+  align-items: stretch;
+}
 
-  // Alignment: Align Self - Rails & React
-  &[class*=align_self_start] {
-    align-self: flex-start;
-  }
-  
-  &[class*=align_self_end] {
-    align-self: flex-end;
-  }
-  
-  &[class*=align_self_center] {
-    align-self: center;
-  }
-  
-  &[class*=align_self_stretch] {
-    align-self: stretch;
-  }
+.pb_flex_kit_align_items_baseline {
+  align-items: baseline;
+}
 
-  // Spacing
-  &[class*=spacing_around],
-  &[class*=justify_content_around] {
-    justify-content: space-around;
-  }
+// Align Self
+.pb_flex_kit_align_self_start {
+  align-self: flex-start;
+}
 
-  &[class*=spacing_between],
-  &[class*=justify_content_between] {
-    justify-content: space-between;
-  }
+.pb_flex_kit_align_self_end {
+  align-self: flex-end;
+}
 
-  &[class*=spacing_evenly],
-  &[class*=justify_content_evenly] {
-    justify-content: space-evenly;
-  }
+.pb_flex_kit_align_self_center {
+  align-self: center;
+}
 
-  //Gap
-  @each $gapType, $gapValue in $gapTypes{
-    @each $sizeName, $sizeValue in $gapSpaces {
-      &[class*=_#{$gapType}_#{$sizeName}]{
-        #{$gapValue}: $sizeValue;
-      }
-    }
-  }
+.pb_flex_kit_align_self_stretch {
+  align-self: stretch;
+}
 
+// Spacing
+.pb_flex_kit_spacing_around,
+.pb_flex_kit_justify_content_around {
+  justify-content: space-around;
+}
+
+.pb_flex_kit_spacing_between,
+.pb_flex_kit_justify_content_between {
+  justify-content: space-between;
+}
 
+.pb_flex_kit_spacing_evenly,
+.pb_flex_kit_justify_content_evenly {
+  justify-content: space-evenly;
 }
+
+// Gap utility classes
+@each $gapType, $gapValue in $gapTypes {
+  @each $sizeName, $sizeValue in $gapSpaces {
+    .pb_flex_kit_#{$gapType}_#{$sizeName} {
+      #{$gapValue}: $sizeValue;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -4,6 +4,9 @@ import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import { GenericObject, Sizes } from '../types'
 
+type SizeType = Sizes | "none"
+type SizeResponsiveType = { [key: string]: SizeType }
+
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
   className?: string,
@@ -18,9 +21,9 @@ type FlexProps = {
   reverse?: boolean,
   vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
   align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
-  gap?: Sizes | "none",
-  rowGap?: Sizes| "none",
-  columnGap?: Sizes| "none",
+  gap?: SizeType | SizeResponsiveType,
+  rowGap?: SizeType | SizeResponsiveType,
+  columnGap?: SizeType | SizeResponsiveType,
   wrap?: boolean,
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps
@@ -47,18 +50,24 @@ const Flex = (props: FlexProps): React.ReactElement => {
   } = props
 
   const orientationClass =
-    orientation !== undefined ? `orientation_${orientation}` : ''
+    orientation !== undefined ? `pb_flex_kit_orientation_${orientation}` : ''
   const justifyClass =
-    justify !== 'none' ? `justify_content_${justify}` : `justify_content_${horizontal}`
-  const alignClass = align !== 'none' ? `align_items_${align}` : `align_items_${vertical}`
-  const inlineClass = inline === true ? 'inline' : ''
-  const spacingClass = spacing !== undefined ? `spacing_${spacing}` : ''
-  const gapClass = gap !== 'none' ? `gap_${gap}` : ''
-  const rowGapClass = rowGap !== 'none' ? `rowGap_${rowGap}` : ''
-  const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
-  const wrapClass = wrap === true ? 'wrap' : ''
-  const reverseClass = reverse === true ? 'reverse' : ''
-  const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
+    justify !== 'none' ? `pb_flex_kit_justify_content_${justify}` : `pb_flex_kit_justify_content_${horizontal}`
+  const alignClass = align !== 'none' ? `pb_flex_kit_align_items_${align}` : `pb_flex_kit_align_items_${vertical}`
+  const inlineClass = inline === true ? 'pb_flex_kit_inline' : ''
+  const spacingClass = spacing !== undefined ? `pb_flex_kit_spacing_${spacing}` : ''
+  const gapClass = gap !== 'none' && typeof gap === 'string' ? `pb_flex_kit_gap_${gap}` : ''
+  const rowGapClass = rowGap !== 'none' && typeof rowGap === 'string' ? `pb_flex_kit_rowGap_${rowGap}` : ''
+  const columnGapClass = columnGap !== 'none' && typeof columnGap === 'string' ? `pb_flex_kit_columnGap_${columnGap}` : ''
+  
+  // Responsive gap classes
+  const responsiveGapClass = (gap !== 'none' && typeof gap === 'object' && gap !== null && !Array.isArray(gap)) ? 'pb_flex_kit_gap_responsive' : ''
+  const responsiveRowGapClass = (rowGap !== 'none' && typeof rowGap === 'object' && rowGap !== null && !Array.isArray(rowGap)) ? 'pb_flex_kit_rowGap_responsive' : ''
+  const responsiveColumnGapClass = (columnGap !== 'none' && typeof columnGap === 'object' && columnGap !== null && !Array.isArray(columnGap)) ? 'pb_flex_kit_columnGap_responsive' : ''
+  
+  const wrapClass = wrap === true ? 'pb_flex_kit_wrap' : ''
+  const reverseClass = reverse === true ? 'pb_flex_kit_reverse' : ''
+  const alignSelfClass = alignSelf !== 'none' ? `pb_flex_kit_align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dynamicInlineProps = globalInlineProps(props)
@@ -67,20 +76,21 @@ const Flex = (props: FlexProps): React.ReactElement => {
   return (
     <div
         className={classnames(
-        buildCss(
-          'pb_flex_kit',
-          orientationClass,
-          justifyClass,
-          alignClass,
-          inlineClass,
-          reverseClass,
-          wrapClass,
-          spacingClass,
-          gapClass,
-          rowGapClass,
-          columnGapClass,
-          alignSelfClass
-        ),
+        'pb_flex_kit',
+        orientationClass,
+        justifyClass,
+        alignClass,
+        inlineClass,
+        reverseClass,
+        wrapClass,
+        spacingClass,
+        gapClass,
+        rowGapClass,
+        columnGapClass,
+        responsiveGapClass,
+        responsiveRowGapClass,
+        responsiveColumnGapClass,
+        alignSelfClass,
         globalProps(props),
         className
       )}