playbook_ui 14.25.0.pre.alpha.dialogfix10277 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963

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

@@ -13,14 +13,7 @@ $confirmation_toast_colors: (
   tip:          transparent,
 );
 
-.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 {
+[class^=pb_fixed_confirmation_toast_kit] {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -70,63 +63,34 @@ $confirmation_toast_colors: (
       right: $space_md;
     }
   }
-}
-
-.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;
+  @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;
+      }
+    }
   }
-  @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,7 +55,8 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
   const iconClass = icon && icon !== "none" ? "custom_icon" : ""
 
   const css = classnames(
-    `pb_fixed_confirmation_toast_kit_${status}${multiLine ? '_multi_line' : ''}`,
+    `pb_fixed_confirmation_toast_kit_${status}`,
+    { _multi_line: multiLine },
     { [`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('.pb_fixed_confirmation_toast_kit_neutral_multi_line')).toBeInTheDocument();
+    expect(container.querySelector('._multi_line')).toBeInTheDocument();
 });
 
 test('renders position when provided', () => {

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

@@ -14,135 +14,129 @@ $gapTypes: (
   gap: gap,
   columnGap: column-gap,
   rowGap: row-gap
-);
+  );
 
-// Base flex kit
-.pb_flex_kit {
+[class^=pb_flex_kit] {
   display: flex;
   flex-wrap: nowrap;
-}
-
-// Inline variant
-.pb_flex_kit_inline {
-  display: inline-flex;
-}
 
-// Wrap variant
-.pb_flex_kit_wrap {
-  flex-wrap: wrap;
-}
+  // Inline
+  &[class*=_inline] {
+    display: inline-flex;
+  }
 
-// Orientation
-.pb_flex_kit_orientation_row {
-  flex-direction: row;
-}
+  // Wrap
+  &[class*=_wrap] {
+    flex-wrap: wrap;
+  }
 
-.pb_flex_kit_orientation_column {
-  flex-direction: column;
-}
+  // Orientation
+  &[class*=_orientation_row] {
+    flex-direction: row;
 
-// Reverse (works with orientation)
-.pb_flex_kit_orientation_row.pb_flex_kit_reverse {
-  flex-direction: row-reverse;
-}
+    &[class*=_reverse] {
+      flex-direction: row-reverse;
+    }
+  }
 
-.pb_flex_kit_orientation_column.pb_flex_kit_reverse {
-  flex-direction: column-reverse;
-}
+  &[class*=_orientation_column] {
+    flex-direction: column;
 
-// 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*=_reverse] {
+      flex-direction: column-reverse;
+    }
+  }
 
-.pb_flex_kit_justify_content_right,
-.pb_flex_kit_justify_content_bottom,
-.pb_flex_kit_justify_content_end {
-  justify-content: flex-end;
-}
+  // 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;
+    }
+  }
 
-.pb_flex_kit_justify_content_center {
-  justify-content: center;
-}
+  &[class*=justify_content_right],
+  &[class*=justify_content_bottom],
+  &[class*=justify_content_end] {
+    justify-content: flex-end;
+     &[class*=_reverse] {
+      justify-content: flex-start;
+    }
+  }
 
-// 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;
-}
+  &[class*=justify_content_center] {
+    justify-content: center;
+  }
 
-.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;
-}
 
-// Align Items
-.pb_flex_kit_align_items_left,
-.pb_flex_kit_align_items_top,
-.pb_flex_kit_align_items_start {
-  align-items: flex-start;
-}
+  // Alignment: Align Items
+  &[class*=align_items_left],
+  &[class*=align_items_top],
+  &[class*=align_items_start] {
+    align-items: flex-start;
+  }
 
-.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_right],
+  &[class*=align_items_bottom],
+  &[class*=align_items_end] {
+    align-items: flex-end;
+  }
 
-.pb_flex_kit_align_items_center {
-  align-items: center;
-}
+  &[class*=align_items_center] {
+    align-items: center;
+  }
 
-.pb_flex_kit_align_items_stretch {
-  align-items: stretch;
-}
+  &[class*=align_items_stretch] {
+    align-items: stretch;
+  }
 
-.pb_flex_kit_align_items_baseline {
-  align-items: baseline;
-}
+  &[class*=align_items_baseline] {
+    align-items: baseline;
+  }
 
-// Align Self
-.pb_flex_kit_align_self_start {
-  align-self: flex-start;
-}
+  // 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_self_end {
-  align-self: flex-end;
-}
+  // Spacing
+  &[class*=spacing_around],
+  &[class*=justify_content_around] {
+    justify-content: space-around;
+  }
 
-.pb_flex_kit_align_self_center {
-  align-self: center;
-}
+  &[class*=spacing_between],
+  &[class*=justify_content_between] {
+    justify-content: space-between;
+  }
 
-.pb_flex_kit_align_self_stretch {
-  align-self: stretch;
-}
+  &[class*=spacing_evenly],
+  &[class*=justify_content_evenly] {
+    justify-content: space-evenly;
+  }
 
-// Spacing
-.pb_flex_kit_spacing_around,
-.pb_flex_kit_justify_content_around {
-  justify-content: space-around;
-}
+  //Gap
+  @each $gapType, $gapValue in $gapTypes{
+    @each $sizeName, $sizeValue in $gapSpaces {
+      &[class*=_#{$gapType}_#{$sizeName}]{
+        #{$gapValue}: $sizeValue;
+      }
+    }
+  }
 
-.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

@@ -50,24 +50,18 @@ const Flex = (props: FlexProps): React.ReactElement => {
   } = props
 
   const orientationClass =
-    orientation !== undefined ? `pb_flex_kit_orientation_${orientation}` : ''
+    orientation !== undefined ? `orientation_${orientation}` : ''
   const justifyClass =
-    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}` : ''
+    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' && typeof gap === 'object') ? `gap_${gap}` : ''
+  const rowGapClass = (rowGap !== 'none' && typeof rowGap === 'object') ? `rowGap_${rowGap}` : ''
+  const columnGapClass = (columnGap !== 'none' && typeof columnGap === 'object') ? `columnGap_${columnGap}` : ''
+  const wrapClass = wrap === true ? 'wrap' : ''
+  const reverseClass = reverse === true ? 'reverse' : ''
+  const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dynamicInlineProps = globalInlineProps(props)
@@ -76,21 +70,20 @@ const Flex = (props: FlexProps): React.ReactElement => {
   return (
     <div
         className={classnames(
-        'pb_flex_kit',
-        orientationClass,
-        justifyClass,
-        alignClass,
-        inlineClass,
-        reverseClass,
-        wrapClass,
-        spacingClass,
-        gapClass,
-        rowGapClass,
-        columnGapClass,
-        responsiveGapClass,
-        responsiveRowGapClass,
-        responsiveColumnGapClass,
-        alignSelfClass,
+        buildCss(
+          'pb_flex_kit',
+          orientationClass,
+          justifyClass,
+          alignClass,
+          inlineClass,
+          reverseClass,
+          wrapClass,
+          spacingClass,
+          gapClass,
+          rowGapClass,
+          columnGapClass,
+          alignSelfClass
+        ),
         globalProps(props),
         className
       )}

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

@@ -1,147 +1,52 @@
-// Fixed size
-.pb_flex_item_kit_fixed_size {
-  flex-grow: 0;
-  flex-shrink: 0;
+[class^=pb_flex_item_kit] {
+  &[class*=_fixed_size] {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  &[class*=_grow] {
+    flex-grow: 1;
+  }
+
+  &[class*=_shrink] {
+    flex-shrink: 1;
+  }
+
+  // Display Flex - Rails & React
+  &[class*=display_flex] {
+    display: flex;
+  }
+
+  // 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;
+  }
+
+  //Order Items
+  @for $i from 0 through 12 {
+    &[class*=order_#{$i}]{
+      order: $i;
+    }
+  }
+  &[class*=order_first]{
+    order: -1;
+  }
+
+  @for $i from 0 through 12 {
+    &[class*=_flex_#{$i}]{
+      flex: $i;
+    }
+  }
 }
-
-// Grow
-.pb_flex_item_kit_grow {
-  flex-grow: 1;
-}
-
-// Shrink
-.pb_flex_item_kit_shrink {
-  flex-shrink: 1;
-}
-
-// Display Flex
-.pb_flex_item_kit_display_flex {
-  display: flex;
-}
-
-// Align Self
-.pb_flex_item_kit_align_self_start {
-  align-self: flex-start;
-}
-
-.pb_flex_item_kit_align_self_end {
-  align-self: flex-end;
-}
-
-.pb_flex_item_kit_align_self_center {
-  align-self: center;
-}
-
-.pb_flex_item_kit_align_self_stretch {
-  align-self: stretch;
-}
-
-// Order classes
-.pb_flex_item_kit_order_0 {
-  order: 0;
-}
-
-.pb_flex_item_kit_order_1 {
-  order: 1;
-}
-
-.pb_flex_item_kit_order_2 {
-  order: 2;
-}
-
-.pb_flex_item_kit_order_3 {
-  order: 3;
-}
-
-.pb_flex_item_kit_order_4 {
-  order: 4;
-}
-
-.pb_flex_item_kit_order_5 {
-  order: 5;
-}
-
-.pb_flex_item_kit_order_6 {
-  order: 6;
-}
-
-.pb_flex_item_kit_order_7 {
-  order: 7;
-}
-
-.pb_flex_item_kit_order_8 {
-  order: 8;
-}
-
-.pb_flex_item_kit_order_9 {
-  order: 9;
-}
-
-.pb_flex_item_kit_order_10 {
-  order: 10;
-}
-
-.pb_flex_item_kit_order_11 {
-  order: 11;
-}
-
-.pb_flex_item_kit_order_12 {
-  order: 12;
-}
-
-.pb_flex_item_kit_order_first {
-  order: -1;
-}
-
-// Flex values
-.pb_flex_item_kit_flex_0 {
-  flex: 0;
-}
-
-.pb_flex_item_kit_flex_1 {
-  flex: 1;
-}
-
-.pb_flex_item_kit_flex_2 {
-  flex: 2;
-}
-
-.pb_flex_item_kit_flex_3 {
-  flex: 3;
-}
-
-.pb_flex_item_kit_flex_4 {
-  flex: 4;
-}
-
-.pb_flex_item_kit_flex_5 {
-  flex: 5;
-}
-
-.pb_flex_item_kit_flex_6 {
-  flex: 6;
-}
-
-.pb_flex_item_kit_flex_7 {
-  flex: 7;
-}
-
-.pb_flex_item_kit_flex_8 {
-  flex: 8;
-}
-
-.pb_flex_item_kit_flex_9 {
-  flex: 9;
-}
-
-.pb_flex_item_kit_flex_10 {
-  flex: 10;
-}
-
-.pb_flex_item_kit_flex_11 {
-  flex: 11;
-}
-
-.pb_flex_item_kit_flex_12 {
-  flex: 12;
-}

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

@@ -9,8 +9,7 @@ type FlexItemPropTypes = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
   shrink?: boolean,
   className?: string,
-  flex?: string | number,
-  order?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
+  order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
   alignSelf?: "start" | "end" | "center" | "stretch" | null,
   displayFlex?: boolean
 } & GlobalProps
@@ -28,14 +27,14 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
     alignSelf,
     displayFlex
   } = props
-  const growClass = grow === true ? 'pb_flex_item_kit_grow' : ''
-  const displayFlexClass = displayFlex === true ? 'pb_flex_item_kit_display_flex' : ''
-  const flexClass = flex !== 'none' ? `pb_flex_item_kit_flex_${flex}` : ''
-  const shrinkClass = shrink === true ? 'pb_flex_item_kit_shrink' : ''
-  const alignSelfClass = alignSelf ? `pb_flex_item_kit_align_self_${alignSelf}` : ''
+  const growClass = grow === true ? 'grow' : ''
+  const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
+  const flexClass = flex !== 'none' ? `flex_${flex}` : ''
+  const shrinkClass = shrink === true ? 'shrink' : ''
+  const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
-  const orderClass = order !== 'none' ? `pb_flex_item_kit_order_${order}` : ''
+  const orderClass = order !== 'none' ? `order_${order}` : null
   const dynamicInlineProps = globalInlineProps(props)
   const combinedStyles = {
     ...fixedStyle,
@@ -48,17 +47,7 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
   return (
     <div
         {...htmlProps}
-        className={classnames(
-          'pb_flex_item_kit',
-          growClass,
-          shrinkClass,
-          flexClass,
-          displayFlexClass,
-          orderClass,
-          alignSelfClass,
-          globalProps(props),
-          className
-        )}
+        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
         style={combinedStyles}
     >
       {children}