diff --git a/CHANGELOG.md b/CHANGELOG.md
index 29649ad202..8472aa49bb 100644
--- 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
index 26083a1d54..99d539b1bf 100644
--- 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
index efd7bf31eb..2c49a99b3a 100644
--- a/app/components/primer/label_component.rb
+++ b/app/components/primer/label_component.rb
@@ -3,12 +3,18 @@
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",
@@ -16,11 +22,11 @@ class LabelComponent < Primer::Component
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
index 1a0656cb20..75f6b13361 100644
--- 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
index d8372844ca..c230a4aafe 100644
--- 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
-
+
```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
index d531a88e0b..cc99dadf5d 100644
--- 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
index 2634078bcc..a36ad84a7f 100644
--- 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
index 2c836c0cae..e36018b12b 100644
--- 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" }