playbook_ui 14.3.2 → 14.4.0.pre.alpha.PLAY1529removefaeasy3876

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

@@ -7,10 +7,7 @@
 
 $selector: ".pb_form_pill";
 $pb_form_pill_height: 27px;
-$form_pill_colors: (
-  primary: map-get($status_color_text, "primary"),
-  neutral: map-get($status_color_text, "neutral"),
-);
+$form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $product_colors));
 
 
 [class^=pb_form_pill_kit] {
@@ -36,6 +33,18 @@ $form_pill_colors: (
           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;
       @media (hover:hover) {
@@ -45,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 {
@@ -58,6 +79,9 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
+        @if ($color_name == "warning") {
+          color: $yellow;
+        }
         padding: 0 $space-xs;
       }
       #{$selector}_close {
@@ -76,6 +100,23 @@ $form_pill_colors: (
             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;
@@ -83,6 +124,9 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
+        @if ($color_name == "warning") {
+          color: $yellow;
+        }
       }
     }
   }
@@ -132,25 +176,23 @@ $form_pill_colors: (
   }
   &.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_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%);
-        // }
+        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;
@@ -185,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.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,

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: "Primary",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "neutral",
+    text: "Neutral",
+    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,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx

@@ -0,0 +1,227 @@
+import React from 'react'
+import { FormPill, Title } from 'playbook-ui'
+
+const FormPillColors = (props) => {
+  return (
+    <div>
+      <Title
+          marginBottom="sm"
+          size={4}
+          text="Status Colors"
+          {...props}
+      />
+      <FormPill
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Primary"
+          {...props}
+      />
+      <FormPill
+          color="neutral"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Neutral"
+          {...props}
+      />
+      <FormPill
+          color="success"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Success"
+          {...props}
+      />
+      <FormPill
+          color="warning"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Warning"
+          {...props}
+      />
+      <FormPill
+          color="error"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Error"
+          {...props}
+      />
+      <FormPill
+          color="info"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Info"
+          {...props}
+      />
+      <Title
+          marginBottom="sm"
+          marginTop="md"
+          size={4}
+          text="Data Colors"
+          {...props}
+      />
+      <FormPill
+          color="data_1"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 1"
+          {...props}
+      />
+      <FormPill
+          color="data_2"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 2"
+          {...props}
+      />
+      <FormPill
+          color="data_3"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 3"
+          {...props}
+      />
+      <FormPill
+          color="data_4"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 4"
+          {...props}
+      />
+      <FormPill
+          color="data_5"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 5"
+          {...props}
+      />
+      <FormPill
+          color="data_6"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 6"
+          {...props}
+      />
+      <FormPill
+          color="data_7"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 7"
+          {...props}
+      />
+      <FormPill
+          color="data_8"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 8"
+          {...props}
+      />
+      <Title
+          marginBottom="sm"
+          marginTop="md"
+          size={4}
+          text="Product Colors"
+          {...props}
+      />
+      <FormPill
+          color="windows"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Windows"
+          {...props}
+      />
+      <FormPill
+          color="siding"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Siding"
+          {...props}
+      />
+      <FormPill
+          color="roofing"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Roofing"
+          {...props}
+      />
+      <FormPill
+          color="doors"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Doors"
+          {...props}
+      />
+      <FormPill
+          color="gutters"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Gutters"
+          {...props}
+      />
+      <FormPill
+          color="solar"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Solar"
+          {...props}
+      />
+      <FormPill
+          color="insulation"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Insulation"
+          {...props}
+      />
+      <FormPill
+          color="accessories"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Accessories"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillColors

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md

@@ -0,0 +1 @@
+The Status, Data, and Product colors highlighted above can be passed to the `color` prop. Primary is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the `color` prop. 

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

@@ -6,6 +6,7 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
+  - form_pill_colors: Form Pill Colors
 
   react:
   - form_pill_user: Form Pill User
@@ -13,3 +14,4 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
+  - form_pill_colors: Form Pill Colors

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

@@ -3,3 +3,4 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
+export { default as FormPillColors } from './_form_pill_colors.jsx'