Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Convert StateComponent to support functional colors internally #269

Merged
merged 25 commits into from Feb 25, 2021
Merged

Convert StateComponent to support functional colors internally #269

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
a50ec01
Convert StateComponent to support functional colors
srt32 Feb 23, 2021
716727e
Update hash syntax
srt32 Feb 23, 2021
ea20ac7
Have it your way rubocop
srt32 Feb 23, 2021
09e5daa
Merge branch 'main' into st-convert-state-component-to-functional-colors
srt32 Feb 23, 2021
b5bcc03
Update app/components/primer/state_component.rb
srt32 Feb 23, 2021
54cd3b3
Update stories/primer/state_component_stories.rb
srt32 Feb 23, 2021
ba0cfda
Update app/components/primer/state_component.rb
srt32 Feb 23, 2021
cb823cc
Update test/components/state_component_test.rb
srt32 Feb 23, 2021
83ab0c5
docs: build docs
actions-user Feb 23, 2021
34bdd0f
Update app/components/primer/state_component.rb
srt32 Feb 23, 2021
f9d6b01
Merge branch 'main' into st-convert-state-component-to-functional-colors
srt32 Feb 23, 2021
ce30e41
Update examples to use functional keys
srt32 Feb 23, 2021
17f29d2
docs: build docs
actions-user Feb 23, 2021
310a95f
Update app/components/primer/state_component.rb
srt32 Feb 25, 2021
7f5083c
Update test/components/state_component_test.rb
srt32 Feb 25, 2021
c6447e8
docs: build docs
actions-user Feb 25, 2021
7261a3e
Merge branch 'main' into st-convert-state-component-to-functional-colors
srt32 Feb 25, 2021
d0ff791
Update app/components/primer/state_component.rb
srt32 Feb 25, 2021
b42dcd4
Update state_component_test.rb
srt32 Feb 25, 2021
35dc6b0
Update test/components/state_component_test.rb
srt32 Feb 25, 2021
88cb854
Add note about css dep
srt32 Feb 25, 2021
b01f4d3
Update CHANGELOG.md
srt32 Feb 25, 2021
fbd9a43
Update CHANGELOG.md
srt32 Feb 25, 2021
3d24d3f
Update CHANGELOG.md
srt32 Feb 25, 2021
546e933
Update CHANGELOG.md
srt32 Feb 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 9 additions & 2 deletions app/components/primer/state_component.rb
View file
Open in desktop
Expand Up @@ -4,12 +4,19 @@ module Primer
# Component for rendering the status of an item.
class StateComponent < Primer::Component
COLOR_DEFAULT = :default
COLOR_MAPPINGS = {
NEW_COLOR_MAPPINGS = {
open: "State--green",
closed: "State--red",
merged: "State--purple"
}.freeze

DEPRECATED_COLOR_MAPPINGS = {
COLOR_DEFAULT => "",
:green => "State--green",
:red => "State--red",
:purple => "State--purple"
srt32 marked this conversation as resolved.
Show resolved Hide resolved
}.freeze
COLOR_MAPPINGS = NEW_COLOR_MAPPINGS.merge(DEPRECATED_COLOR_MAPPINGS)
COLOR_OPTIONS = COLOR_MAPPINGS.keys

SIZE_DEFAULT = :default
srt32 marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -36,7 +43,7 @@ class StateComponent < Primer::Component
# <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
#
# @param title [String] `title` HTML attribute.
# @param color [Symbol] Background color. <%= one_of(Primer::StateComponent::COLOR_OPTIONS) %>
# @param color [Symbol] Background color. <%= one_of(Primer::StateComponent:: COLOR_OPTIONS) %>
srt32 marked this conversation as resolved.
Show resolved Hide resolved
# @param tag [Symbol] HTML tag for element. <%= one_of(Primer::StateComponent::TAG_OPTIONS) %>
# @param size [Symbol] <%= one_of(Primer::StateComponent::SIZE_OPTIONS) %>
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
Expand Down
2 changes: 1 addition & 1 deletion docs/content/components/state.md
View file
Open in desktop
Expand Up @@ -43,7 +43,7 @@ Component for rendering the status of an item.
| Name | Type | Default | Description |
| :- | :- | :- | :- |
| `title` | `String` | N/A | `title` HTML attribute. |
| `color` | `Symbol` | `:default` | Background color. One of `:default`, `:green`, `:red`, or `:purple`. |
| `color` | `Symbol` | `:default` | Background color. One of `:open`, `:closed`, `:merged`, `:default`, `:green`, `:red`, or `:purple`. |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a little odd to have this argument named color, as that's also a system argument. But perhaps that's a concern for another time 😄

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is part of the conversation about splitting system_arguments into different things

| `tag` | `Symbol` | `:span` | HTML tag for element. One of `:span`, `:div`, or `:a`. |
| `size` | `Symbol` | `:default` | One of `:default` and `:small`. |
| `system_arguments` | `Hash` | N/A | [System arguments](/system-arguments) |
6 changes: 6 additions & 0 deletions test/components/state_component_test.rb
View file
Open in desktop
Expand Up @@ -62,4 +62,10 @@ def test_applies_additional_classes_to_the_underlying_element_when_given_custom_

assert_selector(".State.State--red.State--small.additional.class-names.here")
srt32 marked this conversation as resolved.
Show resolved Hide resolved
end

def test_supports_functional_colors
render_inline(Primer::StateComponent.new(title: "foo", color: :merged)) { "Merged" }

assert_selector(".State--purple")
srt32 marked this conversation as resolved.
Show resolved Hide resolved
end
end