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

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

@@ -4,12 +4,7 @@
 @import "../pb_body/body";
 @import "../tokens/transition";
 
-.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 {
+[class^="pb_radio_kit"] {
   display: inline-flex;
   cursor: pointer;
 
@@ -64,85 +59,71 @@
       border: 6px solid $neutral;
     }
   }
-}
 
-.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;
+  &[class*="vertical"] {
+    flex-direction: column;
+    align-items: center;
+    .pb_radio_button {
+      margin-right: 0px;
+      margin-bottom: $space_xs;
+    }
   }
-}
 
-.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;
-      }
+  &.dark {
+    .pb_radio_button {
+      border-color: $border_dark;
     }
-    &:checked {
-      & ~ .pb_radio_button {
-        border: 6px solid $active_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;
+        }
       }
-    }
-
-    &:disabled + .pb_radio_button {
-      cursor: not-allowed;
-      background-color: mix($charcoal, $white, 80%);
-      border: 2px solid $border_dark;
 
-      & ~ .pb_body_kit {
+      &:disabled + .pb_radio_button {
         cursor: not-allowed;
-        color: $text_dk_light;
+        background-color: mix($charcoal, $white, 80%);
+        border: 2px solid $border_dark;
+
+        & ~ .pb_body_kit {
+          cursor: not-allowed;
+          color: $text_dk_light;
+        }
       }
-    }
 
-    &:disabled:checked {
-      & ~ .pb_radio_button {
-        background-color: mix($charcoal, $white, 80%);
-        border: 6px solid $border_dark;
+      &:disabled:checked {
+        & ~ .pb_radio_button {
+          background-color: mix($charcoal, $white, 80%);
+          border: 6px solid $border_dark;
+        }
       }
     }
-  }
 
-  @media (hover: hover) {
-    &:hover {
-      .pb_radio_button {
-        background-color: rgba($white, 0.1);
-        border-color: $border_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_dark;
+      }
+      > .pb_body_kit_negative {
+        color: $error_dark;
       }
     }
   }
-}
-
-.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;
+  &.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 === 'vertical' ? 'vertical' : ''}`),
+    buildCss('pb_radio_kit', alignment),
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),

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

@@ -19,6 +19,7 @@ const RadioReactHook = () => {
           paddingRight="lg"
         >
         <Radio
+            alignment="left"
             label="Small"
             marginBottom='sm'
             name="size"
@@ -27,6 +28,7 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
+            alignment="left"
             label="Medium"
             marginBottom='sm'
             name="size"
@@ -35,6 +37,7 @@ 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";
 
-.pb_rich_text_editor_kit {
+[class^=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
-  &.dark {
+  &[class*=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;
       }
     }
-    &.dark:hover {
+    &[class*=dark]:hover {
       .trix-button-row,
       trix-editor {
         background-color: rgba($white, 0.1);
         border-color: rgba($white, 0.15);
       }
     }
-    &.dark:focus-within {
+    &[class*=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),
 );
 
-.pb_section_separator_kit {
+[class^=pb_section_separator_kit] {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -26,7 +26,7 @@ $section_colors_dark: (
   span {
     padding: 0;
     display: flex;
-    .pb_caption_kit_md {
+    [class*="pb_caption_kit"] {
       padding: 0 $space_xs;
     }
   }
@@ -42,107 +42,96 @@ $section_colors_dark: (
     flex: 1;
     @include section_separator_horizontal;
   }
-}
-
-// 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;
-      }
-    }
-    
-    &.pb_section_separator_dashed {
+  @each $color_name, $color_value in $section_selector_colors {
+    &[class*="color_#{$color_name}"] {
       &::before, &::after {
-        border: 1px dashed $color_value;
-        background: none;
+        background: $color_value;
       }
-      &.pb_section_separator_vertical {
+
+      &[class*=_vertical] {
         &::after {
+          background: $color_value;
+        }
+      }
+      &[class*=_dashed] {
+        &::before, &::after {
           border: 1px dashed $color_value;
-          background: none;
+        }
+        &[class*=_vertical] {
+          &::after {
+            border: 1px dashed $color_value;
+            background: none;
+          }
         }
       }
     }
   }
-}
 
-// Dark mode styles
-.pb_section_separator_kit.dark {
-  &::before {
-    @include section_separator_horizontal(true);
-  }
-  &::after {
-    @include section_separator_horizontal(true);
+  &[class*=_horizontal] {
+    justify-content: center;
   }
-  
-  &.pb_section_separator_vertical {
+  &[class*=_vertical] {
+    margin-left: $space_xs;
+    margin-right: $space_xs;
+    &::before {
+      display: none;
+    }
     &::after {
-      @include section_separator_vertical(true);
+      @include section_separator_vertical(false);
     }
   }
-  
-  &.pb_section_separator_dashed {
+
+  &[class*=_dashed] {
     &::before, &::after {
-      @include section_separator_dashed(true);
+      @include section_separator_dashed(false);
     }
   }
-}
 
-// 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;
-    }
+  // 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;
+          }
+        }
 
-    &.pb_section_separator_vertical {
+        &[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);
+    }
+    &[class*=_vertical] {
       &::after {
-        @include section_separator_vertical(false);
-        background: $color_value;
+        @include section_separator_vertical(true);
       }
     }
-
-    &.pb_section_separator_dashed {
+    &[class*=_dashed] {
       &::before, &::after {
-        border: 1px dashed $color_value;
-        background: none;
-      }
-      &.pb_section_separator_vertical {
-        &::after {
-          border: 1px dashed $color_value;
-          background: none;
-        }
+        @include section_separator_dashed(true);
       }
     }
   }
-}
+}

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

@@ -39,15 +39,7 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  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 classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : "", color !== "default" ? `color_${color}` : ''), 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,9 +5,7 @@ import Detail from '../../pb_detail/_detail'
 import Icon from '../../pb_icon/_icon'
 
 const children = (
-  <Flex alignItems="center"
-      padding="xs"
-  >
+  <Flex padding="xs">
     <Icon color="primary"
         icon="arrow-down"
     />

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -20,13 +20,7 @@ module Playbook
                         default: "solid"
 
       def classname
-        class_names = ["pb_section_separator_kit"]
-        class_names << "pb_section_separator_#{variant}"
-        class_names << "pb_section_separator_#{orientation}"
-        class_names << "pb_section_separator_#{line_style}"
-        class_names << "pb_section_separator_color_#{color}"
-
-        generate_classname(class_names.join(" "), separator: " ")
+        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil, color != "default" ? "color_#{color}" : nil)
       end
 
     private

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -4,7 +4,7 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
 
-.pb_select {
+[class^=pb_select] {
   select {
     @include pb_textarea_light;
     @include pb_body_light;
@@ -80,7 +80,7 @@
     position: relative;
     display: block;
     &.error {
-      > .pb_body_kit_negative {
+      [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
       > select:first-child {
@@ -157,7 +157,7 @@
   }
 }
 
-.pb_select.dark {
+[class^=pb_select].dark {
   select {
     @include pb_textarea_dark;
     @include pb_body_light_dark;
@@ -260,4 +260,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -28,11 +28,7 @@ $pb_selectable_paddings: (
   py: ("padding-top", "padding-bottom")
 );
 
-.pb_selectable_card_kit,
-.pb_selectable_card_kit_checked_disabled,
-.pb_selectable_card_kit_checked_enabled,
-.pb_selectable_card_kit_disabled,
-.pb_selectable_card_kit_enabled {
+[class^=pb_selectable_card_kit] {
   display: block;
   margin-bottom: 0;
 
@@ -216,4 +212,4 @@ $pb_selectable_paddings: (
       background: $error;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss

@@ -1,13 +1,9 @@
-.pb_selectable_card_icon_kit,
-.pb_selectable_card_icon_kit_checked_disabled,
-.pb_selectable_card_icon_kit_checked_enabled,
-.pb_selectable_card_icon_kit_disabled,
-.pb_selectable_card_icon_kit_enabled {
+[class^=pb_selectable_card_icon_kit] {
 
 	text-align: center;
 	user-select: none;
 
-  .buffer > .pb_selectable_icon_kit::before {
+  .buffer > [class*=pb_selectable_icon_kit]::before {
     content: '';
     position: absolute;
     width: 100%;
@@ -16,7 +12,7 @@
     left: 0;
   }
 
-  .buffer > .pb_selectable_icon_kit {
+  .buffer > [class*=pb_selectable_icon_kit] {
     @media (hover:hover) {
       &:hover * {
             transition: transform $transition_short ease;
@@ -46,8 +42,7 @@
       }
     }
 
-    &.pb_selectable_card_icon_kit_disabled,
-    &.pb_selectable_card_icon_kit_checked_disabled {
+    &[class*=_disabled] {
       opacity: $opacity_6;
       cursor: not-allowed;
 
@@ -84,19 +79,15 @@
     }
   }
 
-  .pb_selectable_icon_kit {
+  [class^=pb_selectable_icon_kit] {
     margin-bottom: 0px;
   }
 
-  .pb_body_kit_light {
+  [class^=pb_body_kit_light] {
     margin-top: $space_xs;
   }
 
-  .pb_selectable_card_kit,
-  .pb_selectable_card_kit_checked_disabled,
-  .pb_selectable_card_kit_checked_enabled,
-  .pb_selectable_card_kit_disabled,
-  .pb_selectable_card_kit_enabled {
+  [class^=pb_selectable_card_kit] {
     margin-bottom: 0px !important;
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -1,11 +1,6 @@
 @import "../tokens/transition";
 
-.pb_selectable_icon_kit,
-.pb_selectable_icon_kit_checked,
-.pb_selectable_icon_kit_enabled,
-.pb_selectable_icon_kit_disabled,
-.pb_selectable_icon_kit_checked_enabled,
-.pb_selectable_icon_kit_checked_disabled {
+[class^=pb_selectable_icon] {
 
 	text-align: center;
 	cursor: pointer;
@@ -32,6 +27,14 @@
 		transition: color $transition_short ease;
 	}
 
+	&[class*=_disabled] {
+		opacity: $opacity_6;
+		cursor: not-allowed;
+		* {
+			cursor: not-allowed;
+		}
+	}
+	
 	input[type="checkbox"],
 	input[type="radio"] {
 		-webkit-appearance: none;
@@ -51,46 +54,33 @@
 
 		}
 	}
-}
 
-.pb_selectable_icon_kit_disabled,
-.pb_selectable_icon_kit_checked_disabled {
-	opacity: $opacity_6;
-	cursor: not-allowed;
-	* {
-		cursor: not-allowed;
-	}
-}
 
-.pb_selectable_icon_kit.dark,
-.pb_selectable_icon_kit_checked.dark,
-.pb_selectable_icon_kit_enabled.dark,
-.pb_selectable_icon_kit_disabled.dark,
-.pb_selectable_icon_kit_checked_enabled.dark,
-.pb_selectable_icon_kit_checked_disabled.dark {
-	input[type="checkbox"],
-	input[type="radio"] {
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		display: none;
-		appearance: none;
-		transition: color $transition_short ease;
-		
-		&:checked ~ label * {
+	&.dark {
+		input[type="checkbox"],
+		input[type="radio"] {
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			display: none;
+			appearance: none;
 			transition: color $transition_short ease;
-			color: $active_dark !important;
-		}
 			
-		&:not(:checked) ~ label {
-			transition: color $transition_short ease;
-			color: $text_dk_lighter;
-
-			h4 {
+			&:checked ~ label * {
+				transition: color $transition_short ease;
+				color: $active_dark !important;
+			}
+				
+			&:not(:checked) ~ label {
 				transition: color $transition_short ease;
-				color: $text_dk_default;
+				color: $text_dk_lighter;
+
+				h4 {
+					transition: color $transition_short ease;
+					color: $text_dk_default;
+				}
 			}
 		}
-	}
+ 	}
 }
 
 

data/app/pb_kits/playbook/pb_selectable_list/_item.tsx

@@ -82,7 +82,6 @@ const SelectableListItem = ({
             <Checkbox
                 checked={checkedState}
                 id={id}
-                marginLeft="xs"
                 name={name}
                 onChange={handleChecked}
                 // eslint suppressor, text is needed to display on screen
@@ -99,7 +98,6 @@ const SelectableListItem = ({
         {variant == "radio" && (
           <>
             <Radio
-                className="ml_xs"
                 defaultChecked={defaultChecked}
                 id={id}
                 label={label}