playbook_ui 14.0.0.pre.alpha.PBNTR416formpillsizes3506 → 14.0.0.pre.alpha.PLAY1475bumpaxecoredependency3483

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb1f8b144b843e80a273836c1ca36bbeaf0805087e03977c4e2db65b180b75e9
-  data.tar.gz: c9fdf3e9bc64cb4ec72a048aabc43d05d17b2356e7637ee67dfe292dd25e5f0c
+  metadata.gz: 2abd5d33f04276dea9344ad26c67d1307e944b5627cf95aeb50eb60db7ea93d5
+  data.tar.gz: '096e6c48b3f6e9f301cb36155dd2c94dc942238049c486c3433a349a90c7311b'
 SHA512:
-  metadata.gz: efdf11b236ee0a90af8bae6c2bca5a3057841804746ffac6e76e6e3c939ebae392c4c352fd927e1b3b463f4a95d40bce997bf82b81ff823c296ba98aef013356
-  data.tar.gz: d65038299477dfa06796130b8a116578bc5ffff990a219a91dd223b8d0af4592e307a34192dd2f6b91c9b976f5703b13cabc12e6240ec02e33055b25a338c5c4
+  metadata.gz: 1d80b5d648f3d2ccf778878ba4dfcd71aab3a6b8923dad57591c8082331813a783bf2260aae48d6cf903d8d87e2a1b3025071a2c1fdbee315879a82a51fe5a91
+  data.tar.gz: 6f9b724b58caa5ad0bba0fde990e815cbbbb507d8563eb13fc13545f3734ac6a46a791836deb50d6f18344810fe34dccc21ac50527601726b42af0afb98a189a

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

@@ -3,10 +3,9 @@
 @import "../tokens/opacity";
 @import "../tokens/shadows";
 @import "../pb_avatar/avatar";
-@import "../tokens/typography";
 
 $selector: ".pb_form_pill";
-$pb_form_pill_height: 27px;
+$pb_form_pill_height: 37px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
   neutral: map-get($status_color_text, "neutral"),
@@ -17,24 +16,18 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 calc($space-md/2);
+  padding: 0 calc($space-sm/3);
   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;
-        }
       }
       transition: background-color 0.2s ease;
       box-shadow: none;
@@ -58,18 +51,20 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        padding: 0 $space-xs;
+        padding-left: $space-sm;
+        padding-right: calc($space-sm/2);
       }
       #{$selector}_close {
         color: $color_value;
+        padding-left: calc($space-sm/4);
+        padding-right: calc($space-sm/4);
         display: flex;
         align-items: center;
-        height: 17px;
-        border-radius: calc(50%);
+        // 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;
         cursor: pointer;
-        @if ($color_name == "neutral") {
-          color: $text_lt_default;
-        }
         &:hover {
           background-color: mix($color_value, $card_light, 40%);
           @if ($color_name == "neutral") {
@@ -79,7 +74,7 @@ $form_pill_colors: (
       }
       #{$selector}_tag {
         color: $color_value;
-        padding: 0 $space-xs;
+        padding-left: $space-sm;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
@@ -97,37 +92,24 @@ $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: 17px;
-    padding: 0 $space-xs;
+    height: fit-content;
+    height: -moz-fit-content;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: $font_smallest !important;
+      font-size: $font_base;
+      font-weight: $regular;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
       line-height: 1.7;
-      padding: 0 $space_xxs;
-    }
-    .pb_form_pill_close {
-      height: 10px;
-      border-radius: calc(50%);
+      padding-left: $space_xs;
+      padding-right: 2px;
     }
-    [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;
-      }
+    [class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
+      width: 20px;
+      height: 20px;
+      flex-basis: 20px;
+      &::before { line-height: 21px; }
     }
   }
   &.dark {
@@ -136,7 +118,7 @@ $form_pill_colors: (
       // 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 {
+        // .pb_form_pill_tag {
         //   color: $color_name;
         // }
         // .pb_form_pill_close {
@@ -154,7 +136,7 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           background-color: transparent;
           border: 1px solid $border_dark;
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+          .pb_form_pill_text, .pb_form_pill_tag {
             color: $text_dk_default;
           }
           .pb_form_pill_close {
@@ -175,7 +157,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_icon {
+          .pb_form_pill_text, .pb_form_pill_tag {
             color: $active_dark;
           }
           .pb_form_pill_close {

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

@@ -46,7 +46,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   } = props
 
   const iconClass = icon ? "_icon" : ""
-  const closeIconSize = size === "small" ? "xs" : "sm"
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(props),
@@ -70,7 +69,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           <Avatar
               imageUrl={avatarUrl}
               name={name}
-              size="xxs"
+              size="xs"
               status={null}
           />
           <Title
@@ -85,7 +84,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           <Avatar
               imageUrl={avatarUrl}
               name={name}
-              size="xxs"
+              size="xs"
               status={null}
           />
           <Title
@@ -95,7 +94,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
           />
           <Icon
               className="pb_form_pill_icon"
-              color={color}
               icon={icon}
           />
         </>
@@ -104,7 +102,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         <>
           <Icon
               className="pb_form_pill_icon"
-              color={color}
               icon={icon}
           />
           <Title
@@ -129,7 +126,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         <Icon
             fixedWidth
             icon="times"
-            size={closeIconSize}
         />
       </div>
     </div>

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

@@ -5,11 +5,11 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-  - form_pill_icon: Form Pill Icon
+  # - form_pill_icon: Form Pill Icon
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-  - form_pill_icon: Form Pill Icon
+  # - form_pill_icon: Form Pill Icon

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,19 +1,19 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
-    <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
+    <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
     <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
     <% if object.icon.present? %>
-      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
       <% if object.icon.present? %>
-        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
       <% end %>
       <% if object.text.present? %>
         <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
       <% end %>
   <% end %>
   <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-    <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
+    <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -32,10 +32,6 @@ module Playbook
       def icon_class
         icon ? "icon" : nil
       end
-
-      def close_icon_size
-        size == "small" ? "xs" : "sm"
-      end
     end
   end
 end