playbook_ui 14.24.0 → 14.25.0.pre.alpha.PLAY2361datepickerarrownav10273

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss

@@ -37,9 +37,9 @@
   }
 
   &.dark {
-    [class*="pb_title_kit"],
-    [class*="pb_body_kit"],
-    [class*="pb_detail_kit"],
-    [class*="pb_button_kit_link"]:hover { color: $white; }
+    .pb_title_kit,
+    .pb_body_kit,
+    .pb_detail_kit,
+    .pb_button_kit_link:hover { color: $white; }
   }
 }

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

@@ -52,11 +52,10 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
   } = props;
 
   const returnedIcon = icon || iconMap[status]
-  const iconClass = icon ? "custom_icon" : ""
+  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),
@@ -92,7 +91,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
             onClick={handleClick}
             {...htmlProps}
         >
-          {returnedIcon && (
+          {returnedIcon && icon !== "none" && (
             <Icon
                 className="pb_icon"
                 fixedWidth

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Error Message",
+  status: "error",
+  icon: "none",
+  closeable: true
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Items Successfully Moved",
+  status: "success",
+  icon: "none"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  text: "Scan to Assign Selected Items",
+  status: "neutral",
+  icon: "none"
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+
+const FixedConfirmationToastNoIcon = (props) => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            closeable
+            icon="none"
+            status="error"
+            text="Error Message"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            icon="none"
+            status="success"
+            text="Items Successfully Moved"
+            {...props}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            icon="none"
+            status="neutral"
+            text="Scan to Assign Selected Items"
+            {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastNoIcon

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md

@@ -0,0 +1 @@
+Setting `icon` prop to "none" will render the fixed confirmation toast without the left side icon. 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md

@@ -2,7 +2,8 @@
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
 | **text** | `String` |`Value for the toast message` | `nil` |   |
-| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error`, `success`, 
-`neutral`, `custom()` |
+| **font** | `PBFont` |`Value for the toast message font style` | `.title4` |   |
+| **animatedIcon** | `AnyView` |`Value for the option to use an animated icon` | `nil` |   |
+| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error` `success` `neutral` `custom()` |
 | **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
 | **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` |  |  |

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

@@ -8,6 +8,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -17,6 +18,7 @@ examples:
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
+  - fixed_confirmation_toast_no_icon: No Icon
 
   swift:
   - fixed_confirmation_toast_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
 export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
 export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
+export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,6 +1,7 @@
 <%= pb_content_tag do %>
+    <% if object.icon_value && object.icon_value != "none" %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
-
+    <% end %>
     <% if content %>
         <%= content %>
     <% elsif object.show_text? %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -56,7 +56,7 @@ module Playbook
       end
 
       def icon_class
-        icon.present? ? " custom_icon" : ""
+        icon.present? && icon != "none" ? " custom_icon" : ""
       end
 
       def classname

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

@@ -56,9 +56,15 @@ test('renders custom icon when provided', () => {
     expect(container.querySelector('.custom_icon')).toBeInTheDocument();
 });
 
+test("renders no icon when icon prop is 'none'", () => {
+    const { container } = render(<FixedConfirmationToast icon="none" />);
+    expect(container.querySelector('.pb_icon')).not.toBeInTheDocument();
+    expect(container.querySelector('.custom_icon')).not.toBeInTheDocument();
+});
+
 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;
+    }
+  }
+}