playbook_ui 15.1.0.pre.alpha.PLAY251810942 → 15.1.0.pre.alpha.iconstatvaluescss10956

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea9f5c8acfb10e8fb3d40fea187b82854b1fb068361853c9b032f91fca4685ad
-  data.tar.gz: ff8472f9f4055f5b24cb17583c02c37fa5cc022f37bf7d36869cb4d2dc06feaf
+  metadata.gz: 023dae1c06846305a2de70d79d36fac8bb6e685e9eed4da1157a84559d3749c6
+  data.tar.gz: f8154d1b04e55366e85ddf6f2a21d2e465d49ba40d6a456ddb43450307930e91
 SHA512:
-  metadata.gz: a7a3df82c8d6bb097dc840c452b3658a4751f3ecb1efde791db7043328cca7a1450adb4d56b0b1d52e13ebd7e75163573105a2910bd01faeca49c05937086f83
-  data.tar.gz: 869e0b7510f081c28a277b0f77f1c96e2f63dccfc5955913140a00952741545f79e728370a234ded1cedba4fde080bbd396650e357a37b24ede37ac55428bfff
+  metadata.gz: d7fa8e2b752601706f4aa07fc61cb6c08280c21c315faf666ef054eac38a01e6e14e17fe5015de1d6c3734ba0fae3039b01223ab85a32a305166ca0bd06983e7
+  data.tar.gz: f61864e43078b05767ba7fc2335881b00ee99799b8731ca982e00a43fc952c5b085b5712626d66b410548f5b6e83bbaf200b2343bf6ef4f7aff8ee94b046e76d

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -10,15 +10,9 @@
 @import "./scss_partials/dropdown_animation";
 @import "dropdown_mixin";
 
-.pb_dropdown_default,
-.pb_dropdown_subtle,
-.pb_dropdown_default_separators_hidden,
-.pb_dropdown_subtle_separators_hidden {
+[class*="pb_dropdown"] {
   .dropdown_wrapper {
-    .dropdown_trigger_wrapper,
-    .dropdown_trigger_wrapper_focus,
-    .dropdown_trigger_wrapper_focus_select_only,
-    .dropdown_trigger_wrapper_select_only {
+    [class*="dropdown_trigger_wrapper"] {
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
@@ -54,11 +48,11 @@
         transition: box-shadow 0.15s ease-in-out;
       }
 
-      &.dropdown_trigger_wrapper_select_only {
+      &[class*="_select_only"] {
         box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
       }
 
-      &.dropdown_trigger_wrapper_focus {
+      &[class*="_focus"] {
         box-shadow: 0px 0px 0 1px $primary !important;
         transition: box-shadow 0.1s ease-in-out;
       }
@@ -75,12 +69,7 @@
       z-index: $z_1;
       width: 100%;
 
-      .pb_dropdown_option,
-      .pb_dropdown_option_list,
-      .pb_dropdown_option_selected,
-      .pb_dropdown_option_focused,
-      .pb_dropdown_option_list_focused,
-      .pb_dropdown_option_selected_focused {
+      [class*="pb_dropdown_option"] {
         padding-left: $space_sm;
         padding-right: $space_sm;
         padding-top: $space_xs;
@@ -90,14 +79,11 @@
           background-color: $bg_light;
         }
 
-        &.pb_dropdown_option_focused,
-        &.pb_dropdown_option_list_focused,
-        &.pb_dropdown_option_selected_focused {
+        &[class*="_focused"] {
           background-color: $bg_light;
         }
 
-        &.pb_dropdown_option_list,
-        &.pb_dropdown_option_list_focused {
+        &[class*="_list"] {
           border-bottom: 1px solid $border_light;
 
           &:hover, &:focus {
@@ -106,8 +92,7 @@
             }
           }
         }
-        &.pb_dropdown_option_selected,
-        &.pb_dropdown_option_selected_focused {
+        &[class*="selected"] {
           background-color: $primary;
           color: $white;
           [class^="pb_body"],
@@ -156,66 +141,41 @@
     }
 
     &.error {
-      .pb_body_kit_negative {
+      [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
 
-      .dropdown_trigger_wrapper,
-      .dropdown_trigger_wrapper_focus,
-      .dropdown_trigger_wrapper_focus_select_only,
-      .dropdown_trigger_wrapper_select_only {
+      [class*="dropdown_trigger_wrapper"] {
         border-color: $error;
         box-shadow: none !important;
       }
     }
   }
 
-  &.pb_dropdown_default_separators_hidden,
-  &.pb_dropdown_subtle_separators_hidden {
+  &[class*="separators_hidden"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
 
-        .pb_dropdown_option,
-        .pb_dropdown_option_list,
-        .pb_dropdown_option_selected,
-        .pb_dropdown_option_focused,
-        .pb_dropdown_option_list_focused,
-        .pb_dropdown_option_selected_focused {
+        [class*="pb_dropdown_option"] {
           border: none;
         }
       }
     }
   }
 
-  &.pb_dropdown_subtle,
-  &.pb_dropdown_subtle_separators_hidden {
+  &[class*="subtle"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
         
-        .pb_dropdown_option:first-child,
-        .pb_dropdown_option_list:first-child,
-        .pb_dropdown_option_selected:first-child,
-        .pb_dropdown_option_focused:first-child,
-        .pb_dropdown_option_list_focused:first-child,
-        .pb_dropdown_option_selected_focused:first-child {
+        [class*="pb_dropdown_option"]:first-child {
           margin-top: $space_xs;
         }
 
-        .pb_dropdown_option:last-child,
-        .pb_dropdown_option_list:last-child,
-        .pb_dropdown_option_selected:last-child,
-        .pb_dropdown_option_focused:last-child,
-        .pb_dropdown_option_list_focused:last-child,
-        .pb_dropdown_option_selected_focused:last-child {
+        [class*="pb_dropdown_option"]:last-child {
           margin-bottom: $space_xs;
         }
 
-        .pb_dropdown_option,
-        .pb_dropdown_option_list,
-        .pb_dropdown_option_selected,
-        .pb_dropdown_option_focused,
-        .pb_dropdown_option_list_focused,
-        .pb_dropdown_option_selected_focused {
+        [class*="pb_dropdown_option"] {
           margin: $space_xs;
           padding: $space_xs;
           border-radius: $border_radius_md;
@@ -233,44 +193,24 @@
           }
         }
         
-        .pb_dropdown_option:last-child::after,
-        .pb_dropdown_option_list:last-child::after,
-        .pb_dropdown_option_selected:last-child::after,
-        .pb_dropdown_option_focused:last-child::after,
-        .pb_dropdown_option_list_focused:last-child::after,
-        .pb_dropdown_option_selected_focused:last-child::after {
+        [class*="pb_dropdown_option"]:last-child::after {
           display: none; 
         }
       }
     }
   
-    &.pb_dropdown_subtle_separators_hidden {
+    &[class*="separators_hidden"] {
       .dropdown_wrapper {
         .pb_dropdown_container {
-          .pb_dropdown_option:first-child,
-          .pb_dropdown_option_list:first-child,
-          .pb_dropdown_option_selected:first-child,
-          .pb_dropdown_option_focused:first-child,
-          .pb_dropdown_option_list_focused:first-child,
-          .pb_dropdown_option_selected_focused:first-child {
+          [class*="pb_dropdown_option"]:first-child {
             margin-top: $space_xs;
           }
   
-          .pb_dropdown_option:last-child,
-          .pb_dropdown_option_list:last-child,
-          .pb_dropdown_option_selected:last-child,
-          .pb_dropdown_option_focused:last-child,
-          .pb_dropdown_option_list_focused:last-child,
-          .pb_dropdown_option_selected_focused:last-child {
+          [class*="pb_dropdown_option"]:last-child {
             margin-bottom: $space_xs;
           }
 
-          .pb_dropdown_option,
-          .pb_dropdown_option_list,
-          .pb_dropdown_option_selected,
-          .pb_dropdown_option_focused,
-          .pb_dropdown_option_list_focused,
-          .pb_dropdown_option_selected_focused {
+          [class*="pb_dropdown_option"] {
             padding: $space_xxs $space_xs;
             margin: $space_xxs $space_xs;
      
@@ -278,8 +218,7 @@
               height: 0px;
             }
 
-            &.pb_dropdown_option_selected,
-            &.pb_dropdown_option_selected_focused {
+            &[class*="selected"] {
               border-bottom: none;
             }
           }
@@ -290,10 +229,7 @@
 
   &.dark {
     .dropdown_wrapper {
-      .dropdown_trigger_wrapper,
-      .dropdown_trigger_wrapper_focus,
-      .dropdown_trigger_wrapper_focus_select_only,
-      .dropdown_trigger_wrapper_select_only {
+      [class*="dropdown_trigger_wrapper"] {
         @include pb_body_light_dark;
         background-color: rgba($white, 0.1) !important;
         background: none;
@@ -308,7 +244,7 @@
         [class^="pb_body"] {
           color: $white;
         }
-        &.dropdown_trigger_wrapper_select_only {
+        &[class*="_select_only"] {
           box-shadow: inset 0 -11px 20px rgba($white, 0.05);
         }
         .dropdown_input {
@@ -318,10 +254,7 @@
       }
 
       &.error {
-        .dropdown_trigger_wrapper,
-        .dropdown_trigger_wrapper_focus,
-        .dropdown_trigger_wrapper_focus_select_only,
-        .dropdown_trigger_wrapper_select_only {
+        [class*="dropdown_trigger_wrapper"] {
           border-color: $error_dark;
         }
       }
@@ -335,28 +268,19 @@
         color: $white !important;
       }
 
-      .pb_dropdown_option,
-      .pb_dropdown_option_list,
-      .pb_dropdown_option_selected,
-      .pb_dropdown_option_focused,
-      .pb_dropdown_option_list_focused,
-      .pb_dropdown_option_selected_focused {
+      [class*="pb_dropdown_option"] {
         &:hover {
           background-color: $hover_dark;
         }
 
-        &.pb_dropdown_option_focused,
-        &.pb_dropdown_option_list_focused,
-        &.pb_dropdown_option_selected_focused {
+        &[class*="_focused"] {
           background-color: $hover_dark;
         }
 
-        &.pb_dropdown_option_list,
-        &.pb_dropdown_option_list_focused {
+        &[class*="_list"] {
           border-color: rgba($white, 0.15);
         }
-        &.pb_dropdown_option_selected,
-        &.pb_dropdown_option_selected_focused {
+        &[class*="selected"] {
           background-color: $primary;
           border-bottom: rgba($white, 0.15);
         }

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -26,7 +26,7 @@ type IconCircleProps = {
     | "orange"
     | "green"
     | "lighter",
-}
+} & GlobalProps
 
 const IconCircle = (props: IconCircleProps) => {
   const {

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -3,51 +3,45 @@
 @import "../tokens/spacing";
 @import "../pb_icon_circle/icon_circle";
 
-[class^=pb_icon_stat_value_kit]{
+.pb_icon_stat_value_kit_horizontal,
+.pb_icon_stat_value_kit_vertical
+ {
   display: flex;
   align-items: baseline;
 
-  &[class*=_vertical]  {
+  &.pb_icon_stat_value_kit_vertical {
     flex-direction: column;
 
-    &[class*=_center]  {
+    &.text_align_center {
       align-items: center;
 
-      [class^=pb_title],
-      [class^=pb_body],
-      [class^=pb_caption] {
+      .pb_title_kit,
+      .pb_body_kit,
+      .pb_caption_kit_md {
         text-align: center;
       }
     }
 
-    &[class*=_right]  {
+    &.text_align_right {
       align-items: flex-end;
 
-      [class^=pb_title],
-      [class^=pb_body],
-      [class^=pb_caption] {
+      .pb_title_kit,
+      .pb_body_kit,
+      .pb_caption_kit_md {
         text-align: right;
       }
     }
-
-    [class^=pb_icon_circle] {
-      margin-bottom: $space-xs;
-    }
   }
 
-  &[class*=_horizontal]  {
+  &.pb_icon_stat_value_kit_horizontal {
     align-items: center;
 
-    &[class*=_center]  {
+    &.text_align_center {
       justify-content: center;
     }
 
-    &[class*=_right]  {
+    &.text_align_right {
       justify-content: flex-end;
     }
-
-    [class^=pb_icon_circle] {
-      margin-right: $space-sm;
-    }
   }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,8 +33,7 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-    | "lighter",
-}
+} & GlobalProps
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -50,13 +49,13 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'lighter',
+    variant = 'default',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
+    buildCss('pb_icon_stat_value_kit', orientation), globalProps(props),
     className
   )
   const titleSize = function(size: "sm" | "md" | "lg") {
@@ -101,6 +100,8 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
       <IconCircle
           dark={dark}
           icon={icon}
+          marginBottom={orientation == 'vertical' ? 'xs' : undefined}
+          marginRight={orientation == 'horizontal' ? 'sm' : undefined}
           size={size}
           variant={variant}
       />

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -3,6 +3,8 @@
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,
         icon: object.icon,
+        margin_right: object.icon_margin_right,
+        margin_bottom: object.icon_margin_bottom,
         size: object.size,
         variant: object.variant }) %>
 

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -9,8 +9,8 @@ module Playbook
                   values: %w[sm md lg],
                   default: "sm"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green orange lighter],
-                     default: "lighter"
+                     values: %w[default royal blue purple teal red yellow green orange],
+                     default: "default"
 
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
@@ -25,7 +25,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
+        generate_classname("pb_icon_stat_value_kit", orientation)
       end
 
       def value_string
@@ -41,6 +41,14 @@ module Playbook
           3
         end
       end
+
+      def icon_margin_right
+        orientation === "horizontal" && "sm"
+      end
+
+      def icon_margin_bottom
+        orientation === "vertical" && "xs"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -18,7 +18,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal")
     })
 
     test("renders icon", () => {
@@ -99,9 +99,10 @@ describe("IconStatValue Kit", () => {
                     value={64.18}
           />
             )
-    
+            const size = sizeProp === "sm" ? "3" : sizeProp === "md" ? "2" : "1"
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
+            const title = kit.querySelector(".pb_title_kit")
+            expect(title).toHaveClass(`pb_title_${size}`)
 
             cleanup()
         })
@@ -115,8 +116,7 @@ describe("IconStatValue Kit", () => {
         "teal",
         "red",
         "yellow",
-        "green",
-        "lighter"].forEach(
+        "green"].forEach(
             (colorProp) => {
             render(
                 <IconStatValue
@@ -128,9 +128,10 @@ describe("IconStatValue Kit", () => {
                     variant={colorProp}
           />
             )
-    
+
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_sm_${colorProp}`)
+            const iconCircle = kit.querySelector(`.pb_icon_circle_kit_size_sm_${colorProp}`)
+            expect(iconCircle).toBeInTheDocument()
 
             cleanup()
         }) 
@@ -149,7 +150,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical")
     })
 
 })