playbook_ui 14.0.0.pre.alpha.PBNTR415starratingform3493 → 14.0.0.pre.alpha.PBNTR416formpillsizes3506

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e48c673fcdd7852fd5977b8ce17d71c523ca69e9dcadec1d3180b966b59ce47c
-  data.tar.gz: c8074c07413cea2276de3d024279dc1094265934ddb4988831060d76e45b5114
+  metadata.gz: fb1f8b144b843e80a273836c1ca36bbeaf0805087e03977c4e2db65b180b75e9
+  data.tar.gz: c9fdf3e9bc64cb4ec72a048aabc43d05d17b2356e7637ee67dfe292dd25e5f0c
 SHA512:
-  metadata.gz: 3fd337fe00dc873d100fa544b1b0343d17aaadd361831a2de2923a06c36066760947c21af97b449ee4dc488e1e504e18a91549c2c2c3e80f431359710b2dbe8e
-  data.tar.gz: 2b7574bf9f460929281b5107c28a833411bd16d0f886a9060d1faf16cdc257de9ee227a4d7a25e11021d7e50ee25603c68e10a3881daeba1319338af9c08e86c
+  metadata.gz: efdf11b236ee0a90af8bae6c2bca5a3057841804746ffac6e76e6e3c939ebae392c4c352fd927e1b3b463f4a95d40bce997bf82b81ff823c296ba98aef013356
+  data.tar.gz: d65038299477dfa06796130b8a116578bc5ffff990a219a91dd223b8d0af4592e307a34192dd2f6b91c9b976f5703b13cabc12e6240ec02e33055b25a338c5c4

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -35,7 +35,6 @@
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
-  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -3,9 +3,10 @@
 @import "../tokens/opacity";
 @import "../tokens/shadows";
 @import "../pb_avatar/avatar";
+@import "../tokens/typography";
 
 $selector: ".pb_form_pill";
-$pb_form_pill_height: 37px;
+$pb_form_pill_height: 27px;
 $form_pill_colors: (
   primary: map-get($status_color_text, "primary"),
   neutral: map-get($status_color_text, "neutral"),
@@ -16,18 +17,24 @@ $form_pill_colors: (
   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;
+        }
       }
       transition: background-color 0.2s ease;
       box-shadow: none;
@@ -51,20 +58,18 @@ $form_pill_colors: (
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        padding-left: $space-sm;
-        padding-right: calc($space-sm/2);
+        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") {
@@ -74,7 +79,7 @@ $form_pill_colors: (
       }
       #{$selector}_tag {
         color: $color_value;
-        padding-left: $space-sm;
+        padding: 0 $space-xs;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
@@ -92,24 +97,37 @@ $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 {
@@ -118,7 +136,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_tag {
+        // .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
         //   color: $color_name;
         // }
         // .pb_form_pill_close {
@@ -136,7 +154,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_text, .pb_form_pill_tag, .pb_form_pill_icon {
             color: $text_dk_default;
           }
           .pb_form_pill_close {
@@ -157,7 +175,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 {

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

@@ -46,6 +46,7 @@ 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),
@@ -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/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: "xs" }) %>
+    <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
     <%= 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", icon: object.icon }) %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
       <% if object.icon.present? %>
-        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, 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 }) %>
+    <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
   <% end %>
 <% end %>

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

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

data/app/pb_kits/playbook/pb_star_rating/index.js

@@ -1,156 +1,119 @@
-import PbEnhancedElement from "../pb_enhanced_element"
+import PbEnhancedElement from "../pb_enhanced_element";
 
-const STAR_RATING_WRAPPER_SELECTOR = "[data-pb-star-rating-wrapper]"
-const STAR_RATING_SELECTOR = "[data-pb-star-rating]"
-const STAR_RATING_INPUT_DATA_SELECTOR = "[data-pb-star-rating-input]"
+const STAR_RATING_SELECTOR = "[data-pb-star-rating]";
+const STAR_RATING_INPUT_ID = "star-rating-input";
 
 export default class PbStarRating extends PbEnhancedElement {
   static get selector() {
-    return STAR_RATING_WRAPPER_SELECTOR
+    return STAR_RATING_SELECTOR;
   }
 
   connect() {
-    this.addEventListeners()
-    this.handleFormReset()
-  }
-
-  addEventListeners() {
-    this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
-      star.addEventListener("click", (event) => {
-        const clickedStarId = event.currentTarget.id
-        this.updateStarColors(clickedStarId)
-        this.updateHiddenInputValue(clickedStarId)
-        this.clearFormValidation()
-      })
+    this.element.addEventListener("click", (event) => {
+      const clickedStarId = event.currentTarget.id;
+      this.updateStarColors(clickedStarId);
+      this.updateHiddenInputValue(clickedStarId);
+    });
 
+    document.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
       star.addEventListener("mouseenter", (event) => {
         const hoveredStarId = event.currentTarget.id
-        this.updateStarHoverColors(hoveredStarId)
+        this.updateStarHoverColors(hoveredStarId);
       })
 
       star.addEventListener("mouseleave", () => {
-        this.removeStarHoverColors()
+        this.removeStarHoverColors();
       })
 
       star.addEventListener("keydown", (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault()
-          this.handleStarClick(star.id)
+          event.preventDefault();
+          this.handleStarClick(star.id);
         }
       })
     })
   }
 
   handleStarClick(starId) {
-    this.updateStarColors(starId)
-    this.updateHiddenInputValue(starId)
+    this.updateStarColors(starId);
+    this.updateHiddenInputValue(starId);
   }
 
   updateStarColors(clickedStarId) {
-    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
+    const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
 
     allStars.forEach(star => {
-      const starId = star.id
-      const icon = star.querySelector(".interactive-star-icon")
+      const starId = star.id;
+      const icon = star.querySelector(".interactive-star-icon");
 
       if (icon) {
         if (starId <= clickedStarId) {
           if (star.classList.contains("yellow_star")) {
-            icon.classList.add("yellow-star-selected")
+            icon.classList.add("yellow-star-selected");
           } else if (star.classList.contains("primary_star_light")) {
-            icon.classList.add("primary-star-selected")
+            icon.classList.add("primary-star-selected");
           } else if (star.classList.contains("primary_star_dark")) {
-            icon.classList.add("primary-star-selected")
+            icon.classList.add("primary-star-selected");
           } else if (star.classList.contains("subtle_star_light")) {
-            icon.classList.add("subtle-star-selected")
+            icon.classList.add("subtle-star-selected");
           } else if (star.classList.contains("subtle_star_dark")) {
-            icon.classList.add("subtle-star-selected")
+            icon.classList.add("subtle-star-selected");
           } else {
-            icon.classList.add("yellow-star-selected")
+            icon.classList.add("yellow-star-selected");
           }
         } else {
-          icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
+          icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected");
         }
-        icon.classList.remove("star-hovered")
+        icon.classList.remove("star-hovered");
       }
-    })
+    });
   }
 
   updateHiddenInputValue(value) {
-    const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
+    const hiddenInput = document.getElementById(STAR_RATING_INPUT_ID);
     if (hiddenInput) {
-      hiddenInput.value = value
+      hiddenInput.value = value;
     }
   }
 
   updateStarHoverColors(hoveredStarId) {
-    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
+    const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
   
     allStars.forEach(star => {
-      const starId = star.id
-      const icon = star.querySelector(".interactive-star-icon")
+      const starId = star.id;
+      const icon = star.querySelector(".interactive-star-icon");
   
       if (icon) {
         if (starId <= hoveredStarId) {
           if (!icon.classList.contains("yellow-star-selected") && 
               !icon.classList.contains("primary-star-selected") && 
               !icon.classList.contains("subtle-star-selected")) {
-            icon.classList.add("star-hovered")
+            icon.classList.add("star-hovered");
           }
         } else {
-          icon.classList.remove("star-hovered")
+          icon.classList.remove("star-hovered");
         }
       }
-    })
+    });
   }
 
 
   removeStarHoverColors() {
-    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
+    const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
   
     allStars.forEach(star => {
-      const icon = star.querySelector(".interactive-star-icon")
+      const icon = star.querySelector(".interactive-star-icon");
       if (icon) {
         if (!icon.classList.contains("yellow-star-selected") &&
             !icon.classList.contains("primary-star-selected") &&
             !icon.classList.contains("subtle-star-selected")) {
-          icon.classList.remove("star-hovered")
+          icon.classList.remove("star-hovered");
         }
       }
-    })
+    });
   }
 
   isStarSelected() {
-    return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0
-  }
-
-  handleFormReset() {
-    const form = this.element.closest("form")
-    if (form) {
-      form.addEventListener("reset", () => {
-        this.updateHiddenInputValue("")
-        this.resetStarRatingValues()
-      })
-    }
-  }
-
-  resetStarRatingValues() {
-    const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
-    allStars.forEach(star => {
-      const icon = star.querySelector(".interactive-star-icon")
-      if (icon) {
-        icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
-      }
-    })
-  }
-
-  clearFormValidation() {
-    const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
-    if (hiddenInput.checkValidity()) {
-      const errorLabelElement = this.element.querySelector(".pb_body_kit_negative")
-      if (errorLabelElement) {
-        errorLabelElement.remove()
-      }
-    }
+    return document.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0;
   }
 }

data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb

@@ -39,13 +39,11 @@
       <% end %>
   
     <% else %>
-      <%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, orientation: "column" }) do %>
+      <%= pb_rails("flex", props: { orientation: "column" }) do %>
         <% if object.label.present? %>
           <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
         <% end %>
-
-        <%= hidden_input_tag %>
-
+        <input type="hidden" id="star-rating-input" value="" name="<%= object.name %>"/>
         <%= pb_rails("flex", props: { orientation: "row" }) do %>
           <% object.denominator.times do |index| %>
             <div data-pb-star-rating id="<%= index + 1 %>" class="<%= star_color %>">

data/app/pb_kits/playbook/pb_star_rating/star_rating.rb

@@ -30,10 +30,6 @@ module Playbook
                      default: "display"
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
-      prop :input_options, type: Playbook::Props::HashProp,
-                           default: {}
 
       def one_decimal_rating
         rating.to_f.round(1)
@@ -110,19 +106,6 @@ module Playbook
       def classname
         generate_classname("pb_star_rating_kit")
       end
-
-      def hidden_input_tag
-        tag(:input, all_input_options)
-      end
-
-      def all_input_options
-        input_options.merge(
-          data: { "pb-star-rating-input": true },
-          name: name,
-          required: required,
-          style: "display: none"
-        )
-      end
     end
   end
 end