Restrict size argument
MODIFY
app/components/primer/spinner_component.rb
app/components/primer/spinner_component.rb
@@ -4,19 +4,30 @@ module Primer
# Use Primer::SpinnerComponent to let users know that content is being loaded.
class SpinnerComponent < Primer::Component
+ DEFAULT_SIZE = :medium
+ SIZE_MAPPINGS = {
+ :small => 16,
+ DEFAULT_SIZE => 32,
+ :large => 64,
+ }.freeze
+ SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
#
# @example 48|Default
# <%= render(Primer::SpinnerComponent.new) %>
#
# @example 32|Small
- # <%= render(Primer::SpinnerComponent.new(size: 16)) %>
+ # <%= render(Primer::SpinnerComponent.new(size: :small)) %>
+ #
+ # @example 80|Large
+ # <%= render(Primer::SpinnerComponent.new(size: :large)) %>
#
- # @param size [Integer] Sets the size of the spinner
- def initialize(size: 32, **kwargs)
+ # @param size [Symbol] Sets the size of the spinner
+ def initialize(size: DEFAULT_SIZE, **kwargs)
@kwargs = kwargs
@kwargs[:tag] ||= :svg
- @kwargs[:width] = size
- @kwargs[:height] = size
+ @kwargs[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
+ @kwargs[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
@kwargs[:viewBox] = "0 0 16 16"
@kwargs[:fill] = :none
# Setting `box-sizing: content-box` allows consumers to add padding

MODIFY
docs/content/components/spinner.md
docs/content/components/spinner.md
@@ -19,11 +19,19 @@ Use Primer::SpinnerComponent to let users know that content is being loaded.
<iframe style="width: 100%; border: 0px; height: 32px;" srcdoc="<html><head><link href='https://unpkg.com/@primer/css/dist/primer.css' rel='stylesheet'></head><body><svg viewBox='0 0 16 16' fill='none' style='box-sizing: content-box; color: var(--color-icon-primary);' width='16' height='16'> <circle cx='8' cy='8' r='7' stroke='currentColor' stroke-opacity='0.25' stroke-width='2' vector-effect='non-scaling-stroke' /> <path d='M15 8a7.002 7.002 0 00-7-7' stroke='currentColor' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'> <animateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='1s' repeatCount='indefinite' /> </path></svg></body></html>"></iframe>
```erb
-<%= render(Primer::SpinnerComponent.new(size: 16)) %>
+<%= render(Primer::SpinnerComponent.new(size: :small)) %>
+```
+
+### Large
+
+<iframe style="width: 100%; border: 0px; height: 80px;" srcdoc="<html><head><link href='https://unpkg.com/@primer/css/dist/primer.css' rel='stylesheet'></head><body><svg viewBox='0 0 16 16' fill='none' style='box-sizing: content-box; color: var(--color-icon-primary);' width='64' height='64'> <circle cx='8' cy='8' r='7' stroke='currentColor' stroke-opacity='0.25' stroke-width='2' vector-effect='non-scaling-stroke' /> <path d='M15 8a7.002 7.002 0 00-7-7' stroke='currentColor' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'> <animateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='1s' repeatCount='indefinite' /> </path></svg></body></html>"></iframe>
+
+```erb
+<%= render(Primer::SpinnerComponent.new(size: :large)) %>
```
## Arguments
| Name | Type | Default | Description |
| :- | :- | :-: | :- |
-| size | Integer | 32 | Sets the size of the spinner |
+| size | Symbol | DEFAULT_SIZE | Sets the size of the spinner |

MODIFY
stories/primer/spinner_component_stories.rb
stories/primer/spinner_component_stories.rb
@@ -5,7 +5,7 @@ class Primer::SpinnerComponentStories < ViewComponent::Storybook::Stories
story(:spinner) do
controls do
- size 32
+ select(:size, Primer::SpinnerComponent::SIZE_OPTIONS, :medium)
end
end
end

MODIFY
test/components/spinner_component_test.rb
test/components/spinner_component_test.rb
@@ -17,9 +17,15 @@ class PrimerSpinnerComponentTest < Minitest::Test
assert_selector("svg[height=32][width=32]")
end
- def test_sets_size_height_and_width
- render_inline(Primer::SpinnerComponent.new(size: 16))
+ def test_size_small
+ render_inline(Primer::SpinnerComponent.new(size: :small))
assert_selector("svg[height=16][width=16]")
end
+
+ def test_size_large
+ render_inline(Primer::SpinnerComponent.new(size: :large))
+
+ assert_selector("svg[height=64][width=64]")
+ end
end

Restrict size argument