playbook_ui 14.1.0.pre.alpha.PA1477timestampkit3536 → 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -3,31 +3,47 @@
 @import "../tokens/opacity";
 @import "../tokens/shadows";
 @import "../pb_avatar/avatar";
+@import "../tokens/typography";
 
 $selector: ".pb_form_pill";
-$pb_form_pill_height: 37px;
-$form_pill_colors: (
-  primary: map-get($status_color_text, "primary"),
-  neutral: map-get($status_color_text, "neutral"),
-);
+$pb_form_pill_height: 27px;
+$form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $product_colors));
 
 
 [class^=pb_form_pill_kit] {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 calc($space-sm/3);
+  padding: 0 calc($space-md/2);
   height: $pb_form_pill_height;
   border-radius: calc($pb_form_pill_height/2);
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
+  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
+    font-size: $font_small !important;
+  }
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: mix($color_value, $card_light, 10%);
       @if ($color_name == "neutral") {
         background-color: $white;
         border: 1px solid $border_light;
+        .pb_form_pill_icon {
+          color: $text_lt_default;
+        }
+      }
+      @if ($color_name == "warning") {
+        background-color: mix($yellow, $card_light, 10%);
+        .pb_form_pill_icon {
+          color: $yellow;
+        }
+      }
+      @if ($color_name == "accessories") {
+        background-color: mix($product_8_background, $card_light, 10%);
+        .pb_form_pill_icon {
+          color: $product_8_background;
+        }
       }
       transition: background-color 0.2s ease;
       box-shadow: none;
@@ -38,12 +54,24 @@ $form_pill_colors: (
             background-color: mix($neutral, $card_light, 20%);
             border: 1px solid $border_light;
           }
+          @if ($color_name == "warning") {
+            background-color: mix($yellow, $card_light, 20%);
+          }
+          @if ($color_name == "accessories") {
+            background-color: mix($product_8_background, $card_light, 20%);
+          }
         }
         &:active {
           background-color: mix($color_value, $card_light, 30%);
           @if ($color_name == "neutral") {
             background-color: mix($neutral, $card_light, 30%);
           }
+          @if ($color_name == "warning") {
+            background-color: mix($yellow, $card_light, 30%);
+          }
+          @if ($color_name == "accessories") {
+            background-color: mix($product_8_background, $card_light, 30%);
+          }
         }
       }
       #{$selector}_text {
@@ -51,33 +79,54 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        padding-left: $space-sm;
-        padding-right: calc($space-sm/2);
+        @if ($color_name == "warning") {
+          color: $yellow;
+        }
+        padding: 0 $space-xs;
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: calc($space-sm/4);
-        padding-right: calc($space-sm/4);
         display: flex;
         align-items: center;
-        // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
-        // before size change (ticket 2 of 4) - change back to 100% when $pb_form_pill_height changed to 27px from 37px
-        height: 27px;
-        border-radius: 70px;
+        height: 17px;
+        border-radius: calc(50%);
         cursor: pointer;
+        @if ($color_name == "neutral") {
+          color: $text_lt_default;
+        }
         &:hover {
           background-color: mix($color_value, $card_light, 40%);
           @if ($color_name == "neutral") {
             background-color: mix($neutral, $card_light, 60%);
           }
         }
+        @if ($color_name == "warning") {
+          color: $yellow;
+        }
+        &:hover {
+          background-color: mix($color_value, $card_light, 40%);
+          @if ($color_name == "warning") {
+            background-color: mix($yellow, $card_light, 40%);
+          }
+        }
+        @if ($color_name == "accessories") {
+          color: $product_8_background;
+        }
+        &:hover {
+          @if ($color_name == "accessories") {
+            background-color: mix($product_8_background, $card_light, 40%);
+          }
+        }
       }
       #{$selector}_tag {
         color: $color_value;
-        padding-left: $space-sm;
+        padding: 0 $space-xs;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
+        @if ($color_name == "warning") {
+          color: $yellow;
+        }
       }
     }
   }
@@ -92,51 +141,62 @@ $form_pill_colors: (
   .pb_form_pill_icon {
     height: 12px !important;
     width: 12px !important;
+    padding-right: $space_xs;
+    + .pb_form_pill_text, + .pb_form_pill_tag {
+      padding-left: 0;
+    }
   }
   &.small {
-    height: fit-content;
-    height: -moz-fit-content;
+    height: 17px;
+    padding: 0 $space-xs;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: $font_base;
-      font-weight: $regular;
+      font-size: $font_smallest !important;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
       line-height: 1.7;
-      padding-left: $space_xs;
-      padding-right: 2px;
+      padding: 0 $space_xxs;
+    }
+    .pb_form_pill_close {
+      height: 10px;
+      border-radius: calc(50%);
     }
-    [class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
-      width: 20px;
-      height: 20px;
-      flex-basis: 20px;
-      &::before { line-height: 21px; }
+    [class^=pb_avatar_kit] .avatar_wrapper {
+      flex-basis: 16px;
+      height: 16px;
+      margin-top: 2px;
+      width: 16px;
+      &::before { line-height: 16.5px; }
+    }
+    .pb_form_pill_icon {
+      padding-right: $space_xxs;
+      + .pb_form_pill_text, + .pb_form_pill_tag {
+        padding-left: 0;
+      }
     }
   }
   &.dark {
     @each $color_name, $color_value in $form_pill_colors {
-      // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info. 
-      // Primary and Neutral are exceptions to the general rule in the handoff 
       &[class*=_#{$color_name}]  {
-      //   background-color: mix($color_value, $card_dark, 10%);
-        // .pb_form_pill_tag {
-        //   color: $color_name;
-        // }
-        // .pb_form_pill_close {
-        //   color: $color_name;
-        //   &:hover {
-        //     background-color: mix($color_value, $card_dark, 40%);
-        //   }
-        // }
-        // &:hover {
-        //   background-color: mix($color_value, $card_dark, 20%);
-        // }
-        // &:active {
-        //   background-color: mix($color_value, $card_dark, 30%);
-        // }
+        background-color: mix($color_value, $card_dark, 10%);
+        .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+          color: $color_name;
+        }
+        .pb_form_pill_close {
+          color: $color_name;
+          &:hover {
+            background-color: mix($color_value, $card_dark, 40%);
+          }
+        }
+        &:hover {
+          background-color: mix($color_value, $card_dark, 20%);
+        }
+        &:active {
+          background-color: mix($color_value, $card_dark, 30%);
+        }
         @if ($color_name == "neutral") {
           background-color: transparent;
           border: 1px solid $border_dark;
-          .pb_form_pill_text, .pb_form_pill_tag {
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
             color: $text_dk_default;
           }
           .pb_form_pill_close {
@@ -157,7 +217,7 @@ $form_pill_colors: (
         }
         @if ($color_name == "primary") {
           background-color: mix($active_dark, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag {
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
             color: $active_dark;
           }
           .pb_form_pill_close {
@@ -167,12 +227,192 @@ $form_pill_colors: (
             }
           }
           &:hover {
-            background-color: mix($active_dark, $card_dark, 20px);
+            background-color: mix($active_dark, $card_dark, 20%);
           }
           &:active {
             background-color: mix($active_dark, $card_dark, 30%);
           }
         }
+        @if ($color_name == "data_1") {
+          background-color: mix($active_dark, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+            color: mix($active_dark, $card_light, 90%);
+          }
+          .pb_form_pill_close {
+            color: mix($active_dark, $card_light, 90%);
+            &:hover {
+              background-color: mix($active_dark, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($active_dark, $card_dark, 20%);
+          }
+          &:active {
+            background-color: mix($data_1, $card_dark, 30%);
+          }
+        }
+        @if ($color_name == "data_6") {
+          background-color: mix($data_6, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+            color: $text_dk_light;
+          }
+          .pb_form_pill_close {
+            color: $text_dk_light;
+            &:hover {
+              background-color: mix($text_dk_light, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($data_6, $card_dark, 20%);
+          }
+          &:active {
+            background-color: mix($data_6, $card_dark, 30%);
+          }
+        }
+        @if ($color_name == "windows") {
+          background-color: mix($product_1_highlight, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+            color: $product_1_highlight;
+          }
+          .pb_form_pill_close {
+            color: $product_1_highlight;
+            &:hover {
+              background-color: mix($product_1_highlight, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($product_1_highlight, $card_dark, 20%);
+          }
+          &:active {
+            background-color: mix($product_1_highlight, $card_dark, 30%);
+          }
+        }
+        @if ($color_name == "siding") {
+          background-color: mix($product_2_highlight, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+            color: $product_2_highlight;
+          }
+          .pb_form_pill_close {
+            color: $product_2_highlight;
+            &:hover {
+              background-color: mix($product_2_highlight, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($product_2_highlight, $card_dark, 20%);
+          }
+          &:active {
+            background-color: mix($product_2_highlight, $card_dark, 30%);
+          }
+        }
+        @if ($color_name == "roofing") {
+          background-color: mix($product_5_highlight, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+            color: $product_5_highlight;
+          }
+          .pb_form_pill_close {
+            color: $product_5_highlight;
+            &:hover {
+              background-color: mix($product_5_highlight, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($product_5_highlight, $card_dark, 20%);
+          }
+          &:active {
+            background-color: mix($product_5_highlight, $card_dark, 30%);
+          }
+        }
+        @if ($color_name == "doors") {
+          background-color: mix($product_3_highlight, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+            color: $product_3_highlight;
+          }
+          .pb_form_pill_close {
+            color: $product_3_highlight;
+            &:hover {
+              background-color: mix($product_3_highlight, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($product_3_highlight, $card_dark, 20%);
+          }
+          &:active {
+            background-color: mix($product_3_highlight, $card_dark, 30%);
+          }
+        }
+        @if ($color_name == "gutters") {
+          background-color: mix($product_6_highlight, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+            color: $product_6_highlight;
+          }
+          .pb_form_pill_close {
+            color: $product_6_highlight;
+            &:hover {
+              background-color: mix($product_6_highlight, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($product_6_highlight, $card_dark, 20%);
+          }
+          &:active {
+            background-color: mix($product_6_highlight, $card_dark, 30%);
+          }
+        }
+        @if ($color_name == "solar") {
+          background-color: mix($product_4_highlight, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+            color: $product_4_highlight;
+          }
+          .pb_form_pill_close {
+            color: $product_4_highlight;
+            &:hover {
+              background-color: mix($product_4_highlight, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($product_4_highlight, $card_dark, 20%);
+          }
+          &:active {
+            background-color: mix($product_4_highlight, $card_dark, 30%);
+          }
+        }
+        @if ($color_name == "insulation") {
+          background-color: mix($product_7_highlight, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+            color: $product_7_highlight;
+          }
+          .pb_form_pill_close {
+            color: $product_7_highlight;
+            &:hover {
+              background-color: mix($product_7_highlight, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($product_7_highlight, $card_dark, 20%);
+          }
+          &:active {
+            background-color: mix($product_7_highlight, $card_dark, 30%);
+          }
+        }
+        @if ($color_name == "accessories") {
+          background-color: mix($product_8_highlight, $card_dark, 10%);
+          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+            color: $text_dk_light;
+          }
+          .pb_form_pill_close {
+            color: $text_dk_light;
+            &:hover {
+              background-color: mix($product_8_highlight, $card_dark, 40%);
+            }
+          }
+          &:hover {
+            background-color: mix($product_8_highlight, $card_dark, 20%);
+          }
+          &:active {
+            background-color: mix($product_8_highlight, $card_dark, 30%);
+          }
+        }
       }
     }
   }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -13,7 +13,7 @@ test('should render classname', () => {
     )
 
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_form_pill_kit_primary none')
+    expect(kit).toHaveClass('pb_form_pill_kit_neutral none')
 });
 
 test('displays text content', () => {
@@ -31,13 +31,13 @@ test('displays text content', () => {
 test('displays color variant', () => {
     render(
         <FormPill
-            color={"neutral"}
+            color={"primary"}
             data={{ testid: testId }}
             text={"test"}
         />
     )
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`pb_form_pill_kit_neutral none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary none`)
 });
 
 test('displays size variant', () => {
@@ -49,7 +49,7 @@ test('displays size variant', () => {
         />
     )
     const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_neutral small none`)
 });
 
 test('displays icon', () => {
@@ -60,5 +60,5 @@ test('displays icon', () => {
         />
     )
     const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_neutral_icon none`)
 });

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -17,7 +17,7 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
-  color?: "primary" | "neutral",
+  color?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   data?: {[key: string]: string},
   tabIndex?: number,
   icon?: string,
@@ -39,13 +39,14 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     closeProps = {},
     size = '',
     textTransform = 'none',
-    color = "primary",
+    color = "neutral",
     data = {},
     tabIndex,
     icon = "",
   } = props
 
   const iconClass = icon ? "_icon" : ""
+  const closeIconSize = size === "small" ? "xs" : "sm"
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(props),
@@ -69,7 +70,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           <Avatar
               imageUrl={avatarUrl}
               name={name}
-              size="xs"
+              size="xxs"
               status={null}
           />
           <Title
@@ -84,7 +85,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           <Avatar
               imageUrl={avatarUrl}
               name={name}
-              size="xs"
+              size="xxs"
               status={null}
           />
           <Title
@@ -94,6 +95,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           />
           <Icon
               className="pb_form_pill_icon"
+              color={color}
               icon={icon}
           />
         </>
@@ -102,6 +104,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         <>
           <Icon
               className="pb_form_pill_icon"
+              color={color}
               icon={icon}
           />
           <Title
@@ -126,6 +129,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         <Icon
             fixedWidth
             icon="times"
+            size={closeIconSize}
         />
       </div>
     </div>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb

@@ -0,0 +1,117 @@
+<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
+
+<%= pb_rails("form_pill", props: {
+    text: "Neutral",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "primary",
+    text: "Primary",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "success",
+    text: "Success",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "warning",
+    text: "Warning",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "error",
+    text: "Error",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "info",
+    text: "Info",
+    tabindex: 0,
+}) %>
+
+<%= pb_rails("title", props: { text: "Data Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
+
+<%= pb_rails("form_pill", props: {
+    color: "data_1",
+    text: "Data 1",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_2",
+    text: "Data 2",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_3",
+    text: "Data 3",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_4",
+    text: "Data 4",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_5",
+    text: "Data 5",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_6",
+    text: "Data 6",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_7",
+    text: "Data 7",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_8",
+    text: "Data 8",
+    tabindex: 0,
+}) %>
+
+<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
+
+<%= pb_rails("form_pill", props: {
+    color: "windows",
+    text: "Windows",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "siding",
+    text: "Siding",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "roofing",
+    text: "Roofing",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "doors",
+    text: "Doors",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "gutters",
+    text: "Gutters",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "solar",
+    text: "Solar",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "insulation",
+    text: "Insulation",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "accessories",
+    text: "Accessories",
+    tabindex: 0,
+}) %>