playbook_ui 14.1.0.pre.alpha.PBNTR462starratingdefaultvalue3582 → 14.1.0.pre.alpha.fixaction3547

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

@@ -1,166 +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()
-    this.setDefaultValue()
-  }
-
-  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()
-      }
-    }
-  }
-
-  setDefaultValue() {
-    const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
-    const defaultValue = hiddenInput.value
-
-    if (defaultValue) {
-      this.updateStarColors(defaultValue)
-    }
+    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,11 +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: {}
-      prop :default_value
 
       def one_decimal_rating
         rating.to_f.round(1)
@@ -111,20 +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",
-          value: default_value || ""
-        )
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx

@@ -36,6 +36,7 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
                     <Icon
                         className={starIcon[colorOption].className}
                         customIcon={starIcon[colorOption].icon as unknown as { [key: string]: SVGElement }}
+                        icon=""
                     />
                 </React.Fragment>
             ))}
@@ -44,6 +45,7 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
                     <Icon
                         className={starIcon[backgroundType].className}
                         customIcon={starIcon[backgroundType].icon  as unknown as { [key: string]: SVGElement }}
+                        icon=""
                     />
                 </React.Fragment>
             ))}

data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx

@@ -80,6 +80,7 @@ const StarRatingInteractive = (props: StarRatingInteractiveProps) => {
                                 onMouseEnter: () => handleMouseEnter(starIndex),
                                 onMouseLeave: () => handleMouseLeave(),
                             }}
+                            icon=""
                             tabIndex={0}
                         />
                     </div>

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import classnames from "classnames";
 
-import { getAllIcons } from "../utilities/icons/allicons"
 import { buildCss, buildHtmlProps } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import DateTime from '../pb_kit/dateTime';
@@ -43,7 +42,7 @@ const Time = (props: TimeProps): React.ReactElement => {
     globalProps(props),
     className
   );
-  const clockIcon = getAllIcons()["clock"]
+
   const htmlProps = buildHtmlProps(htmlOptions);
 
   return (
@@ -55,10 +54,9 @@ const Time = (props: TimeProps): React.ReactElement => {
         unstyled
           ? (
               <span>
-                    <Icon
-                        className="svg-inline--fa clock"
-                        customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
-                    />
+                <Icon fixedWidth
+                    icon="clock"
+                />
                 {" "}
               </span>
             )
@@ -67,12 +65,10 @@ const Time = (props: TimeProps): React.ReactElement => {
               <Body color="light"
                   tag="span"
               >
-              <Icon
-                  className="svg-inline--fa clock"
-                  customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
-                  fixedWidth
-                  size={size === "md" ? "" : "sm"}
-              />
+                <Icon fixedWidth
+                    icon="clock"
+                    size={size === "md" ? "" : "sm"}
+                />
                 {" "}
               </Body>
             </>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -13,7 +13,7 @@
   <% if object.unstyled %>
     <% if object.show_icon %>
       <span>
-        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       </span>
     <% end %>
 
@@ -27,7 +27,7 @@
   <% elsif size == "md" %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
 
@@ -41,7 +41,7 @@
   <% else %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
-        <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true, size: "sm" }) %>
+        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>
 

data/app/pb_kits/playbook/pb_time/time.rb

@@ -38,10 +38,6 @@ module Playbook
       def pb_date_time
         Playbook::PbKit::PbDateTime.new(time, timezone)
       end
-
-      def clock_icon
-        "app/pb_kits/playbook/utilities/icons/clock.svg"
-      end
     end
   end
 end

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -25,7 +25,6 @@ export default [
   "order",
   "numberSpacing",
   "maxWidth",
-  "minWidth",
   "marginRight",
   "marginLeft",
   "marginTop",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -94,10 +94,6 @@ type MaxWidth = {
   maxWidth?: Sizes,
 }
 
-type MinWidth = {
-  minWidth?: Sizes,
-}
-
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -174,7 +170,7 @@ type ZIndex = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -198,14 +194,6 @@ const getPositioningPropsClasses = (position: string, value: Sizes | {value: str
   return css;
 };
 
-const filterClassName = (value: string): string => {
-  if (value.includes("%")) {
-    return value.replace("%", "_percent");
-  } else {
-    return value;
-  }
-};
-
 // Prop categories
 const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
 
@@ -332,15 +320,10 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += numberSpacing ? `ns_${numberSpacing} ` : ''
     return css
   },
-  minWidthProps: ({ minWidth }: MinWidth) => {
-    let css = ''
-    css += minWidth ? `min_width_${filterClassName(minWidth)} ` : ''
-    return css.trimEnd()
-  },
   maxWidthProps: ({ maxWidth }: MaxWidth) => {
     let css = ''
-    css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
-    return css.trimEnd()
+    css += maxWidth ? `max_width_${maxWidth } ` : ''
+    return css
   },
   zIndexProps: (zIndex: ZIndex) => {
     let css = ''