playbook_ui 16.2.0.pre.alpha.faiconbuttonfix14520 → 16.2.0.pre.alpha.iconfixes14577

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3ab15b5936d85e9fe352d2293813967937694dc61e985fafb0ec9d21d6df752d
-  data.tar.gz: 6bab9ca4069487ba52e762667f86f663a2a27c3c300c537a073996c9016cea49
+  metadata.gz: 4658800f5f85c4198d6f5396e8e51de4ac4440c905ee8b1d687dd635b9116fde
+  data.tar.gz: 5575760a10fb40d744d6af0979941b6b8139ddaa03b8816c7b86904a34814245
 SHA512:
-  metadata.gz: 14144c41830ccabcc9cb3a7572e6197cd970ca4300b28aa2d4285ff06bae722b261f8613e50b38424caa67d801a9928a00abff1acb3bf2ebeef7355f9bf14f8a
-  data.tar.gz: d6d1f2dc9c37b53d0211b5bccbd0cd2af1594c9cdf2b20eb907814ec40be28edcfc677bb0a2c27ecbb36d728c06aff220529a52d42d1b60152d60e9ab4400281
+  metadata.gz: d2e9025088024e65f25ac470260585c78ef7ec59651100f1360bf1f548e587cfa37dc566710c37748928919705fa4ce20a1333a4fb7ca27a09318288ea10e65e
+  data.tar.gz: 8f78b511d51ae7912e9e5caad1bb8d9f25158776f63f481cd05969631818306c63e6357dd950567bef10c673398b7379a411be44a06aa35375e9aa15926e4f2c

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -115,10 +115,9 @@ $pb_button_sizes: (
 
   // Icon-only button (icon prop set, no text) - square with equal padding
   // Rails: uses .pb_button_icon_only class
-  // React: when pb_button_content is empty (no text). Do not match when content has
-  // text + icon (e.g. "Exit Fullscreen" + FA icon) which can include empty spans.
+  // React: detects when pb_button_content has an empty text span
   &.pb_button_icon_only,
-  &:has(.pb_button_content:empty) {
+  &:has(.pb_button_content > span:empty) {
     aspect-ratio: 1;
     min-width: auto;
     width: auto;

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -221,11 +221,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
         {!hideLabel && (
            <label htmlFor={pickerId}>
             {requiredIndicator ? (
-              <Caption className="pb_date_picker_kit_label">
+              <Caption className="pb_date_picker_kit_label"
+                  color="lighter"
+              >
                 {label} <span style={{ color: `${colors.error}` }}>*</span>
               </Caption>
             ) : (
               <Caption className="pb_date_picker_kit_label"
+                  color="lighter"
                   text={label}
               />
             )}

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -7,11 +7,11 @@
     <% if !object.hide_label && object.label %>
       <label for="<%= object.picker_id %>">
         <% if object.required_indicator %>
-          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label" }) do %>
+          <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) do %>
             <%= object.label %><span style="color: #DA0014;"> *</span>
           <% end %>
         <% else %>
-          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label" }) %>
+          <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_date_picker_kit_label", color: "lighter" }) %>
         <% end %>
       </label>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -479,6 +479,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     {requiredIndicator ? (
                       <Caption
                           className="pb_dropdown_kit_label"
+                          color="lighter"
                           dark={dark}
                           marginBottom="xs"
                       >
@@ -487,6 +488,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     ) : (
                       <Caption
                           className="pb_dropdown_kit_label"
+                          color="lighter"
                           dark={dark}
                           marginBottom="xs"
                           text={label}

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -2,11 +2,11 @@
     <% if object.label.present? %>
         <label for="<%= object.select_id %>" data-dropdown="pb-dropdown-label">
             <% if object.required_indicator %>
-                <%= pb_rails("caption", props: { margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) do %>
+                <%= pb_rails("caption", props: { margin_bottom: "xs", classname: "pb_dropdown_kit_label", color: "lighter", dark: object.dark }) do %>
                     <%= object.label %><span style="color: #DA0014;"> *</span>
                 <% end %>
             <% else %>
-                <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) %>
+                <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", color: "lighter", dark: object.dark }) %>
             <% end %>
         </label>
     <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -212,7 +212,7 @@ test('generated label prop', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  const label = kit.querySelector('.pb_caption_kit_md')
+  const label = kit.querySelector('.pb_caption_kit_md_lighter')
   expect(label).toHaveTextContent('Countries')
 })
 

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -2,10 +2,13 @@
 
 require "open-uri"
 require "json"
+require "digest"
 
 module Playbook
   module PbIcon
     class Icon < Playbook::KitBase
+      ICON_PATH_DEV_CACHE_TTL_SECONDS = 2
+
       prop :border, type: Playbook::Props::Boolean,
                     default: false
       prop :fixed_width, type: Playbook::Props::Boolean,
@@ -82,30 +85,35 @@ module Playbook
         )
       end
 
+      # Instance-level memoization of alias map lookup result
       def icon_alias_map
-        return unless Rails.application.config.respond_to?(:icon_alias_path)
+        return @icon_alias_map if defined?(@icon_alias_map)
 
-        base_path = Rails.application.config.icon_alias_path
-        json = File.read(Rails.root.join(base_path))
-        JSON.parse(json)["aliases"].freeze
+        @icon_alias_map = self.class.icon_alias_map
       end
 
+      # Instance-level memoization of resolved asset path
       def asset_path
-        return unless Rails.application.config.respond_to?(:icon_path)
+        return @asset_path if defined?(@asset_path)
+
+        @asset_path =
+          if Rails.application.config.respond_to?(:icon_path)
+            resolved_icon = resolve_alias(icon)
+            path = self.class.icon_path_index[resolved_icon]
+            path if path && File.exist?(path)
+          end
+      end
+
+      def is_svg?
+        return @is_svg if defined?(@is_svg)
 
-        base_path = Rails.application.config.icon_path
-        resolved_icon = resolve_alias(icon)
-        icon_path = Dir.glob(Rails.root.join(base_path, "**", "#{resolved_icon}.svg")).first
-        icon_path if icon_path && File.exist?(icon_path)
+        @is_svg = (icon || custom_icon.to_s).include?(".svg") || asset_path.present?
       end
 
       def render_svg
         doc = Nokogiri::XML(URI.open(asset_path || icon || custom_icon)) # rubocop:disable Security/Open
-        svg = doc.at_css "svg"
-
-        unless svg
-          return "" # Return an empty string if SVG element is not found
-        end
+        svg = doc.at_css("svg")
+        return "" unless svg
 
         svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
         svg["id"] = object.id
@@ -113,7 +121,9 @@ module Playbook
         svg["width"] = "auto"
         svg["tabindex"] = object.tabindex
         fill_color = object.color || "currentColor"
-        doc.at_css("path")["fill"] = fill_color
+
+        # Safely apply fill to all paths (avoids nil errors + handles multi-path icons)
+        doc.css("path").each { |p| p["fill"] = fill_color }
 
         if object.data.present?
           object.data.each do |key, value|
@@ -135,14 +145,144 @@ module Playbook
         ""
       end
 
-      def is_svg?
-        (icon || custom_icon.to_s).include?(".svg") || asset_path.present?
+      # Class-level caches
+      class << self
+        @cache_mutex = Mutex.new
+        attr_reader :cache_mutex
+
+        # Cache aliases.json across the process, but invalidate when the file changes (dev-safe)
+        def icon_alias_map
+          return @icon_alias_map if alias_cache_fresh?
+
+          cache_mutex.synchronize do
+            return @icon_alias_map if alias_cache_fresh?
+
+            @icon_alias_map =
+              if Rails.application.config.respond_to?(:icon_alias_path)
+                base_path = Rails.application.config.icon_alias_path
+                full_path = Rails.root.join(base_path)
+                @icon_alias_map_mtime = safe_mtime(full_path)
+
+                json = File.read(full_path)
+                parsed = JSON.parse(json)
+                parsed.fetch("aliases", {}).freeze
+              end
+          end
+
+          @icon_alias_map
+        end
+
+        # Cache an index of icon_name to file path for all SVGs in the configured directory, with invalidation based on directory mtime
+        # Avoids recursive Dir.glob for every icon render
+        def icon_path_index
+          return @icon_path_index if index_cache_fresh?
+
+          cache_mutex.synchronize do
+            return @icon_path_index if index_cache_fresh?
+
+            @icon_path_index =
+              if Rails.application.config.respond_to?(:icon_path)
+                base_path = Rails.application.config.icon_path
+                root = Rails.root.join(base_path)
+
+                # If path doesn't exist, keep behavior aligned (no path resolution)
+                if Dir.exist?(root)
+                  @icon_path_index_cache_key = icon_path_cache_key(root)
+
+                  # One scan builds the map for O(1) lookups
+                  # Key is the filename (without .svg) to match existing usage
+                  index = {}
+                  Dir.glob(File.join(root.to_s, "**", "*.svg")).sort.each do |p|
+                    name = File.basename(p, ".svg")
+                    index[name] ||= p
+                  end
+                  index.freeze
+                else
+                  @icon_path_index_cache_key = nil
+                  {}
+                end
+              else
+                {}
+              end
+
+            @icon_path_index_checked_at = monotonic_now if Rails.env.development?
+          end
+
+          @icon_path_index
+        end
+
+      private
+
+        def alias_cache_fresh?
+          return false unless defined?(@icon_alias_map)
+
+          return true unless Rails.application.config.respond_to?(:icon_alias_path)
+
+          full_path = Rails.root.join(Rails.application.config.icon_alias_path)
+          safe_mtime(full_path) == @icon_alias_map_mtime
+        rescue
+          false
+        end
+
+        def index_cache_fresh?
+          return false unless defined?(@icon_path_index)
+
+          return true unless Rails.application.config.respond_to?(:icon_path)
+
+          # In development, skip expensive tree digest checks for a short window
+          # This keeps hot-reload behavior while avoiding per-render full scans
+          return true if Rails.env.development? && within_dev_icon_index_ttl?
+
+          root = Rails.root.join(Rails.application.config.icon_path)
+          fresh = icon_path_cache_key(root) == @icon_path_index_cache_key
+          @icon_path_index_checked_at = monotonic_now
+          fresh
+        rescue
+          false
+        end
+
+        def within_dev_icon_index_ttl?
+          return false unless defined?(@icon_path_index_checked_at)
+
+          (monotonic_now - @icon_path_index_checked_at) < ICON_PATH_DEV_CACHE_TTL_SECONDS
+        rescue
+          false
+        end
+
+        def monotonic_now
+          Process.clock_gettime(Process::CLOCK_MONOTONIC)
+        end
+
+        def icon_path_cache_key(root)
+          return safe_mtime(root) unless Rails.env.development?
+
+          digest = Digest::SHA1.new
+          root_prefix = "#{root}/"
+
+          Dir.glob(File.join(root.to_s, "**", "*.svg")).sort.each do |path|
+            stat = File.stat(path)
+            digest << path.delete_prefix(root_prefix)
+            digest << stat.mtime.to_f.to_s
+            digest << stat.size.to_s
+          end
+
+          digest.hexdigest
+        rescue
+          nil
+        end
+
+        def safe_mtime(path)
+          File.exist?(path) ? File.mtime(path) : nil
+        rescue
+          nil
+        end
       end
 
     private
 
       def resolve_alias(icon)
         return icon unless icon_alias_map
+        return icon if icon.nil?
 
         aliases = icon_alias_map[icon]
         return icon unless aliases
@@ -155,8 +295,8 @@ module Playbook
       end
 
       def file_exists?(alias_name)
-        base_path = Rails.application.config.icon_path
-        File.exist?(Dir.glob(Rails.root.join(base_path, "**", "#{alias_name}.svg")).first)
+        # Use the cached index (no recursive glob)
+        self.class.icon_path_index.key?(alias_name)
       end
 
       def svg_size

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -532,6 +532,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
           {requiredIndicator ? (
             <Caption
                 className="pb_multi_level_select_kit_label"
+                color="lighter"
                 marginBottom="xs"
             >
               {label} <span className="required_indicator">*</span>
@@ -539,6 +540,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
           ) : (
             <Caption
                 className="pb_multi_level_select_kit_label"
+                color="lighter"
                 marginBottom="xs"
                 text={label}
             />

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -119,12 +119,14 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
           {hasLabel && (requiredIndicator ? (
             <Caption
                 className="passphrase-label"
+                color="lighter"
             >
               {label} <span className="required_indicator">*</span>
             </Caption>
           ) : (
             <Caption
                 className="passphrase-label"
+                color="lighter"
                 text={label}
             />
           ))}
@@ -142,12 +144,14 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
                   orientation="column"
               >
                 <Caption
+                    color="lighter"
                     marginBottom="xs"
                     text="Tips for a good passphrase"
                 />
                 <div>
                   {tips.map((tip, i) => (
                     <Caption
+                        color="lighter"
                         key={i}
                         marginBottom="xs"
                         size="xs"

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -262,6 +262,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         {
           requiredIndicator ? (
             <Caption className="pb_text_input_kit_label"
+                color="lighter"
                 marginBottom="xs"
             >
               {label} <span style={{ color: `${colors.error}` }}>*</span>
@@ -269,6 +270,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
           ) : (
             <Caption
                 className="pb_text_input_kit_label"
+                color="lighter"
                 marginBottom="xs"
                 text={label}
             />

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -134,12 +134,14 @@ const Select = ({
         >
           {requiredIndicator ? (
             <Caption 
+                color="lighter"
                 dark={props.dark}>
               {label}
               <span style={{ color: "#DA0014" }}> *</span>
             </Caption>
           ) : (
             <Caption 
+                color="lighter"
                 dark={props.dark}
                 text={label}
             />

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -4,11 +4,11 @@
   <% if object.label %>
     <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
       <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { dark: object.dark }) do %>
+        <%= pb_rails("caption", props: { color: "lighter", dark: object.dark }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
         <% end %>       
       <% else %>
-        <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
       <% end %>
     </label>
   <% end %>

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

@@ -37,7 +37,7 @@
     <% else %>
       <%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, orientation: "column" }) do %>
         <% if object.label.present? %>
-          <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
+          <%= pb_rails("caption", props: { color: "lighter", text: object.label, margin_bottom:"xs"}) %>
         <% end %>
 
         <%= hidden_input_tag %>

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

@@ -54,6 +54,7 @@ const StarRatingInteractive = (props: StarRatingInteractiveProps) => {
             {label &&
                 <Caption
                     className="pb_star_rating_kit_label"
+                    color="lighter"
                     marginBottom="xs"
                     text={label} 
                 />

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -253,6 +253,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
             requiredIndicator ? (
               <Caption
                   className="pb_text_input_kit_label"
+                  color="lighter"
                   dark={dark}
               >
                 {label} <span style={{ color: dark ? colors.text_error_dark : colors.text_error }}>*</span>
@@ -260,6 +261,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
             ) : (
                 <Caption
                     className="pb_text_input_kit_label"
+                    color="lighter"
                     dark={dark}
                     text={label}
               />

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -2,11 +2,11 @@
   <% if object.label.present? %>
     <label for="<%= object.input_options[:id] || object.id %>">
       <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
+        <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label", color: "lighter" }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
         <% end %>
       <% else %>
-        <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label", color: "lighter" }) %>
       <% end %>
     </label>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -133,11 +133,14 @@ const Textarea = ({
       <label htmlFor={id}>
       {
         requiredIndicator ? (
-          <Caption className="pb_text_input_kit_label">
+          <Caption className="pb_text_input_kit_label"
+              color="lighter"
+          >
             {label} <span style={{ color: `${colors.text_error}` }}>*</span>
           </Caption>
         ) : (
           <Caption  className="pb_text_input_kit_label"
+              color="lighter"
               text={label}
           />
         )

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -2,11 +2,11 @@
   <% if object.label.present? %>
     <label for="<%= object.input_options[:id] || object.id %>" >
       <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) do %>
           <%= object.label %><span style="color: #DA0014;"> *</span>
         <% end %>
       <% else %>
-        <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
       <% end %>
     </label>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/textarea.test.js

@@ -149,7 +149,7 @@ describe("TextArea Kit Props", () => {
     )
 
     const kit = screen.getByTestId(testId)
-    const error = kit.querySelector(".pb_caption_kit_md")
+    const error = kit.querySelector(".pb_caption_kit_md_lighter")
 
     expect(error.innerHTML).toBe("Test Label")
   })

data/app/pb_kits/playbook/pb_time_picker/_time_picker.tsx

@@ -707,6 +707,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
           {requiredIndicator ? (
             <Caption
                 className="pb_time_picker_kit_label"
+                color="lighter"
                 dark={dark}
                 marginBottom="xs"
                 size="md"
@@ -716,6 +717,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
           ) : (
             <Caption
                 className="pb_time_picker_kit_label"
+                color="lighter"
                 dark={dark}
                 marginBottom="xs"
                 size="md"
@@ -766,6 +768,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                 <label htmlFor={`${uniqueId}-hour`}>
                   <Caption
                       className="time_input_label"
+                      color="lighter"
                       dark={dark}
                       size="sm"
                       text="Hour"
@@ -813,6 +816,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                 <label htmlFor={`${uniqueId}-minute`}>
                   <Caption
                       className="time_input_label"
+                      color="lighter"
                       dark={dark}
                       size="sm"
                       text="Minute"
@@ -859,6 +863,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                 <div className="meridiem">
                   <Caption
                       className="time_input_label"
+                      color="lighter"
                       dark={dark}
                       size="sm"
                       text="Period"
@@ -905,6 +910,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
               )}
               {showTimezone && (
                 <Caption
+                    color="lighter"
                     dark={dark}
                     lineHeight="tight"
                     marginTop="sm"

data/app/pb_kits/playbook/pb_time_picker/time_picker.test.jsx

@@ -71,14 +71,14 @@ describe('TimePicker', () => {
     render(<TimePicker data={{ testid: 'clickable-picker' }} />)
     const input = screen.getByPlaceholderText('Select Time')
     fireEvent.click(input)
-    expect(screen.getByText('Hour', { selector: '.pb_caption_kit_sm' })).toBeInTheDocument()
+    expect(screen.getByText('Hour', { selector: '.pb_caption_kit_sm_lighter' })).toBeInTheDocument()
   })
 
   test('does not open dropdown on input click when disabled', () => {
     render(<TimePicker disabled />)
     const input = screen.getByPlaceholderText('Select Time')
     fireEvent.click(input)
-    expect(screen.queryByText('Hour', { selector: '.pb_caption_kit_sm' })).not.toBeInTheDocument()
+    expect(screen.queryByText('Hour', { selector: '.pb_caption_kit_sm_lighter' })).not.toBeInTheDocument()
   })
 
   test('renders with required attribute', () => {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -20,7 +20,7 @@ test('typeahead classname + label renders as expected', () => {
   )
 
   const kit = screen.getByTestId('typeahead-test')
-  const label = kit.querySelector(".pb_caption_kit_md.pb_text_input_kit_label")
+  const label = kit.querySelector(".pb_caption_kit_md_lighter.pb_text_input_kit_label")
   expect(kit).toHaveClass("pb_typeahead_kit")
   expect(label).toHaveTextContent("Colors")
 })