primer_view_components 0.0.57 → 0.0.58

data/app/components/primer/clipboard_copy_component.js

@@ -1,20 +1,26 @@
 import '@github/clipboard-copy-element';
 const CLIPBOARD_COPY_TIMER_DURATION = 2000;
-function toggleSVG(svg) {
-    if (svg.style.display === '' || svg.style.display === 'block') {
-        svg.style.display = 'none';
-    }
-    else {
-        svg.style.display = 'block';
-    }
+function showSVG(svg) {
+    svg.style.display = 'inline-block';
+}
+function hideSVG(svg) {
+    svg.style.display = 'none';
+}
+// Toggle a copy button.
+function showCopy(button) {
+    const [clippyIcon, checkIcon] = button.querySelectorAll('.octicon');
+    if (!clippyIcon || !checkIcon)
+        return;
+    showSVG(clippyIcon);
+    hideSVG(checkIcon);
 }
 // Toggle a copy button.
-function toggleCopyButton(button) {
+function showCheck(button) {
     const [clippyIcon, checkIcon] = button.querySelectorAll('.octicon');
     if (!clippyIcon || !checkIcon)
         return;
-    toggleSVG(clippyIcon);
-    toggleSVG(checkIcon);
+    hideSVG(clippyIcon);
+    showSVG(checkIcon);
 }
 const clipboardCopyElementTimers = new WeakMap();
 document.addEventListener('clipboard-copy', function ({ target }) {
@@ -28,7 +34,10 @@ document.addEventListener('clipboard-copy', function ({ target }) {
         clipboardCopyElementTimers.delete(target);
     }
     else {
-        toggleCopyButton(target);
+        showCheck(target);
     }
-    clipboardCopyElementTimers.set(target, setTimeout(toggleCopyButton, CLIPBOARD_COPY_TIMER_DURATION, target));
+    clipboardCopyElementTimers.set(target, setTimeout(() => {
+        showCopy(target);
+        clipboardCopyElementTimers.delete(target);
+    }, CLIPBOARD_COPY_TIMER_DURATION));
 });

data/app/components/primer/clipboard_copy_component.ts

@@ -2,22 +2,32 @@ import '@github/clipboard-copy-element'
 
 const CLIPBOARD_COPY_TIMER_DURATION = 2000
 
-function toggleSVG(svg: SVGElement) {
-  if (svg.style.display === '' || svg.style.display === 'block') {
-    svg.style.display = 'none'
-  } else {
-    svg.style.display = 'block'
-  }
+function showSVG(svg: SVGElement) {
+  svg.style.display = 'inline-block'
+}
+
+function hideSVG(svg: SVGElement) {
+  svg.style.display = 'none'
+}
+
+// Toggle a copy button.
+function showCopy(button: HTMLElement) {
+  const [clippyIcon, checkIcon] = button.querySelectorAll<SVGElement>('.octicon')
+
+  if (!clippyIcon || !checkIcon) return
+
+  showSVG(clippyIcon)
+  hideSVG(checkIcon)
 }
 
 // Toggle a copy button.
-function toggleCopyButton(button: HTMLElement) {
+function showCheck(button: HTMLElement) {
   const [clippyIcon, checkIcon] = button.querySelectorAll<SVGElement>('.octicon')
 
   if (!clippyIcon || !checkIcon) return
 
-  toggleSVG(clippyIcon)
-  toggleSVG(checkIcon)
+  hideSVG(clippyIcon)
+  showSVG(checkIcon)
 }
 
 const clipboardCopyElementTimers = new WeakMap<HTMLElement, number>()
@@ -32,8 +42,14 @@ document.addEventListener('clipboard-copy', function ({target}) {
     clearTimeout(currentTimeout)
     clipboardCopyElementTimers.delete(target)
   } else {
-    toggleCopyButton(target)
+    showCheck(target)
   }
 
-  clipboardCopyElementTimers.set(target, setTimeout(toggleCopyButton, CLIPBOARD_COPY_TIMER_DURATION, target))
+  clipboardCopyElementTimers.set(
+    target,
+    setTimeout(() => {
+      showCopy(target)
+      clipboardCopyElementTimers.delete(target)
+    }, CLIPBOARD_COPY_TIMER_DURATION)
+  )
 })

data/lib/primer/classify/cache.rb

@@ -1,115 +1,125 @@
 # frozen_string_literal: true
 
 require_relative "flex"
-require_relative "functional_background_colors"
-require_relative "functional_border_colors"
 require_relative "grid"
 
 module Primer
   class Classify
     # :nodoc:
     class Cache
-      # rubocop:disable Style/MutableConstant
-      LOOKUP = {}
-      # rubocop:enable Style/MutableConstant
-
-      class <<self
-        def read(memo, key, val, breakpoint)
-          value = LOOKUP.dig(breakpoint, key, val)
-          memo[:classes] << value if value
-        end
+      include Singleton
 
-        def clear!
-          LOOKUP.clear
-        end
+      def initialize
+        @cache_enabled = true
+        @lookup = {}
+      end
+
+      private :initialize
 
-        def preload!
-          preload(
-            keys: Primer::Classify::Flex::DIRECTION_KEY,
-            values: Primer::Classify::Flex::DIRECTION_VALUES
-          )
-
-          preload(
-            keys: Primer::Classify::Flex::JUSTIFY_CONTENT_KEY,
-            values: Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES
-          )
-
-          preload(
-            keys: Primer::Classify::Flex::ALIGN_ITEMS_KEY,
-            values: Primer::Classify::Flex::ALIGN_ITEMS_VALUES
-          )
-
-          preload(
-            keys: Primer::Classify::Grid::CONTAINER_KEY,
-            values: Primer::Classify::Grid::CONTAINER_VALUES
-          )
-
-          preload(
-            keys: Primer::Classify::Grid::CLEARFIX_KEY,
-            values: [true]
-          )
-
-          preload(
-            keys: Primer::Classify::Grid::COL_KEY,
-            values: Primer::Classify::Grid::COL_VALUES
-          )
-
-          preload(
-            keys: [Primer::Classify::BG_KEY],
-            values: Primer::Classify::FunctionalBackgroundColors::OPTIONS
-          )
-
-          preload(
-            keys: :text_align,
-            values: [:left, :center, :right]
-          )
-
-          preload(
-            keys: :font_weight,
-            values: [:bold, :light, :normal]
-          )
-
-          preload(
-            keys: Primer::Classify::Flex::FLEX_KEY,
-            values: Primer::Classify::Flex::FLEX_VALUES
-          )
-
-          preload(
-            keys: Primer::Classify::Flex::GROW_KEY,
-            values: Primer::Classify::Flex::GROW_VALUES
-          )
-
-          preload(
-            keys: Primer::Classify::Flex::SHRINK_KEY,
-            values: Primer::Classify::Flex::SHRINK_VALUES
-          )
-
-          preload(
-            keys: Primer::Classify::Flex::ALIGN_SELF_KEY,
-            values: Primer::Classify::Flex::ALIGN_SELF_VALUES
-          )
-
-          preload(
-            keys: Primer::Classify::BOX_SHADOW_KEY,
-            values: [true, :small, :medium, :large, :extra_large, :none]
-          )
+      def fetch(breakpoint, key, val)
+        found = @lookup.dig(breakpoint, key, val)
+        return found if found
+
+        yield.tap do |result|
+          set(result, breakpoint, key, val) if @cache_enabled
         end
+      end
+
+      def disable
+        @cache_enabled = false
+        yield
+        @cache_enabled = true
+      end
 
-        def preload(keys:, values:)
-          BREAKPOINTS.each do |breakpoint|
-            Array(keys).each do |key|
-              values.each do |value|
-                classes = { classes: [] }
-                Primer::Classify.send(:extract_value, classes, key, value, breakpoint)
-
-                LOOKUP[breakpoint] ||= {}
-                LOOKUP[breakpoint][key] ||= {}
-                LOOKUP[breakpoint][key][value] = classes[:classes].first
-              end
+      def clear!
+        @lookup.clear
+      end
+
+      def preload!
+        preload(
+          keys: Primer::Classify::Flex::DIRECTION_KEY,
+          values: Primer::Classify::Flex::DIRECTION_VALUES
+        )
+
+        preload(
+          keys: Primer::Classify::Flex::JUSTIFY_CONTENT_KEY,
+          values: Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES
+        )
+
+        preload(
+          keys: Primer::Classify::Flex::ALIGN_ITEMS_KEY,
+          values: Primer::Classify::Flex::ALIGN_ITEMS_VALUES
+        )
+
+        preload(
+          keys: Primer::Classify::Grid::CONTAINER_KEY,
+          values: Primer::Classify::Grid::CONTAINER_VALUES
+        )
+
+        preload(
+          keys: Primer::Classify::Grid::CLEARFIX_KEY,
+          values: [true]
+        )
+
+        preload(
+          keys: Primer::Classify::Grid::COL_KEY,
+          values: Primer::Classify::Grid::COL_VALUES
+        )
+
+        preload(
+          keys: :text_align,
+          values: [:left, :center, :right]
+        )
+
+        preload(
+          keys: :font_weight,
+          values: [:bold, :light, :normal]
+        )
+
+        preload(
+          keys: Primer::Classify::Flex::FLEX_KEY,
+          values: Primer::Classify::Flex::FLEX_VALUES
+        )
+
+        preload(
+          keys: Primer::Classify::Flex::GROW_KEY,
+          values: Primer::Classify::Flex::GROW_VALUES
+        )
+
+        preload(
+          keys: Primer::Classify::Flex::SHRINK_KEY,
+          values: Primer::Classify::Flex::SHRINK_VALUES
+        )
+
+        preload(
+          keys: Primer::Classify::Flex::ALIGN_SELF_KEY,
+          values: Primer::Classify::Flex::ALIGN_SELF_VALUES
+        )
+
+        preload(
+          keys: Primer::Classify::BOX_SHADOW_KEY,
+          values: [true, :small, :medium, :large, :extra_large, :none]
+        )
+      end
+
+      private
+
+      def preload(keys:, values:)
+        BREAKPOINTS.each do |breakpoint|
+          Array(keys).each do |key|
+            values.each do |value|
+              classes = Primer::Classify.send(:classes_from, key, value, breakpoint)
+              set(classes, breakpoint, key, value)
             end
           end
         end
       end
+
+      def set(item, breakpoint, key, val)
+        @lookup[breakpoint] ||= {}
+        @lookup[breakpoint][key] ||= {}
+        @lookup[breakpoint][key][val] = item
+      end
     end
   end
 end

data/lib/primer/classify/utilities.rb

@@ -26,31 +26,36 @@ module Primer
         "^wb" => "word_break",
         "^v" => "visibility",
         "^width" => "w",
-        "^height" => "h"
+        "^height" => "h",
+        "^color-bg" => "bg",
+        "^color-border" => "border_color"
       }.freeze
 
+      SUPPORTED_KEY_CACHE = Hash.new { |h, k| h[k] = !UTILITIES[k].nil? }
+      BREAKPOINT_INDEX_CACHE = Hash.new { |h, k| h[k] = BREAKPOINTS.index(k) }
+
       class << self
         def classname(key, val, breakpoint = "")
           if (valid = validate(key, val, breakpoint))
             valid
           else
             # Get selector
-            UTILITIES[key][val][BREAKPOINTS.index(breakpoint)]
+            UTILITIES[key][val][BREAKPOINT_INDEX_CACHE[breakpoint]]
           end
         end
 
-        # Does the Utilitiy class support the given key
+        # Does the Utility class support the given key
         #
         # returns Boolean
         def supported_key?(key)
-          UTILITIES[key].present?
+          SUPPORTED_KEY_CACHE[key]
         end
 
-        # Does the Utilitiy class support the given key and value
+        # Does the Utility class support the given key and value
         #
         # returns Boolean
         def supported_value?(key, val)
-          supported_key?(key) && UTILITIES[key][val].present?
+          supported_key?(key) && !UTILITIES[key][val].nil?
         end
 
         # Does the given selector exist in the utilities file

data/lib/primer/classify/utilities.yml

@@ -55,6 +55,54 @@
   - color-icon-success
   :icon_warning:
   - color-icon-warning
+:border_color:
+  :primary:
+  - color-border-primary
+  :secondary:
+  - color-border-secondary
+  :tertiary:
+  - color-border-tertiary
+  :inverse:
+  - color-border-inverse
+  :info:
+  - color-border-info
+  :success:
+  - color-border-success
+  :danger:
+  - color-border-danger
+  :warning:
+  - color-border-warning
+:bg:
+  :canvas:
+  - color-bg-canvas
+  :canvas_inverse:
+  - color-bg-canvas-inverse
+  :canvas_inset:
+  - color-bg-canvas-inset
+  :primary:
+  - color-bg-primary
+  :secondary:
+  - color-bg-secondary
+  :tertiary:
+  - color-bg-tertiary
+  :overlay:
+  - color-bg-overlay
+  :info:
+  - color-bg-info
+  :info_inverse:
+  - color-bg-info-inverse
+  :danger:
+  - color-bg-danger
+  :danger_inverse:
+  - color-bg-danger-inverse
+  :success:
+  - color-bg-success
+  :success_inverse:
+  - color-bg-success-inverse
+  :warning:
+  - color-bg-warning
+  :warning_inverse:
+  - color-bg-warning-inverse
 :position:
   :static:
   - position-static

data/lib/primer/classify/validation.rb

@@ -6,7 +6,7 @@ module Primer
   class Classify
     # :nodoc:
     class Validation
-      INVALID_CLASS_NAME_PREFIXES = /bg-|color-bg-|text-|box-shadow-|box_shadow-/.freeze
+      INVALID_CLASS_NAME_PREFIXES = /text-|box-shadow-|box_shadow-/.freeze
 
       class << self
         def invalid?(class_name)

data/lib/primer/classify.rb

@@ -2,8 +2,6 @@
 
 require_relative "classify/cache"
 require_relative "classify/flex"
-require_relative "classify/functional_background_colors"
-require_relative "classify/functional_border_colors"
 require_relative "classify/grid"
 require_relative "classify/utilities"
 require_relative "classify/validation"
@@ -14,7 +12,6 @@ module Primer
     # Keys where we can simply translate { key: value } into ".key-value"
     CONCAT_KEYS = %i[text box_shadow].freeze
 
-    BG_KEY = :bg
     TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
     BOX_SHADOW_KEY = :box_shadow
     CONTAINER_KEY = :container
@@ -69,7 +66,6 @@ module Primer
       }
     }.freeze
     BORDER_KEY = :border
-    BORDER_COLOR_KEY = :border_color
     BORDER_MARGIN_KEYS = %i[border_top border_bottom border_left border_right].freeze
     BORDER_RADIUS_KEY = :border_radius
     TYPOGRAPHY_KEYS = [:font_size].freeze
@@ -84,9 +80,7 @@ module Primer
       Primer::Classify::Grid::KEYS +
       [
         BORDER_KEY,
-        BORDER_COLOR_KEY,
         BORDER_RADIUS_KEY,
-        BG_KEY,
         BOX_SHADOW_KEY,
         CONTAINER_KEY
       ]
@@ -94,23 +88,25 @@ module Primer
 
     class << self
       def call(classes: "", style: nil, **args)
-        extracted_results = extract_hash(args)
+        extract_css_attrs(args).tap do |extracted_results|
+          classes = +"#{validated_class_names(classes)} #{extracted_results[:class]}"
+          classes.strip!
+          extracted_results[:class] = presence(classes)
 
-        extracted_results[:class] = [
-          validated_class_names(classes),
-          extracted_results.delete(:classes)
-        ].compact.join(" ").strip.presence
-
-        extracted_results[:style] = [
-          extracted_results.delete(:styles),
-          style
-        ].compact.join.presence
-
-        extracted_results
+          styles = "#{extracted_results[:style]}#{style}"
+          extracted_results[:style] = presence(styles)
+        end
       end
 
       private
 
+      # do this instead of using Rails' presence/blank?, which are a lot slower
+      def presence(obj)
+        # rubocop:disable Rails/Blank
+        !obj || obj.empty? ? nil : obj
+        # rubocop:enable Rails/Blank
+      end
+
       def validated_class_names(classes)
         return if classes.blank?
 
@@ -120,7 +116,11 @@ module Primer
               memo << class_name if Primer::Classify::Validation.invalid?(class_name)
             end
 
-          raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning." if invalid_class_names.any?
+          if invalid_class_names.any?
+            raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) "\
+              "instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. "\
+              "This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning."
+          end
         end
 
         classes
@@ -133,80 +133,88 @@ module Primer
       #
       # styles_hash - A hash with utility keys that mimic the interface used by https://github.com/primer/components
       #
-      # Returns a string of Primer CSS class names to be added to an HTML class attribute
+      # Returns a string of Primer CSS class names and style attributes to be added to an HTML tag.
       #
       # Example usage:
-      # extract_hash({ mt: 4, py: 2 }) => "mt-4 py-2"
-      def extract_hash(styles_hash)
-        memo = { classes: [], styles: +"" }
-        styles_hash.each do |key, value|
-          next unless VALID_KEYS.include?(key)
+      # extract_css_attrs({ mt: 4, py: 2 }) => "mt-4 py-2"
+      def extract_css_attrs(styles_hash)
+        classes = []
+        styles = +""
 
+        styles_hash.each do |key, value|
           if value.is_a?(Array)
             raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key) || Primer::Classify::Utilities.supported_key?(key)
 
             value.each_with_index do |val, index|
-              Primer::Classify::Cache.read(memo, key, val, BREAKPOINTS[index]) || extract_value(memo, key, val, BREAKPOINTS[index])
+              extract_one_css_attr(classes, styles, key, val, BREAKPOINTS[index])
             end
           else
-            Primer::Classify::Cache.read(memo, key, value, BREAKPOINTS[0]) || extract_value(memo, key, value, BREAKPOINTS[0])
+            extract_one_css_attr(classes, styles, key, value, BREAKPOINTS[0])
           end
         end
 
-        memo[:classes] = memo[:classes].join(" ")
+        {
+          class: classes.join(" "),
+          style: styles
+        }
+      end
+
+      def extract_one_css_attr(classes, styles, key, val, breakpoint)
+        found_classes = Primer::Classify::Cache.instance.fetch(breakpoint, key, val) do
+          classes_from(key, val, breakpoint)
+        end
+
+        classes << found_classes if found_classes
 
-        memo
+        found_styles = styles_from(key, val, breakpoint)
+        styles << found_styles if found_styles
       end
 
-      def extract_value(memo, key, val, breakpoint)
+      def styles_from(key, val, _breakpoint)
+        # Turn this into an if/else like classes_from when we have more branches.
+        # Could be that way now, but it makes Rubocop unhappy.
+      end
+
+      def classes_from(key, val, breakpoint)
         return if val.nil? || val == ""
 
         if Primer::Classify::Utilities.supported_key?(key)
-          memo[:classes] << Primer::Classify::Utilities.classname(key, val, breakpoint)
+          Primer::Classify::Utilities.classname(key, val, breakpoint)
         elsif BOOLEAN_MAPPINGS.key?(key)
-          BOOLEAN_MAPPINGS[key][:mappings].each do |m|
-            memo[:classes] << m[:css_class] if m[:value] == val && m[:css_class].present?
+          bools = BOOLEAN_MAPPINGS[key][:mappings].each_with_object([]) do |m, memo|
+            memo << m[:css_class] if m[:value] == val && m[:css_class].present?
           end
-        elsif key == BG_KEY
-          if val.to_s.start_with?("#")
-            memo[:styles] << "background-color: #{val};"
+          bools.empty? ? nil : bools.join(" ")
+        elsif key == BORDER_KEY
+          if val == true
+            "border"
           else
-            memo[:classes] << Primer::Classify::FunctionalBackgroundColors.color(val)
+            "border-#{val.to_s.dasherize}"
           end
-        elsif key == BORDER_KEY
-          border_value = if val == true
-                           "border"
-                         else
-                           "border-#{val.to_s.dasherize}"
-                         end
-
-          memo[:classes] << border_value
-        elsif key == BORDER_COLOR_KEY
-          memo[:classes] << Primer::Classify::FunctionalBorderColors.color(val)
         elsif BORDER_MARGIN_KEYS.include?(key)
-          memo[:classes] << "#{key.to_s.dasherize}-#{val}"
+          "#{key.to_s.dasherize}-#{val}"
         elsif key == BORDER_RADIUS_KEY
-          memo[:classes] << "rounded-#{val}"
+          "rounded-#{val}"
         elsif Primer::Classify::Flex::KEYS.include?(key)
-          memo[:classes] << Primer::Classify::Flex.classes(key, val, breakpoint)
+          Primer::Classify::Flex.classes(key, val, breakpoint)
         elsif Primer::Classify::Grid::KEYS.include?(key)
-          memo[:classes] << Primer::Classify::Grid.classes(key, val, breakpoint)
+          Primer::Classify::Grid.classes(key, val, breakpoint)
         elsif TEXT_KEYS.include?(key)
-          memo[:classes] << "text-#{val.to_s.dasherize}"
+          "text-#{val.to_s.dasherize}"
         elsif TYPOGRAPHY_KEYS.include?(key)
-          memo[:classes] << if val == :small || val == :normal
-                              "text-#{val.to_s.dasherize}"
-                            else
-                              "f#{val.to_s.dasherize}"
-                            end
+          if val == :small || val == :normal
+            "text-#{val.to_s.dasherize}"
+          else
+            "f#{val.to_s.dasherize}"
+          end
         elsif key == BOX_SHADOW_KEY
-          memo[:classes] << if val == true
-                              "color-shadow-small"
-                            elsif val == :none || val.blank?
-                              "box-shadow-none"
-                            else
-                              "color-shadow-#{val.to_s.dasherize}"
-                            end
+          if val == true
+            "color-shadow-small"
+          elsif val == :none || val.blank?
+            "box-shadow-none"
+          else
+            "color-shadow-#{val.to_s.dasherize}"
+          end
         end
       end
 
@@ -215,6 +223,6 @@ module Primer
       end
     end
 
-    Cache.preload!
+    Cache.instance.preload!
   end
 end

data/lib/primer/view_components/engine.rb

@@ -14,7 +14,6 @@ module Primer
 
       config.primer_view_components = ActiveSupport::OrderedOptions.new
 
-      config.primer_view_components.force_functional_colors = true
       config.primer_view_components.force_system_arguments = false
       config.primer_view_components.silence_deprecations = false
 

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 57
+      PATCH = 58
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end