Merge pull request #135 from primer/label-next-colors

add support for functional colors to Label
primer · Nov 16, 2020 · 68ac68d · 68ac68d · vercel · Nov 16, 2020
2 parents 0ec555a + 8e9f3e5
commit 68ac68d
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## main
 
+## 0.0.14
+
+* Add functional colors to Label.
+
+    *Joel Hawksley*
+
 ## 0.0.13
 
 * Add support for `xl` breakpoint.

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    primer_view_components (0.0.13)
+    primer_view_components (0.0.14)
       octicons_helper (>= 9.0.0, < 12.0.0)
       rails (>= 5.0.0, < 7.0)
       view_component (>= 2.0.0, < 3.0)

diff --git a/app/components/primer/label_component.rb b/app/components/primer/label_component.rb
@@ -3,24 +3,30 @@
 module Primer
   # Use labels to add contextual metadata to a design.
   class LabelComponent < Primer::Component
-    SCHEME_MAPPINGS = {
-      # gray
+    NEW_SCHEME_MAPPINGS = {
+      primary: "Label--primary",
+      secondary: "Label--secondary",
+      info: "Label--info",
+      success: "Label--success",
+      warning: "Label--warning",
+      danger: "Label--danger",
+    }
+
+    DEPRECATED_SCHEME_MAPPINGS = {
       gray: "Label--gray",
       dark_gray: "Label--gray-darker",
-
-      # colored
       yellow: "Label--yellow",
       orange: "Label--orange",
       red: "Label--red",
       green: "Label--green",
       blue: "Label--blue",
       purple: "Label--purple",
       pink: "Label--pink",
-
-      # Deprecated
       outline: "Label--outline",
       green_outline: "Label--outline-green",
     }.freeze
+
+    SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
     SCHEME_OPTIONS = SCHEME_MAPPINGS.keys << nil
 
     VARIANT_MAPPINGS = {
@@ -42,7 +48,7 @@ class LabelComponent < Primer::Component
     #   <%= render(Primer::LabelComponent.new(title: "Label: Label", variant: :large)) { "Large" } %>
     #
     # @param title [String] `title` attribute for the component element.
-    # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_OPTIONS) %>
+    # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::DEPRECATED_SCHEME_MAPPINGS.keys) %>
     # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(title:, scheme: nil, variant: nil, **system_arguments)

diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    primer_view_components (0.0.10)
+    primer_view_components (0.0.13)
       octicons_helper (>= 9.0.0, < 12.0.0)
       rails (>= 5.0.0, < 7.0)
       view_component (>= 2.0.0, < 3.0)
@@ -105,10 +105,10 @@ GEM
     nio4r (2.5.4)
     nokogiri (1.10.10)
       mini_portile2 (~> 2.4.0)
-    octicons (11.0.0)
+    octicons (11.1.0)
       nokogiri (>= 1.6.3.1)
-    octicons_helper (11.0.0)
-      octicons (= 11.0.0)
+    octicons_helper (11.1.0)
+      octicons (= 11.1.0)
       rails
     pry (0.13.1)
       coderay (~> 1.1)

diff --git a/docs/content/components/label.md b/docs/content/components/label.md
@@ -8,7 +8,7 @@ Use labels to add contextual metadata to a design.
 
 ### Schemes
 
-<iframe style="width: 100%; border: 0px; height: 40px;" srcdoc="<html><head><link href='https://unpkg.com/@primer/css/dist/primer.css' rel='stylesheet'></head><body><span title='Label: Label' class='Label bg-blue'>default</span><span title='Label: Label' class='Label Label--gray '>gray</span><span title='Label: Label' class='Label Label--gray-darker '>dark_gray</span><span title='Label: Label' class='Label Label--yellow '>yellow</span><span title='Label: Label' class='Label Label--green '>green</span><span title='Label: Label' class='Label Label--purple '>purple</span></body></html>"></iframe>
+<iframe style="width: 100%; border: 0px; height: 40px;" srcdoc="<html><head><link href='https://unpkg.com/@primer/css/dist/primer.css' rel='stylesheet'></head><body><span title='Label: Label' class='Label bg-blue'>default</span><span title='Label: Label' class='Label '>gray</span><span title='Label: Label' class='Label '>dark_gray</span><span title='Label: Label' class='Label '>yellow</span><span title='Label: Label' class='Label '>green</span><span title='Label: Label' class='Label '>purple</span></body></html>"></iframe>
 
 ```erb
 <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "default" } %>
@@ -33,6 +33,6 @@ Use labels to add contextual metadata to a design.
 | Name | Type | Default | Description |
 | :- | :- | :- | :- |
 | `title` | `String` | N/A | `title` attribute for the component element. |
-| `scheme` | `Symbol` | `nil` | One of `:gray`, `:dark_gray`, `:yellow`, `:orange`, `:red`, `:green`, `:blue`, `:purple`, `:pink`, `:outline`, `:green_outline`, or `nil`. |
+| `scheme` | `Symbol` | `nil` | One of `:gray`, `:dark_gray`, `:yellow`, `:orange`, `:red`, `:green`, `:blue`, `:purple`, `:pink`, `:outline`, or `:green_outline`. |
 | `variant` | `Symbol` | `nil` | One of `:large`, `:inline`, or `nil`. |
 | `system_arguments` | `Hash` | N/A | [System Arguments](/system-arguments) |
diff --git a/lib/primer/view_components/version.rb b/lib/primer/view_components/version.rb
@@ -5,7 +5,7 @@ module ViewComponents
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 13
+      PATCH = 14
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

diff --git a/stories/primer/label_component_stories.rb b/stories/primer/label_component_stories.rb
@@ -6,7 +6,8 @@ class Primer::LabelComponentStories < ViewComponent::Storybook::Stories
   story(:label) do
     controls do
       title "this is a label"
-      select(:scheme, Primer::LabelComponent::SCHEME_MAPPINGS.keys, :blue)
+      # TODO: Update to use functional scheme mappings
+      select(:scheme, Primer::LabelComponent::DEPRECATED_SCHEME_MAPPINGS.keys, :blue)
       select(:variant, Primer::LabelComponent::VARIANT_MAPPINGS.keys, :large)
     end
 

diff --git a/test/components/label_component_test.rb b/test/components/label_component_test.rb
@@ -17,6 +17,12 @@ def test_defaults_to_bg_blue
     assert_selector(".bg-blue")
   end
 
+  def test_supports_functional_schemes
+    render_inline(Primer::LabelComponent.new(title: "foo", scheme: :danger)) { "private" }
+
+    assert_selector(".Label--danger")
+  end
+
   def test_falls_back_when_scheme_isn_t_valid
     render_inline(Primer::LabelComponent.new(title: "title", scheme: :pink)) { "content" }