playbook_ui 13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301 → 13.32.0.pre.alpha.PLAY1138iconkitaddcolorprop3268

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

@@ -1,3 +1,30 @@
+@import "../tokens/colors";
+
+// All the merges below create $icon_colors, a map of all color tokens in colors.scss
+$merge_kits1: map-merge($status_colors, $category_colors);
+$merge_kits2: map-merge($merge_kits1, $product_colors);
+$merge_kits3: map-merge($merge_kits2, $text_colors);
+$merge_kits4: map-merge($merge_kits3, $card_colors);
+$merge_kits5: map-merge($merge_kits4, $action_colors);
+$merge_kits6: map-merge($merge_kits5, $data_colors);
+$merge_kits7: map-merge($merge_kits6, $border_colors);
+$merge_kits8: map-merge($merge_kits7, $interface_colors);
+$merge_kits9: map-merge($merge_kits8, $main_colors);
+$merge_kits10: map-merge($merge_kits9, $shadow_colors);
+$merge_kits11: map-merge($merge_kits10, $text_colors);
+$merge_kits12: map-merge($merge_kits11, $status_color_text);
+$merge_kits13: map-merge($merge_kits12, $status_color_text_dark);
+$icon_colors: map-merge($merge_kits13, $colors);
+
+.pb_custom_icon, .pb_icon_kit {
+  @each $color_name, $color_value in $icon_colors {
+    &[class*="#{$color_name}"] {
+      color: $color_value;
+    }
+  }
+}
+
+// Rails custom icon styles
 svg.pb_custom_icon {
   width: 1em;
   fill: currentColor;
@@ -9,213 +36,3 @@ svg.pb_custom_icon {
 .pb_icon_kit_emoji {
   font-family: monospace;
 }
-
-$rotate-list: (90, 180, 270);
-
-@keyframes pb_icon_spin {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-};
-
-svg {
-  &.pb_icon_kit,
-  &.pb_custom_icon{
-    @each $r in $rotate-list {
-      &.rotate_#{$r} {
-        transform: rotate(#{$r}deg);
-      }
-    }
-    &.flip_horizontal {
-      transform: scaleX(-1);
-    }
-    &.flip_vertical {
-      transform: scaleY(-1);
-    }
-    &.flip_horizontal.flip_vertical {
-      transform: scaleX(-1) scaleY(-1);
-    }
-    &.svg-inline--fa {
-      height: 1em;
-      overflow: visible;
-      vertical-align: -.125em
-    }
-    &.svg_inverse {
-      color: #fff;
-    }
-    &.svg_border {
-      border-color: #eee;
-      border-radius: .1em;
-      border-style: solid;
-      border-width: .08em;
-      padding: .2em .25em .15em;
-    }
-    &.svg_fw {
-      text-align: center;
-      width: 1.25em
-    }
-    &.svg_li {
-      left: calc(2em * -1);
-      position: absolute;
-      text-align: center;
-      width: 2em;
-      line-height: inherit
-    }
-    &.pull_left {
-      float: left;
-      margin-right: .3em;
-    }
-
-    &.pull_right {
-      float: right;
-      margin-left: .3em;
-    }
-    &.pulse {
-      animation-name: pb_icon_spin;
-      animation-direction: normal;
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-      animation-timing-function: steps(8);
-    }
-    &.spin {
-      animation-name: pb_icon_spin;
-      animation-delay: 0s;
-      animation-direction: normal;
-      animation-duration: 2s;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-
-    &.svg_xs {
-      font-size: 0.75em
-    }
-
-    &.svg_sm {
-      font-size: 0.875em
-    }
-
-    &.svg_lg {
-      font-size: 1.25em
-    }
-
-    &.svg_1x {
-      font-size: 1em
-    }
-
-    &.svg_2x {
-      font-size: 2em
-    }
-
-    &.svg_3x {
-      font-size: 3em
-    }
-
-    &.svg_4x {
-      font-size: 4em
-    }
-
-    &.svg_5x {
-      font-size: 5em
-    }
-
-    &.svg_6x {
-      font-size: 6em
-    }
-
-    &.svg_7x {
-      font-size: 7em
-    }
-
-    &.svg_8x {
-      font-size: 8em
-    }
-
-    &.svg_9x {
-      font-size: 9em
-    }
-
-    &.svg_10x {
-      font-size: 10em
-    }
-    &.fa-xs {
-      font-size: .75em;
-      line-height: .0833333337em;
-      vertical-align: .125em
-    }
-    &.fa-sm {
-      font-size: .875em;
-      line-height: .0714285718em;
-      vertical-align: .0535714295em
-    }
-    &.fa-lg {
-      font-size: 1.25em;
-      line-height: .05em;
-      vertical-align: -.075em
-    }
-    &.fa-pull-left {
-      float: left;
-      margin-right: .3em;
-    }
-
-    &.fa-pull-right {
-      float: right;
-      margin-left: .3em;
-    }
-    &.fa-li {
-      left: calc(2em * -1);
-      position: absolute;
-      text-align: center;
-      width: 2em;
-      line-height: inherit
-    }
-    &.svg-inline--fa.fa-li {
-      width: 2em;
-      top: .25em
-    }
-    &.svg-inline--fa.fa-fw {
-      width: 1.25em;
-    }
-    &.fa-fw {
-      text-align: center;
-      width: 1.25em
-    }
-    &.fa-layers {
-      display: inline-block;
-      height: 1em;
-      position: relative;
-      text-align: center;
-      vertical-align: -.125em;
-      width: 1em
-    }
-    &.fa-2x {
-      font-size: 2em
-    }
-    &.fa-3x {
-      font-size: 3em
-    }
-    &.fa-flip {
-      animation-name: fa-flip;
-      animation-delay: 0s;
-      animation-direction: normal;
-      animation-duration: 1s;
-      animation-iteration-count: infinite;
-      animation-timing-function: ease-in-out;
-    }
-    &.fa-spin {
-      animation-name: fa-spin;
-      animation-delay: 0s;
-      animation-direction: normal;
-      animation-duration: 2s;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-    &.fa-pulse {
-      animation: fa-spin 1s infinite linear;
-    }
-  }
-}

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

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
+import aliasesJson from './icon_aliases.json'
 
 export type IconSizes = "lg"
 | "xs"
@@ -23,6 +24,7 @@ type IconProps = {
   aria?: {[key: string]: string},
   border?: string,
   className?: string,
+  color?: string,
   customIcon?: {[key: string] :SVGElement},
   data?: {[key: string]: string},
   fixedWidth?: boolean,
@@ -40,75 +42,24 @@ type IconProps = {
   spin?: boolean,
 } & GlobalProps
 
-const flipMap = {
-  fa: {
-    horizontal: 'fa-flip-horizontal',
-    vertical: 'fa-flip-vertical',
-    both: 'fa-flip-horizontal fa-flip-vertical',
-    none: ''
-  },
-  svg: {
-    horizontal: 'flip_horizontal',
-    vertical: 'flip_vertical',
-    both: 'flip_horizontal flip_vertical',
-    none: ''
-  }
-}
-const pulseMap = {
-  fa: 'fa-pulse',
-  svg: 'pulse'
-}
-const spinMap = {
-  fa: 'fa-spin',
-  svg: 'spin'
+type AliasType = string | string[];
+
+interface Aliases {
+  [key: string]: AliasType;
 }
-const rotateMap = {
-  fa: {
-    90: 'fa-rotate-90',
-    180: 'fa-rotate-180',
-    270: 'fa-rotate-270'
-  },
-  svg: {
-    90: 'rotate_90',
-    180: 'rotate_180',
-    270: 'rotate_270'
-  }
+
+interface AliasesJson {
+  aliases: Aliases;
 }
 
-const sizeMap = {
-  fa: {
-    "lg": "fa-lg",
-    "xs": "fa-xs",
-    "sm": "fa-sm",
-    "1x": "fa-1x",
-    "2x": "fa-2x",
-    "3x": "fa-3x",
-    "4x": "fa-4x",
-    "5x": "fa-5x",
-    "6x": "fa-6x",
-    "7x": "fa-7x",
-    "8x": "fa-8x",
-    "9x": "fa-9x",
-    "10x": "fa-10x",
-    "": ""
-  },
-  svg: {
-    "lg": "svg_lg",
-    "xs": "svg_xs",
-    "sm": "svg_sm",
-    "1x": "svg_1x",
-    "2x": "svg_2x",
-    "3x": "svg_3x",
-    "4x": "svg_4x",
-    "5x": "svg_5x",
-    "6x": "svg_6x",
-    "7x": "svg_7x",
-    "8x": "svg_8x",
-    "9x": "svg_9x",
-    "10x": "svg_10x",
-    "": ""
-  }
+const aliases: AliasesJson = aliasesJson;
+
 
+const flipMap = {
+  horizontal: 'fa-flip-horizontal',
+  vertical: 'fa-flip-vertical',
+  both: 'fa-flip-horizontal fa-flip-vertical',
+  none: ""
 }
 
 declare global {
@@ -116,11 +67,28 @@ declare global {
   var PB_ICONS: {[key: string]: React.FunctionComponent<any>}
 }
 
+// Resolve alias function
+const resolveAlias = (icon: string): string => {
+  const alias = aliases.aliases[icon];
+
+  if (alias) {
+    if (Array.isArray(alias)) {
+      return alias[0];
+    } else {
+      return alias;
+    }
+  }
+
+  return icon;
+};
+
+
 const Icon = (props: IconProps) => {
   const {
     aria = {},
     border = false,
     className,
+    color,
     customIcon,
     data = {},
     fixedWidth = true,
@@ -138,7 +106,8 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
 
-  let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
+  const resolvedIcon = resolveAlias(icon as string)
+  let iconElement: ReactSVGElement | null = typeof(resolvedIcon) === "object" ? resolvedIcon : null
 
   const faClasses = {
     'fa-border': border,
@@ -154,58 +123,33 @@ const Icon = (props: IconProps) => {
 
   if (!customIcon && !iconElement) {
     const PowerIcon: React.FunctionComponent<any> | undefined =
-      window.PB_ICONS ? window.PB_ICONS[icon as string] : null
+      window.PB_ICONS ? window.PB_ICONS[resolvedIcon as string] : null
 
     if (PowerIcon) {
       iconElement = <PowerIcon /> as ReactSVGElement
     } else {
-      faClasses[`fa-${icon}`] = icon as string
+      faClasses[`fa-${resolvedIcon}`] = resolvedIcon as string
     }
   }
 
-  const isFA = !iconElement && !customIcon 
-
-  let classes = classnames(
+  const classes = classnames(
+    flipMap[flip],
     (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
     (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
     iconElement ? 'svg-inline--fa' : '',
+    faClasses,
+    color ? `color_${color}` : '',
     globalProps(props),
     className
   )
 
-  const transformClasses = classnames(
-    flip ? flipMap[isFA ? 'fa' : 'svg'][flip] : null,
-    pulse ? pulseMap[isFA ? 'fa' : 'svg'] : null,
-    rotation ? rotateMap[isFA ? 'fa' : 'svg'][rotation] : null,
-    spin ? spinMap[isFA ? 'fa' : 'svg'] : null,
-    size ? sizeMap[isFA ? 'fa' : 'svg'][size] : null,
-    border ? isFA ? 'fa-border' : 'svg_border' : null,
-    fixedWidth ? isFA ? 'fa-fw' : 'svg_fw' : null,
-    inverse ? isFA ? 'fa-inverse' : 'svg_inverse' : null,
-    listItem ? isFA ? 'fa-li' : 'svg_li' : null,
-    pull ? isFA ? `fa-pull-${pull}` : `pull_${pull}` : null,
-  )
-  classes += ` ${transformClasses}`
-
-  if (isFA) {
-    const faClassList = {
-      'fa-border': border,
-      'fa-inverse': inverse,
-      'fa-li': listItem,
-      [`fa-${size}`]: size,
-      [`fa-pull-${pull}`]: pull,
-    }
-    faClassList[`fa-${icon}`] = icon as string
-    classes += ` ${classnames(faClassList)}`
-  }
-
   const classesEmoji = classnames(
     'pb_icon_kit_emoji',
     globalProps(props),
     className
   )
 
-  aria.label ? null : aria.label = `${icon} icon`
+  aria.label ? null : aria.label = `${resolvedIcon} icon`
   const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -227,7 +171,7 @@ const Icon = (props: IconProps) => {
           }
         </>
       )
-    else if (isValidEmoji(icon as string))
+    else if (isValidEmoji(resolvedIcon as string))
       return (
         <>
           <span
@@ -236,7 +180,7 @@ const Icon = (props: IconProps) => {
               className={classesEmoji}
               id={id}
           >
-            {icon}
+            {resolvedIcon}
           </span>
         </>
       )

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "info", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "frog", fixed_width: true, color: "data_4", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "vial", fixed_width: true, color: "text_lt_lighter", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_roofing", size: "2x" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx

@@ -0,0 +1,46 @@
+import React from "react"
+import Icon from "../_icon"
+
+const IconDefault = (props) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column"}}>
+      <Icon
+          color="primary"
+          fixedWidth
+          icon="user"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="info"
+          fixedWidth
+          icon="recycle"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="data_4"
+          fixedWidth
+          icon="frog"
+          size="2x"
+          {...props}
+          />
+      <Icon
+          color="text_lt_lighter"
+          fixedWidth
+          icon="vial"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="roofing"
+          fixedWidth
+          icon="product-roofing"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconDefault

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md

@@ -0,0 +1 @@
+Pass any Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 

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

@@ -9,6 +9,7 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_color: Icon Color
 
   react:
   - icon_default: Icon Default
@@ -20,6 +21,7 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_color: Icon Color
 
   swift:
   - icon_default_swift: Icon Default

data/app/pb_kits/playbook/pb_icon/docs/index.js

@@ -7,3 +7,4 @@ export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
 export { default as IconFaKit} from './_icon_fa_kit.jsx'
+export { default as IconColor } from './_icon_color.jsx'

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

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/HashLikeCase
+
 require "open-uri"
 require "json"
 
@@ -36,6 +38,9 @@ module Playbook
                         default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
+      prop :color, type: Playbook::Props::String
+
+      ALIASES = JSON.parse(File.read(Playbook::Engine.root.join("app/pb_kits/playbook/pb_icon/icon_aliases.json")))["aliases"].freeze
 
       def valid_emoji?
         emoji_regex = /\p{Emoji}/
@@ -45,6 +50,7 @@ module Playbook
       def classname
         generate_classname(
           "pb_icon_kit",
+          color_class,
           font_style_class,
           icon_class,
           border_class,
@@ -65,6 +71,7 @@ module Playbook
         generate_classname(
           "pb_icon_kit",
           border_class,
+          color_class,
           fixed_width_class,
           flip_class,
           inverse_class,
@@ -78,14 +85,6 @@ module Playbook
         )
       end
 
-      def icon_alias_map
-        return unless Rails.application.config.respond_to?(:icon_alias_path)
-
-        base_path = Rails.application.config.icon_alias_path
-        json = File.read(Rails.root.join(base_path))
-        JSON.parse(json)["aliases"].freeze
-      end
-
       def asset_path
         return unless Rails.application.config.respond_to?(:icon_path)
 
@@ -104,7 +103,8 @@ module Playbook
         svg["aria"] = object.aria
         svg["height"] = "auto"
         svg["width"] = "auto"
-        doc.at_css("path")["fill"] = "currentColor"
+        fill_color = object.color || "currentColor"
+        doc.at_css("path")["fill"] = fill_color
         raw doc
       end
 
@@ -115,9 +115,7 @@ module Playbook
     private
 
       def resolve_alias(icon)
-        return icon unless icon_alias_map
-
-        aliases = icon_alias_map[icon]
+        aliases = ALIASES[icon]
         return icon unless aliases
 
         if aliases.is_a?(Array)
@@ -137,13 +135,11 @@ module Playbook
       end
 
       def border_class
-        prefix = is_svg? ? "svg_border" : "fa-border"
-        border ? prefix : nil
+        border ? "fa-border" : nil
       end
 
       def fixed_width_class
-        prefix = is_svg? ? "svg_fw" : "fa-fw"
-        fixed_width ? prefix : nil
+        fixed_width ? "fa-fw" : nil
       end
 
       def icon_class
@@ -151,45 +147,38 @@ module Playbook
       end
 
       def inverse_class
-        class_name = is_svg? ? "svg_inverse" : "fa-inverse"
-        inverse ? class_name : nil
+        inverse ? "fa-inverse" : nil
       end
 
       def list_item_class
-        class_name = is_svg? ? "svg_li" : "fa-li"
-        list_item ? class_name : nil
+        list_item ? "fa-li" : nil
       end
 
       def flip_class
-        prefix = is_svg? ? "flip_" : "fa-flip-"
         case flip
         when "horizontal"
-          "#{prefix}horizontal"
+          "fa-flip-horizontal"
         when "vertical"
-          "#{prefix}vertical"
+          "fa-flip-vertical"
         when "both"
-          "#{prefix}horizontal #{prefix}vertical"
+          "fa-flip-horizontal fa-flip-vertical"
         end
       end
 
       def pull_class
-        class_name = is_svg? ? "pull_#{pull}" : "fa-pull-#{pull}"
-        pull ? class_name : nil
+        pull ? "fa-pull-#{pull}" : nil
       end
 
       def pulse_class
-        class_name = is_svg? ? "pulse" : "fa-pulse"
-        pulse ? class_name : nil
+        pulse ? "fa-pulse" : nil
       end
 
       def rotation_class
-        class_name = is_svg? ? "rotate_#{rotation}" : "fa-rotate-#{rotation}"
-        rotation ? class_name : nil
+        rotation ? "fa-rotate-#{rotation}" : nil
       end
 
       def size_class
-        class_name = is_svg? ? "svg_#{size}" : "fa-#{size}"
-        size ? class_name : nil
+        size ? "fa-#{size}" : nil
       end
 
       def font_style_class
@@ -197,9 +186,14 @@ module Playbook
       end
 
       def spin_class
-        class_name = is_svg? ? "spin" : "fa-spin"
-        spin ? class_name : nil
+        spin ? "fa-spin" : nil
+      end
+
+      def color_class
+        color ? "color_#{color}" : nil
       end
     end
   end
 end
+
+# rubocop:enable Style/HashLikeCase