playbook_ui 14.24.0 → 14.25.0.pre.alpha.PLAY2361datepickerarrownav10273

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -10,37 +10,39 @@
   margin-right: $space_xs;
 }
 
-[class^=pb_progress_pills_kit] {
-  [class*=progress_pills] {
+.pb_progress_pills_kit {
+  .progress_pills {
     display: flex;
   }
 
-  [class*=progress_pills_status] {
+  .progress_pills_status {
     display: flex;
     align-items: center;
     margin-bottom: $space_xs;
 
-    [class*=title] {
+    .pb_title_kit {
       margin-right: $space_xs;
     }
   }
 
-  [class*=pb_progress_pill] {
+  .pb_progress_pill_active,
+  .pb_progress_pill_inactive {
     @include pb_progress_pill;
 
     &.full_width_pill {
       max-width: none;
     }
+  }
 
-    &[class*=_inactive] {
-      background-color: $border_light;
-      &.dark {
+  .pb_progress_pill_inactive {
+    background-color: $border_light;
+    
+    &.dark {
       background-color: $border_dark;
-      }
     }
+  }
 
-    &[class*=_active] {
-      background-color: $primary_action;
-    }
+  .pb_progress_pill_active {
+    background-color: $primary_action;
   }
-}
+}

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -4,58 +4,133 @@
 
 $pb_progress_simple_height: 4px;
 
-[class^=pb_progress_simple_wrapper] {
+// Base wrapper styles
+.pb_progress_simple_wrapper_left,
+.pb_progress_simple_wrapper_center,
+.pb_progress_simple_wrapper_right {
   display: flex;
   justify-content: flex-start;
   align-items: center;
+}
 
-  &[class*=_center] {
-    justify-content: center;
-  }
+.pb_progress_simple_wrapper_center {
+  justify-content: center;
+}
 
-  &[class*=_right] {
-    justify-content: flex-end;
-  }
+.pb_progress_simple_wrapper_right {
+  justify-content: flex-end;
 }
 
-[class^=pb_progress_simple_kit] {
+// Base kit styles - all possible combinations
+.pb_progress_simple_kit,
+.pb_progress_simple_kit_muted,
+.pb_progress_simple_kit_positive,
+.pb_progress_simple_kit_negative,
+.pb_progress_simple_kit_warning,
+.pb_progress_simple_kit_left,
+.pb_progress_simple_kit_center,
+.pb_progress_simple_kit_right,
+.pb_progress_simple_kit_muted_left,
+.pb_progress_simple_kit_muted_center,
+.pb_progress_simple_kit_muted_right,
+.pb_progress_simple_kit_positive_left,
+.pb_progress_simple_kit_positive_center,
+.pb_progress_simple_kit_positive_right,
+.pb_progress_simple_kit_negative_left,
+.pb_progress_simple_kit_negative_center,
+.pb_progress_simple_kit_negative_right,
+.pb_progress_simple_kit_warning_left,
+.pb_progress_simple_kit_warning_center,
+.pb_progress_simple_kit_warning_right,
+.pb_progress_simple_kit_muted_positive_left,
+.pb_progress_simple_kit_muted_positive_center,
+.pb_progress_simple_kit_muted_positive_right,
+.pb_progress_simple_kit_muted_negative_left,
+.pb_progress_simple_kit_muted_negative_center,
+.pb_progress_simple_kit_muted_negative_right,
+.pb_progress_simple_kit_muted_warning_left,
+.pb_progress_simple_kit_muted_warning_center,
+.pb_progress_simple_kit_muted_warning_right {
   width: 100%;
   height: $pb_progress_simple_height;
   border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
-    &[class*=_positive] {
-      .progress_simple_value {
-        background: $success;
-      }
-    }
-    &[class*=_negative] {
-      .progress_simple_value {
-        background: $error;
-      }
-    }
-    &[class*=_warning] {
-      .progress_simple_value {
-        background: $warning;
-      }
-    }
-
-  [class^=progress_simple_value] {
+
+  .progress_simple_value {
     width: 0%;
     height: 100%;
     border-radius: $pb_progress_simple_height/2;
     background: $primary;
   }
+}
 
-  &[class*=_muted] {
-    background: rgba($slate, $opacity-2);
+// Variant styles
+.pb_progress_simple_kit_positive,
+.pb_progress_simple_kit_positive_left,
+.pb_progress_simple_kit_positive_center,
+.pb_progress_simple_kit_positive_right,
+.pb_progress_simple_kit_muted_positive_left,
+.pb_progress_simple_kit_muted_positive_center,
+.pb_progress_simple_kit_muted_positive_right {
+  .progress_simple_value {
+    background: $success;
+  }
+}
 
-    .progress_simple_value {
-      background: $slate;
-    }
+.pb_progress_simple_kit_negative,
+.pb_progress_simple_kit_negative_left,
+.pb_progress_simple_kit_negative_center,
+.pb_progress_simple_kit_negative_right,
+.pb_progress_simple_kit_muted_negative_left,
+.pb_progress_simple_kit_muted_negative_center,
+.pb_progress_simple_kit_muted_negative_right {
+  .progress_simple_value {
+    background: $error;
   }
+}
 
-  &[class*=_right] {
-    display: flex;
-    align-self: flex-end;
+.pb_progress_simple_kit_warning,
+.pb_progress_simple_kit_warning_left,
+.pb_progress_simple_kit_warning_center,
+.pb_progress_simple_kit_warning_right,
+.pb_progress_simple_kit_muted_warning_left,
+.pb_progress_simple_kit_muted_warning_center,
+.pb_progress_simple_kit_muted_warning_right {
+  .progress_simple_value {
+    background: $warning;
   }
 }
+
+// Muted styles
+.pb_progress_simple_kit_muted,
+.pb_progress_simple_kit_muted_left,
+.pb_progress_simple_kit_muted_center,
+.pb_progress_simple_kit_muted_right,
+.pb_progress_simple_kit_muted_positive_left,
+.pb_progress_simple_kit_muted_positive_center,
+.pb_progress_simple_kit_muted_positive_right,
+.pb_progress_simple_kit_muted_negative_left,
+.pb_progress_simple_kit_muted_negative_center,
+.pb_progress_simple_kit_muted_negative_right,
+.pb_progress_simple_kit_muted_warning_left,
+.pb_progress_simple_kit_muted_warning_center,
+.pb_progress_simple_kit_muted_warning_right {
+  background: rgba($slate, $opacity-2);
+
+  .progress_simple_value {
+    background: $slate;
+  }
+}
+
+// Right alignment
+.pb_progress_simple_kit_right,
+.pb_progress_simple_kit_muted_right,
+.pb_progress_simple_kit_positive_right,
+.pb_progress_simple_kit_negative_right,
+.pb_progress_simple_kit_warning_right,
+.pb_progress_simple_kit_muted_positive_right,
+.pb_progress_simple_kit_muted_negative_right,
+.pb_progress_simple_kit_muted_warning_right {
+  display: flex;
+  align-self: flex-end;
+}

data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss

@@ -292,4 +292,4 @@
     }
   }
 
-}
+}

data/app/pb_kits/playbook/pb_radio/_radio.scss

@@ -4,7 +4,12 @@
 @import "../pb_body/body";
 @import "../tokens/transition";
 
-[class^="pb_radio_kit"] {
+.pb_radio_kit,
+.pb_radio_kit.error,
+.pb_radio_kit.vertical,
+.pb_radio_kit.error.vertical,
+.pb_radio_kit_vertical,
+.pb_radio_kit_vertical.error {
   display: inline-flex;
   cursor: pointer;
 
@@ -59,71 +64,85 @@
       border: 6px solid $neutral;
     }
   }
+}
 
-  &[class*="vertical"] {
-    flex-direction: column;
-    align-items: center;
-    .pb_radio_button {
-      margin-right: 0px;
-      margin-bottom: $space_xs;
-    }
+.pb_radio_kit.vertical,
+.pb_radio_kit.error.vertical,
+.pb_radio_kit_vertical,
+.pb_radio_kit_vertical.error {
+  flex-direction: column;
+  align-items: center;
+  .pb_radio_button {
+    margin-right: 0px;
+    margin-bottom: $space_xs;
   }
+}
 
-  &.dark {
-    .pb_radio_button {
-      border-color: $border_dark;
-    }
-    input {
-      &:focus-visible {
-        & ~ .pb_radio_button {
-          box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;
-        }
+.pb_radio_kit.dark,
+.pb_radio_kit.dark.error,
+.pb_radio_kit.dark.vertical,
+.pb_radio_kit.dark.error.vertical,
+.pb_radio_kit_vertical.dark,
+.pb_radio_kit_vertical.dark.error {
+  .pb_radio_button {
+    border-color: $border_dark;
+  }
+  input {
+    &:focus-visible {
+      & ~ .pb_radio_button {
+        box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;
       }
-      &:checked {
-        & ~ .pb_radio_button {
-          border: 6px solid $active_dark;
-        }
+    }
+    &:checked {
+      & ~ .pb_radio_button {
+        border: 6px solid $active_dark;
       }
+    }
 
-      &:disabled + .pb_radio_button {
-        cursor: not-allowed;
-        background-color: mix($charcoal, $white, 80%);
-        border: 2px solid $border_dark;
-
-        & ~ .pb_body_kit {
-          cursor: not-allowed;
-          color: $text_dk_light;
-        }
-      }
+    &:disabled + .pb_radio_button {
+      cursor: not-allowed;
+      background-color: mix($charcoal, $white, 80%);
+      border: 2px solid $border_dark;
 
-      &:disabled:checked {
-        & ~ .pb_radio_button {
-          background-color: mix($charcoal, $white, 80%);
-          border: 6px solid $border_dark;
-        }
+      & ~ .pb_body_kit {
+        cursor: not-allowed;
+        color: $text_dk_light;
       }
     }
 
-    @media (hover: hover) {
-      &:hover {
-        .pb_radio_button {
-          background-color: rgba($white, 0.1);
-          border-color: $border_dark;
-        }
+    &:disabled:checked {
+      & ~ .pb_radio_button {
+        background-color: mix($charcoal, $white, 80%);
+        border: 6px solid $border_dark;
       }
     }
-    &.error {
-      > .pb_radio_button {
-        border-color: $error_dark;
-      }
-      > .pb_body_kit_negative {
-        color: $error_dark;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .pb_radio_button {
+        background-color: rgba($white, 0.1);
+        border-color: $border_dark;
       }
     }
   }
-  &.error {
-    > .pb_radio_button {
-      border-color: $error;
-    }
+}
+
+.pb_radio_kit.dark.error,
+.pb_radio_kit.dark.error.vertical,
+.pb_radio_kit_vertical.dark.error {
+  > .pb_radio_button {
+    border-color: $error_dark;
+  }
+  > .pb_body_kit_negative {
+    color: $error_dark;
+  }
+}
+
+.pb_radio_kit.error,
+.pb_radio_kit.error.vertical,
+.pb_radio_kit_vertical.error {
+  > .pb_radio_button {
+    border-color: $error;
   }
 }

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -60,7 +60,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   const htmlProps = buildHtmlProps(htmlOptions)
 
   const classes = classnames(
-    buildCss('pb_radio_kit', alignment),
+    buildCss('pb_radio_kit', `${alignment === 'vertical' ? 'vertical' : ''}`),
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -19,7 +19,6 @@ const RadioReactHook = () => {
           paddingRight="lg"
         >
         <Radio
-            alignment="left"
             label="Small"
             marginBottom='sm'
             name="size"
@@ -28,7 +27,6 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
-            alignment="left"
             label="Medium"
             marginBottom='sm'
             name="size"
@@ -37,7 +35,6 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
-            alignment="left"
             label="Large"
             marginBottom='sm'
             name="size"

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -10,7 +10,7 @@
 @import "./trix_styles";
 @import "./tiptap_styles";
 
-[class^=pb_rich_text_editor_kit] {
+.pb_rich_text_editor_kit {
   // Disables File Attatchment Button in Toolbar
   trix-toolbar [data-trix-button-group="file-tools"] {
     display: none;
@@ -126,7 +126,7 @@
   }
   // Trix doesn't provide customization to their icons.
   // https://github.com/basecamp/trix/issues/464#issuecomment-564683997
-  &[class*=dark] {
+  &.dark {
     // Dark SVG Icon Styles
     .trix-button--icon-bold::before {
       background-image: url("data:image/svg+xml,%3Csvg width='11px' height='14px' viewBox='0 0 11 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-19.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M20.6,16.79 C21.565,16.115 22.25,15.025 22.25,14 C22.25,11.745 20.505,10 18.25,10 L12,10 L12,24 L19.04,24 C21.135,24 22.75,22.3 22.75,20.21 C22.75,18.69 21.885,17.395 20.6,16.79 Z M15,12.5 L18,12.5 C18.83,12.5 19.5,13.17 19.5,14 C19.5,14.83 18.83,15.5 18,15.5 L15,15.5 L15,12.5 L15,12.5 Z M18.5,21.5 L15,21.5 L15,18.5 L18.5,18.5 C19.33,18.5 20,19.17 20,20 C20,20.83 19.33,21.5 18.5,21.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
@@ -291,14 +291,14 @@
         background-color: $focus_input_light;
       }
     }
-    &[class*=dark]:hover {
+    &.dark:hover {
       .trix-button-row,
       trix-editor {
         background-color: rgba($white, 0.1);
         border-color: rgba($white, 0.15);
       }
     }
-    &[class*=dark]:focus-within {
+    &.dark:focus-within {
       .trix-button-row,
       trix-editor {
         background-color: rgba($white, 0.03);

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -18,7 +18,7 @@ $section_colors_dark: (
   card:         tint($bg_dark,10),
 );
 
-[class^=pb_section_separator_kit] {
+.pb_section_separator_kit {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -26,7 +26,7 @@ $section_colors_dark: (
   span {
     padding: 0;
     display: flex;
-    [class*="pb_caption_kit"] {
+    .pb_caption_kit_md {
       padding: 0 $space_xs;
     }
   }
@@ -42,96 +42,107 @@ $section_colors_dark: (
     flex: 1;
     @include section_separator_horizontal;
   }
-  @each $color_name, $color_value in $section_selector_colors {
-    &[class*="color_#{$color_name}"] {
-      &::before, &::after {
+}
+
+// Horizontal orientation (default)
+.pb_section_separator_horizontal {
+  justify-content: center;
+}
+
+// Vertical orientation
+.pb_section_separator_vertical {
+  margin-left: $space_xs;
+  margin-right: $space_xs;
+  &::before {
+    display: none;
+  }
+  &::after {
+    @include section_separator_vertical(false);
+  }
+}
+
+// Dashed line style
+.pb_section_separator_dashed {
+  &::before, &::after {
+    @include section_separator_dashed(false);
+  }
+}
+
+// Color variations
+@each $color_name, $color_value in $section_selector_colors {
+  .pb_section_separator_color_#{$color_name} {
+    &::before, &::after {
+      background: $color_value;
+    }
+
+    &.pb_section_separator_vertical {
+      &::after {
         background: $color_value;
       }
-
-      &[class*=_vertical] {
-        &::after {
-          background: $color_value;
-        }
+    }
+    
+    &.pb_section_separator_dashed {
+      &::before, &::after {
+        border: 1px dashed $color_value;
+        background: none;
       }
-      &[class*=_dashed] {
-        &::before, &::after {
+      &.pb_section_separator_vertical {
+        &::after {
           border: 1px dashed $color_value;
-        }
-        &[class*=_vertical] {
-          &::after {
-            border: 1px dashed $color_value;
-            background: none;
-          }
+          background: none;
         }
       }
     }
   }
+}
 
-  &[class*=_horizontal] {
-    justify-content: center;
+// Dark mode styles
+.pb_section_separator_kit.dark {
+  &::before {
+    @include section_separator_horizontal(true);
   }
-  &[class*=_vertical] {
-    margin-left: $space_xs;
-    margin-right: $space_xs;
-    &::before {
-      display: none;
-    }
+  &::after {
+    @include section_separator_horizontal(true);
+  }
+  
+  &.pb_section_separator_vertical {
     &::after {
-      @include section_separator_vertical(false);
+      @include section_separator_vertical(true);
     }
   }
-
-  &[class*=_dashed] {
+  
+  &.pb_section_separator_dashed {
     &::before, &::after {
-      @include section_separator_dashed(false);
+      @include section_separator_dashed(true);
     }
   }
+}
 
-  // Dark =========================
-
-  &.dark {
-    @each $color_name, $color_value in $section_selector_colors {
-      &[class*="color_#{$color_name}"] {
-        &::before, &::after {
-          background: $color_value;
-        }
-
-        &[class*=_vertical] {
-          &::after {
-            @include section_separator_vertical(false);
-            background: $color_value;
-          }
-        }
-
-        &[class*=_dashed] {
-          &::before, &::after {
-            border: 1px dashed $color_value;
-            background: none;
-          }
-          &[class*=_vertical] {
-            &::after {
-              border: 1px dashed $color_value;
-              background: none;
-            }
-          }
-        }
-      }
-    }
-    &::before {
-      @include section_separator_horizontal(true);
-    }
-    &::after {
-      @include section_separator_horizontal(true);
+// Dark mode color variations
+@each $color_name, $color_value in $section_selector_colors {
+  .pb_section_separator_kit.dark.pb_section_separator_color_#{$color_name} {
+    &::before, &::after {
+      background: $color_value;
     }
-    &[class*=_vertical] {
+
+    &.pb_section_separator_vertical {
       &::after {
-        @include section_separator_vertical(true);
+        @include section_separator_vertical(false);
+        background: $color_value;
       }
     }
-    &[class*=_dashed] {
+
+    &.pb_section_separator_dashed {
       &::before, &::after {
-        @include section_separator_dashed(true);
+        border: 1px dashed $color_value;
+        background: none;
+      }
+      &.pb_section_separator_vertical {
+        &::after {
+          border: 1px dashed $color_value;
+          background: none;
+        }
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -39,7 +39,15 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : "", color !== "default" ? `color_${color}` : ''), globalProps(props), className)
+  const classes = classnames(
+    'pb_section_separator_kit',
+    `pb_section_separator_${variant}`,
+    `pb_section_separator_${orientation}`,
+    lineStyle === "dashed" ? 'pb_section_separator_dashed' : 'pb_section_separator_solid',
+    color !== "default" ? `pb_section_separator_color_${color}` : 'pb_section_separator_color_default',
+    globalProps(props),
+    className
+  )
   const dynamicInlineProps = globalInlineProps(props)
 
   return (

data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss

@@ -30,4 +30,4 @@
         border: 1px dashed $border_dark;
         background: none;
     }
-}
+}

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -5,7 +5,9 @@ import Detail from '../../pb_detail/_detail'
 import Icon from '../../pb_icon/_icon'
 
 const children = (
-  <Flex padding="xs">
+  <Flex alignItems="center"
+      padding="xs"
+  >
     <Icon color="primary"
         icon="arrow-down"
     />