playbook_ui 16.6.0.pre.alpha.play294216115 → 16.6.0.pre.alpha.play294216129

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f4decbfeb1e045070d591f56daf85d3ef2794bf2855d33e889f00fb2dc694be7
-  data.tar.gz: 04b363904b41e8d0b30e2752af2c1e07d6cf6ca38ca5ae0f3576b515fcaa8c23
+  metadata.gz: 1e05534a3f97a66180278f383ceebd88308b9ab9e457d114db537950d5635b1d
+  data.tar.gz: 39a298031f506647efb1e3236753c31dac0f2ee077f1c680d0ccb7f5762a6fba
 SHA512:
-  metadata.gz: 42918e61a6d599a6b5033053eaad2a5d09139d2d977d85f766f0fbd5c65f0e05608bef3c57fa787ce7efd3e847d785ba198472bd532e436ffbc2d7c161ad3314
-  data.tar.gz: 13bc1c4045f5d400052204a4a495d345aeb2b814de5ba3d8c87e510327e18ecaa80d18d99b307d75a9d3e8a7c2cf9c2e0b2466ea7a30c41f9d282aad0766275f
+  metadata.gz: 04b9269da508cd3c91abf55b85c2d077e0fd49b56e68448e2a89c642ae5c3d0bf0dba05d0541c8f7363960dacc67129f44f72969805f88e1d87da54f15879b3c
+  data.tar.gz: e61a63d3488d8c7adb0123a3b0c4aba424ab2a220b48ed176881a8e5af9feb8dcb3847b11feb47c1a774a96b39fc91580c6bbef4f6f4dadda9f820649452654c

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx

@@ -26,6 +26,24 @@ const DropdownWithConstrainHeight = (props) => {
           options={options}
           {...props}
       />
+
+    <br />
+
+      <Dropdown
+          label="Subcomponent With Constrain Height"
+          options={options}
+          {...props}
+      >
+        <Dropdown.Trigger />
+        <Dropdown.Container constrainHeight>
+          {options.map((option) => (
+            <Dropdown.Option
+                key={option.id}
+                option={option}
+            />
+          ))}
+        </Dropdown.Container>
+      </Dropdown>
     </>
   )
 }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb

@@ -18,3 +18,14 @@
   constrain_height: true,
   label: "With Constrain Height"
 }) %>
+
+<br>
+
+<%= pb_rails("dropdown", props: {options: options, label: "Subcomponent With Constrain Height"}) do %>
+  <%= pb_rails("dropdown/dropdown_trigger") %>
+  <%= pb_rails("dropdown/dropdown_container", props: { constrain_height: true }) do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -1,9 +1,14 @@
-import React, { ReactSVGElement } from 'react'
+import React, { ReactSVGElement, useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
-import { getPlaybookIconClassName, supportsPlaybookIcon } from '../utilities/icons/playbookIconResolver'
+import {
+  getPlaybookIconClassName,
+  loadPlaybookIconSvg,
+  supportsPlaybookIcon,
+  supportsPlaybookIconFetch,
+} from '../utilities/icons/playbookIconResolver'
 
 export type IconSizes = "lg"
 | "xs"
@@ -119,6 +124,38 @@ declare global {
   var PB_ICONS: {[key: string]: React.FunctionComponent<any>}
 }
 
+const svgAttributeMap: {[key: string]: string} = {
+  'clip-path': 'clipPath',
+  'clip-rule': 'clipRule',
+  'fill-rule': 'fillRule',
+  'stroke-linecap': 'strokeLinecap',
+  'stroke-linejoin': 'strokeLinejoin',
+  'stroke-width': 'strokeWidth',
+  'xmlns:xlink': 'xmlnsXlink',
+  'xlink:href': 'xlinkHref',
+}
+
+const convertAttributeName = (attributeName: string) => {
+  return svgAttributeMap[attributeName] || attributeName.replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase())
+}
+
+const parseSvgAttributes = (attributeSource: string) => {
+  const attributes: {[key: string]: string} = {}
+  const attributePattern = /([:@a-zA-Z0-9-]+)="([^"]*)"/g
+  let match = attributePattern.exec(attributeSource)
+
+  while (match) {
+    attributes[convertAttributeName(match[1])] = match[2]
+    match = attributePattern.exec(attributeSource)
+  }
+
+  return attributes
+}
+
+const normalizeSvgInnerMarkup = (innerMarkup: string, fillColor: string) => {
+  return innerMarkup.replace(/<(path)\b([^>]*)fill="[^"]*"/gi, `<$1$2fill="${fillColor}"`)
+}
+
 const Icon = (props: IconProps) => {
   const {
     aria = {},
@@ -145,9 +182,35 @@ const Icon = (props: IconProps) => {
 
   let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
   const iconName = typeof(icon) === "string" ? icon : ""
-  const legacyPowerIcon = !customIcon && !iconElement && window.PB_ICONS ? window.PB_ICONS[iconName] : null
-  const hasBuiltInPlaybookIcon = !legacyPowerIcon && !customIcon && !iconElement && Boolean(iconName) && supportsPlaybookIcon(iconName)
-  const playbookIconClassName = hasBuiltInPlaybookIcon ? getPlaybookIconClassName(iconName) : null
+  const shouldLoadInlinePlaybookIcon = !customIcon && !iconElement && Boolean(iconName) && supportsPlaybookIconFetch(iconName)
+  const [inlinePlaybookSvgMarkup, setInlinePlaybookSvgMarkup] = useState<string | null | undefined>(undefined)
+
+  useEffect(() => {
+    let isActive = true
+
+    if (!shouldLoadInlinePlaybookIcon) {
+      setInlinePlaybookSvgMarkup(undefined)
+      return () => {
+        isActive = false
+      }
+    }
+
+    setInlinePlaybookSvgMarkup(undefined)
+
+    loadPlaybookIconSvg(iconName).then((markup) => {
+      if (isActive) setInlinePlaybookSvgMarkup(markup)
+    })
+
+    return () => {
+      isActive = false
+    }
+  }, [iconName, shouldLoadInlinePlaybookIcon])
+
+  const inlinePlaybookSvgReady = Boolean(inlinePlaybookSvgMarkup)
+  const inlinePlaybookSvgFailed = shouldLoadInlinePlaybookIcon && inlinePlaybookSvgMarkup === null
+  const legacyPowerIcon = !customIcon && !iconElement && (!shouldLoadInlinePlaybookIcon || inlinePlaybookSvgFailed) && window.PB_ICONS ? window.PB_ICONS[iconName] : null
+  const hasClassBasedPlaybookIcon = !inlinePlaybookSvgReady && !legacyPowerIcon && !customIcon && !iconElement && !shouldLoadInlinePlaybookIcon && Boolean(iconName) && supportsPlaybookIcon(iconName)
+  const playbookIconClassName = hasClassBasedPlaybookIcon ? getPlaybookIconClassName(iconName) : null
 
   const faClasses = {
     'fa-border': border,
@@ -161,7 +224,7 @@ const Icon = (props: IconProps) => {
     [`fa-rotate-${rotation}`]: rotation,
   }
 
-  if (!customIcon && !iconElement && !hasBuiltInPlaybookIcon) {
+  if (!customIcon && !iconElement && !inlinePlaybookSvgReady && !hasClassBasedPlaybookIcon) {
     if (legacyPowerIcon) {
       const LegacyPowerIcon = legacyPowerIcon
       iconElement = <LegacyPowerIcon /> as ReactSVGElement
@@ -170,13 +233,13 @@ const Icon = (props: IconProps) => {
       }
   }
 
-  const isFA = !iconElement && !customIcon && !hasBuiltInPlaybookIcon
+  const isFA = !iconElement && !customIcon && !inlinePlaybookSvgReady && !hasClassBasedPlaybookIcon && !shouldLoadInlinePlaybookIcon
 
   let classes = classnames(
-    (!iconElement && !customIcon && !hasBuiltInPlaybookIcon) ? 'pb_icon_kit' : '',
-    (iconElement || customIcon || hasBuiltInPlaybookIcon) ? 'pb_custom_icon' : fontStyle,
-    (iconElement || hasBuiltInPlaybookIcon) ? 'svg-inline--fa' : '',
-    hasBuiltInPlaybookIcon ? 'pb_playbook_icon' : '',
+    (!iconElement && !customIcon && !inlinePlaybookSvgReady && !hasClassBasedPlaybookIcon) ? 'pb_icon_kit' : '',
+    (iconElement || customIcon || inlinePlaybookSvgReady || hasClassBasedPlaybookIcon) ? 'pb_custom_icon' : fontStyle,
+    (iconElement || inlinePlaybookSvgReady || hasClassBasedPlaybookIcon) ? 'svg-inline--fa' : '',
+    hasClassBasedPlaybookIcon ? 'pb_playbook_icon' : '',
     playbookIconClassName,
     color ? `color_${color}` : '',
     globalProps(props),
@@ -230,7 +293,29 @@ const Icon = (props: IconProps) => {
 
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
-    if (hasBuiltInPlaybookIcon)
+    if (inlinePlaybookSvgReady) {
+      const svgMatch = inlinePlaybookSvgMarkup?.match(/<svg([^>]*)>([\s\S]*)<\/svg>/i)
+      if (!svgMatch) return null
+
+      const [, rawAttributes, innerMarkup] = svgMatch
+      const svgAttributes = parseSvgAttributes(rawAttributes)
+
+      return (
+        <svg
+            {...svgAttributes}
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            color={color || 'currentColor'}
+            dangerouslySetInnerHTML={{ __html: normalizeSvgInnerMarkup(innerMarkup.trim(), color || 'currentColor') }}
+            height="auto"
+            id={id}
+            width="auto"
+            {...(props.tabIndex !== undefined && { tabIndex })}
+        />
+      )
+    } else if (hasClassBasedPlaybookIcon)
       return (
         <i
             {...ariaProps}
@@ -272,6 +357,8 @@ const Icon = (props: IconProps) => {
           </span>
         </>
       )
+    else if (shouldLoadInlinePlaybookIcon)
+      return null
     else
       return (
         <>

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

@@ -156,6 +156,28 @@ module Playbook
       class << self
         @cache_mutex = Mutex.new
 
+        def resolved_icon_name(icon_name)
+          return icon_name unless icon_alias_map
+          return icon_name if icon_name.nil?
+
+          aliases = icon_alias_map[icon_name]
+          return icon_name unless aliases
+
+          if aliases.is_a?(Array)
+            aliases.find { |alias_name| icon_path_index.key?(alias_name) } || icon_name
+          else
+            aliases
+          end
+        end
+
+        def resolved_icon_path(icon_name)
+          return nil unless Rails.application.config.respond_to?(:icon_path)
+
+          resolved_name = resolved_icon_name(icon_name)
+          path = icon_path_index[resolved_name]
+          path if path && File.exist?(path)
+        end
+
         # 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?
@@ -296,17 +318,7 @@ module Playbook
     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
-
-        if aliases.is_a?(Array)
-          aliases.find { |alias_name| file_exists?(alias_name) } || icon
-        else
-          aliases
-        end
+        self.class.resolved_icon_name(icon)
       end
 
       def file_exists?(alias_name)