primer_view_components 0.0.29 → 0.0.34
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +66 -0
- data/README.md +2 -2
- data/app/components/primer/auto_complete_component.rb +0 -2
- data/app/components/primer/auto_complete_item_component.rb +0 -2
- data/app/components/primer/avatar_stack_component.rb +0 -2
- data/app/components/primer/base_component.rb +115 -83
- data/app/components/primer/blankslate_component.html.erb +1 -1
- data/app/components/primer/blankslate_component.rb +0 -2
- data/app/components/primer/border_box_component.rb +0 -2
- data/app/components/primer/breadcrumb_component.rb +0 -1
- data/app/components/primer/button_component.rb +11 -11
- data/app/components/primer/button_group_component.rb +3 -5
- data/app/components/primer/button_marketing_component.rb +12 -12
- data/app/components/primer/component.rb +2 -0
- data/app/components/primer/details_component.rb +0 -1
- data/app/components/primer/dropdown/menu_component.rb +0 -2
- data/app/components/primer/dropdown_component.rb +0 -2
- data/app/components/primer/flash_component.html.erb +2 -2
- data/app/components/primer/flash_component.rb +10 -12
- data/app/components/primer/layout_component.rb +0 -2
- data/app/components/primer/link_component.rb +9 -9
- data/app/components/primer/menu_component.rb +2 -4
- data/app/components/primer/navigation/tab_component.html.erb +9 -0
- data/app/components/primer/navigation/tab_component.rb +102 -0
- data/app/components/primer/octicon_component.rb +5 -4
- data/app/components/primer/popover_component.rb +19 -3
- data/app/components/primer/progress_bar_component.rb +0 -1
- data/app/components/primer/spinner_component.html.erb +1 -3
- data/app/components/primer/spinner_component.rb +1 -0
- data/app/components/primer/state_component.rb +13 -13
- data/app/components/primer/subhead_component.rb +1 -3
- data/app/components/primer/tab_nav_component.html.erb +9 -11
- data/app/components/primer/tab_nav_component.rb +46 -73
- data/app/components/primer/time_ago_component.rb +2 -1
- data/app/components/primer/timeline_item_component.rb +1 -2
- data/app/components/primer/underline_nav_component.html.erb +19 -7
- data/app/components/primer/underline_nav_component.rb +80 -14
- data/app/lib/primer/classify.rb +5 -14
- data/app/lib/primer/classify/cache.rb +14 -4
- data/app/lib/primer/classify/functional_colors.rb +8 -6
- data/app/lib/primer/classify/spacing.rb +63 -0
- data/app/lib/primer/tabbed_component_helper.rb +35 -0
- data/app/lib/primer/view_helper.rb +2 -2
- data/lib/primer/view_components/version.rb +1 -1
- data/static/statuses.json +1 -1
- metadata +6 -3
- data/app/components/primer/slot.rb +0 -10
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b3251ede218a760e400098f3aab65c1f4bb91dedcc780efa32d0f7b814f35a7c
|
4
|
+
data.tar.gz: 32676c086a6e0ad4c585fa5cc5ddbe6b5296451974f4f892afb24786886bd8e0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b67005b172fc5b314bcd8f18a4340ca4b7c33e6eb88d4b469714fac0c25a5ca82819205c70e3bd3bdd21edb6c3a3bf56870bea68eb61a09c931a7cada5614f5c
|
7
|
+
data.tar.gz: b84b0c68ed718fdb8af16748215c763c87a3f26bea3d5e6ecd0e15d682f50d7849bac2290ebb0023d4770aa5ef47211b31f2f94f5590401410afa6ea2cda193a
|
data/CHANGELOG.md
CHANGED
@@ -2,6 +2,72 @@
|
|
2
2
|
|
3
3
|
## main
|
4
4
|
|
5
|
+
## 0.0.34
|
6
|
+
|
7
|
+
* Add `p: :responsive` and `m: :auto` system arguments.
|
8
|
+
|
9
|
+
*Manuel Puyol*
|
10
|
+
|
11
|
+
* Remove `my: :auto` and negative `m:` system arguments.
|
12
|
+
|
13
|
+
*Manuel Puyol*
|
14
|
+
|
15
|
+
* **Breaking change**: Rename `FlashComponent` `variant` argument to `scheme`.
|
16
|
+
|
17
|
+
*Manuel Puyol*
|
18
|
+
|
19
|
+
* **Breaking change**: Rename `LinkComponent` `variant` argument to `scheme`.
|
20
|
+
|
21
|
+
*Manuel Puyol*
|
22
|
+
|
23
|
+
* **Breaking change**: Rename `ButtonComponent` `button_type` argument to `scheme`.
|
24
|
+
|
25
|
+
*Manuel Puyol*
|
26
|
+
|
27
|
+
* **Breaking change**: Rename `ButtonMarketingComponent` `button_type` argument to `scheme`.
|
28
|
+
|
29
|
+
*Manuel Puyol*
|
30
|
+
|
31
|
+
* **Breaking change**: Rename `StateComponent` `color` argument to `scheme`.
|
32
|
+
|
33
|
+
*Manuel Puyol*
|
34
|
+
|
35
|
+
## 0.0.33
|
36
|
+
|
37
|
+
* Remove `TabbedComponent` validation requiring a tab to be selected.
|
38
|
+
|
39
|
+
*Manuel Puyol*
|
40
|
+
|
41
|
+
## 0.0.32
|
42
|
+
|
43
|
+
* Allow passing the icon name as a positional argument to `OcticonComponent`.
|
44
|
+
|
45
|
+
*Manuel Puyol*
|
46
|
+
|
47
|
+
* Promote `TimeAgoComponent` to beta.
|
48
|
+
|
49
|
+
*Manuel Puyol*
|
50
|
+
|
51
|
+
* **Breaking change**: Update `TabNav#tab` API to accept the tab content as a block and panel content as a slot.
|
52
|
+
|
53
|
+
*Manuel Puyol*
|
54
|
+
|
55
|
+
* **Breaking change**: Update `UnderlineNavComponent` API be more strict and support `TabContainer`.
|
56
|
+
|
57
|
+
*Manuel Puyol*
|
58
|
+
|
59
|
+
## 0.0.31
|
60
|
+
|
61
|
+
* Fix `Popover` bug where body was only returning the last line of the HTML.
|
62
|
+
|
63
|
+
*Manuel Puyol, Blake Williams*
|
64
|
+
|
65
|
+
## 0.0.30
|
66
|
+
|
67
|
+
* Make `color:`, `bg:` and `border_color:` accept string values.
|
68
|
+
|
69
|
+
*Manuel Puyol*
|
70
|
+
|
5
71
|
## 0.0.29
|
6
72
|
|
7
73
|
* Add `primer_time_ago` helper.
|
data/README.md
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
<p align="center">
|
2
|
-
<img width="300px" src="/static/assets/
|
2
|
+
<img width="300px" src="/static/assets/view-components.svg">
|
3
3
|
</p>
|
4
4
|
|
5
5
|
<h1 align="center">Primer ViewComponents</h1>
|
6
6
|
|
7
7
|
<p align="center">ViewComponents for the Primer Design System</p>
|
8
8
|
|
9
|
-
_Note: This library is
|
9
|
+
_Note: This library is under active pre-1.0 development. Breaking changes are likely in patch releases._
|
10
10
|
|
11
11
|
## Documentation
|
12
12
|
|
@@ -3,8 +3,6 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use AutoComplete to populate input values from server search results.
|
5
5
|
class AutoCompleteComponent < Primer::Component
|
6
|
-
include ViewComponent::SlotableV2
|
7
|
-
|
8
6
|
DEFAULT_INPUT_TYPE = :text
|
9
7
|
INPUT_TYPE_OPTIONS = [DEFAULT_INPUT_TYPE, :search].freeze
|
10
8
|
|
@@ -3,8 +3,6 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use AutoCompleteItem to list results of an auto-completed search.
|
5
5
|
class AutoCompleteItemComponent < Primer::Component
|
6
|
-
include ViewComponent::SlotableV2
|
7
|
-
|
8
6
|
# @example Default
|
9
7
|
# <%= render(Primer::AutoCompleteItemComponent.new(selected: true, value: "value")) do |c| %>
|
10
8
|
# Selected
|
@@ -22,94 +22,126 @@ module Primer
|
|
22
22
|
# ```html
|
23
23
|
# <h1 class="mt-0 mt-lg-4 mt-xl-2">Hello world</h1>
|
24
24
|
# ```
|
25
|
-
#
|
26
|
-
# ## HTML attributes
|
27
|
-
#
|
28
|
-
# System arguments include most HTML attributes. For example:
|
29
|
-
#
|
30
|
-
# | Name | Type | Description |
|
31
|
-
# | :- | :- | :- |
|
32
|
-
# | `width` | `Integer` | Width. |
|
33
|
-
# | `height` | `Integer` | Height. |
|
34
|
-
# | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
|
35
|
-
# | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
|
36
|
-
# | `title` | `String` | The `title` attribute. |
|
37
|
-
# | `style` | `String` | Inline styles. |
|
38
|
-
# | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
|
39
25
|
class BaseComponent < Primer::Component
|
40
26
|
status :beta
|
41
27
|
|
42
28
|
include TestSelectorHelper
|
43
29
|
|
44
|
-
#
|
45
|
-
#
|
46
|
-
#
|
47
|
-
#
|
48
|
-
#
|
49
|
-
#
|
50
|
-
#
|
51
|
-
#
|
52
|
-
#
|
53
|
-
#
|
54
|
-
#
|
55
|
-
#
|
56
|
-
#
|
57
|
-
#
|
58
|
-
#
|
59
|
-
#
|
60
|
-
#
|
61
|
-
#
|
62
|
-
#
|
63
|
-
#
|
64
|
-
#
|
65
|
-
#
|
66
|
-
#
|
67
|
-
#
|
68
|
-
#
|
69
|
-
#
|
70
|
-
#
|
71
|
-
#
|
72
|
-
#
|
73
|
-
#
|
74
|
-
#
|
75
|
-
#
|
76
|
-
#
|
77
|
-
#
|
78
|
-
#
|
79
|
-
#
|
80
|
-
#
|
81
|
-
#
|
82
|
-
#
|
83
|
-
#
|
84
|
-
#
|
85
|
-
#
|
86
|
-
#
|
87
|
-
#
|
88
|
-
#
|
89
|
-
#
|
90
|
-
#
|
91
|
-
#
|
92
|
-
#
|
93
|
-
#
|
94
|
-
#
|
95
|
-
#
|
96
|
-
#
|
97
|
-
#
|
98
|
-
#
|
99
|
-
#
|
100
|
-
#
|
101
|
-
#
|
102
|
-
#
|
103
|
-
#
|
104
|
-
#
|
105
|
-
#
|
106
|
-
#
|
107
|
-
#
|
108
|
-
#
|
109
|
-
#
|
110
|
-
#
|
111
|
-
#
|
112
|
-
#
|
30
|
+
# ## HTML attributes
|
31
|
+
#
|
32
|
+
# System arguments include most HTML attributes. For example:
|
33
|
+
#
|
34
|
+
# | Name | Type | Description |
|
35
|
+
# | :- | :- | :- |
|
36
|
+
# | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
|
37
|
+
# | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
|
38
|
+
# | `height` | `Integer` | Height. |
|
39
|
+
# | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
|
40
|
+
# | `style` | `String` | Inline styles. |
|
41
|
+
# | `title` | `String` | The `title` attribute. |
|
42
|
+
# | `width` | `Integer` | Width. |
|
43
|
+
#
|
44
|
+
# ## Animation
|
45
|
+
#
|
46
|
+
# | Name | Type | Description |
|
47
|
+
# | :- | :- | :- |
|
48
|
+
# | `animation` | Symbol | <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %> |
|
49
|
+
#
|
50
|
+
# ## Border
|
51
|
+
#
|
52
|
+
# | Name | Type | Description |
|
53
|
+
# | :- | :- | :- |
|
54
|
+
# | `border_bottom` | Integer | Set to `0` to remove the bottom border. |
|
55
|
+
# | `border_left` | Integer | Set to `0` to remove the left border. |
|
56
|
+
# | `border_radius` | Integer | <%= one_of([0, 1, 2, 3]) %> |
|
57
|
+
# | `border_right` | Integer | Set to `0` to remove the right border. |
|
58
|
+
# | `border_top` | Integer | Set to `0` to remove the top border. |
|
59
|
+
# | `border` | Symbol | <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %> |
|
60
|
+
# | `box_shadow` | Boolean, Symbol | Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %> |
|
61
|
+
#
|
62
|
+
# ## Color
|
63
|
+
#
|
64
|
+
# | Name | Type | Description |
|
65
|
+
# | :- | :- | :- |
|
66
|
+
# | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS, lower: true) %> |
|
67
|
+
# | `border_color` | Symbol | Border color. <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> |
|
68
|
+
# | `color` | Symbol | Text color. <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> |
|
69
|
+
#
|
70
|
+
# ## Flex
|
71
|
+
#
|
72
|
+
# | Name | Type | Description |
|
73
|
+
# | :- | :- | :- |
|
74
|
+
# | `align_items` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :baseline, :stretch]) %> |
|
75
|
+
# | `align_self` | Symbol | <%= one_of([:auto, :start, :end, :center, :baseline, :stretch]) %> |
|
76
|
+
# | `flex_grow` | Integer | To enable, set to `0`. |
|
77
|
+
# | `flex_shrink` | Integer | To enable, set to `0`. |
|
78
|
+
# | `flex` | Integer, Symbol | <%= one_of([1, :auto]) %> |
|
79
|
+
# | `justify_content` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :space_between, :space_around]) %> |
|
80
|
+
# | `width` | Symbol | <%= one_of([:fit, :fill]) %> |
|
81
|
+
#
|
82
|
+
# ## Grid
|
83
|
+
#
|
84
|
+
# | Name | Type | Description |
|
85
|
+
# | :- | :- | :- |
|
86
|
+
# | `col` | Integer | Number of columns. |
|
87
|
+
#
|
88
|
+
# ## Layout
|
89
|
+
#
|
90
|
+
# | Name | Type | Description |
|
91
|
+
# | :- | :- | :- |
|
92
|
+
# | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %> |
|
93
|
+
# | `height` | Symbol | <%= one_of([:fit, :fill]) %> |
|
94
|
+
# | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %> |
|
95
|
+
# | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
|
96
|
+
# | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
|
97
|
+
#
|
98
|
+
# ## Position
|
99
|
+
#
|
100
|
+
# | Name | Type | Description |
|
101
|
+
# | :- | :- | :- |
|
102
|
+
# | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
|
103
|
+
# | `float` | Symbol | <%= one_of([:left, :right]) %> |
|
104
|
+
# | `left` | Boolean | If `false`, sets `left: 0`. |
|
105
|
+
# | `position` | Symbol | <%= one_of([:relative, :absolute, :fixed]) %> |
|
106
|
+
# | `right` | Boolean | If `false`, sets `right: 0`. |
|
107
|
+
# | `top` | Boolean | If `false`, sets `top: 0`. |
|
108
|
+
#
|
109
|
+
# ## Spacing
|
110
|
+
#
|
111
|
+
# | Name | Type | Description |
|
112
|
+
# | :- | :- | :- |
|
113
|
+
# | `m` | Integer | Margin. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:m]) %> |
|
114
|
+
# | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mb]) %> |
|
115
|
+
# | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:ml]) %> |
|
116
|
+
# | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mr]) %> |
|
117
|
+
# | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mt]) %> |
|
118
|
+
# | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mx]) %> |
|
119
|
+
# | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:my]) %> |
|
120
|
+
# | `p` | Integer | Padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:p]) %> |
|
121
|
+
# | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pb]) %> |
|
122
|
+
# | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pl]) %> |
|
123
|
+
# | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pr]) %> |
|
124
|
+
# | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pt]) %> |
|
125
|
+
# | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:px]) %> |
|
126
|
+
# | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:py]) %> |
|
127
|
+
#
|
128
|
+
# ## Typography
|
129
|
+
#
|
130
|
+
# | Name | Type | Description |
|
131
|
+
# | :- | :- | :- |
|
132
|
+
# | `font_size` | String, Integer | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %> |
|
133
|
+
# | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold]) %> |
|
134
|
+
# | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
|
135
|
+
# | `underline` | Boolean | Whether text should be underlined. |
|
136
|
+
# | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
|
137
|
+
#
|
138
|
+
# ## Other
|
139
|
+
#
|
140
|
+
# | Name | Type | Description |
|
141
|
+
# | :- | :- | :- |
|
142
|
+
# | classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |
|
143
|
+
# | tag | Symbol | HTML tag name to be passed to `content_tag`. |
|
144
|
+
# | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
|
113
145
|
def initialize(tag:, classes: nil, **system_arguments)
|
114
146
|
@tag = tag
|
115
147
|
@result = Primer::Classify.call(**system_arguments.merge(classes: classes))
|
@@ -2,7 +2,7 @@
|
|
2
2
|
<% if spinner.present? %>
|
3
3
|
<%= spinner %>
|
4
4
|
<% elsif @icon.present? %>
|
5
|
-
<%= primer_octicon
|
5
|
+
<%= primer_octicon @icon, size: @icon_size, classes: "blankslate-icon" %>
|
6
6
|
<% elsif @image_src.present? && @image_alt.present? %>
|
7
7
|
<%= image_tag "#{@image_src}", class: "mb-3", size: "56x56", alt: "#{@image_alt}" %>
|
8
8
|
<% end %>
|
@@ -3,7 +3,6 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use breadcrumbs to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item, which is a plain string indicating the current page.
|
5
5
|
class BreadcrumbComponent < Primer::Component
|
6
|
-
include ViewComponent::SlotableV2
|
7
6
|
status :beta
|
8
7
|
|
9
8
|
# _Note: if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link._
|
@@ -3,14 +3,14 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
|
5
5
|
class ButtonComponent < Primer::Component
|
6
|
-
|
7
|
-
|
8
|
-
|
6
|
+
DEFAULT_SCHEME = :default
|
7
|
+
SCHEME_MAPPINGS = {
|
8
|
+
DEFAULT_SCHEME => "",
|
9
9
|
:primary => "btn-primary",
|
10
10
|
:danger => "btn-danger",
|
11
11
|
:outline => "btn-outline"
|
12
12
|
}.freeze
|
13
|
-
|
13
|
+
SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
|
14
14
|
|
15
15
|
DEFAULT_VARIANT = :medium
|
16
16
|
VARIANT_MAPPINGS = {
|
@@ -26,24 +26,24 @@ module Primer
|
|
26
26
|
DEFAULT_TYPE = :button
|
27
27
|
TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
|
28
28
|
|
29
|
-
# @example
|
29
|
+
# @example Schemes
|
30
30
|
# <%= render(Primer::ButtonComponent.new) { "Default" } %>
|
31
|
-
# <%= render(Primer::ButtonComponent.new(
|
32
|
-
# <%= render(Primer::ButtonComponent.new(
|
33
|
-
# <%= render(Primer::ButtonComponent.new(
|
31
|
+
# <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
|
32
|
+
# <%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
|
33
|
+
# <%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
|
34
34
|
#
|
35
35
|
# @example Variants
|
36
36
|
# <%= render(Primer::ButtonComponent.new(variant: :small)) { "Small" } %>
|
37
37
|
# <%= render(Primer::ButtonComponent.new(variant: :medium)) { "Medium" } %>
|
38
38
|
# <%= render(Primer::ButtonComponent.new(variant: :large)) { "Large" } %>
|
39
39
|
#
|
40
|
-
# @param
|
40
|
+
# @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
|
41
41
|
# @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
|
42
42
|
# @param tag [Symbol] <%= one_of(Primer::ButtonComponent::TAG_OPTIONS) %>
|
43
43
|
# @param type [Symbol] <%= one_of(Primer::ButtonComponent::TYPE_OPTIONS) %>
|
44
44
|
# @param group_item [Boolean] Whether button is part of a ButtonGroup.
|
45
45
|
def initialize(
|
46
|
-
|
46
|
+
scheme: DEFAULT_SCHEME,
|
47
47
|
variant: DEFAULT_VARIANT,
|
48
48
|
tag: DEFAULT_TAG,
|
49
49
|
type: DEFAULT_TYPE,
|
@@ -62,7 +62,7 @@ module Primer
|
|
62
62
|
@system_arguments[:classes] = class_names(
|
63
63
|
"btn",
|
64
64
|
system_arguments[:classes],
|
65
|
-
|
65
|
+
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
|
66
66
|
VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
|
67
67
|
"BtnGroup-item" => group_item
|
68
68
|
)
|
@@ -3,8 +3,6 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use ButtonGroupComponent to render a series of buttons.
|
5
5
|
class ButtonGroupComponent < Primer::Component
|
6
|
-
include ViewComponent::SlotableV2
|
7
|
-
|
8
6
|
# Required list of buttons to be rendered.
|
9
7
|
#
|
10
8
|
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.
|
@@ -13,9 +11,9 @@ module Primer
|
|
13
11
|
# @example Default
|
14
12
|
# <%= render(Primer::ButtonGroupComponent.new) do |component|
|
15
13
|
# component.button { "Default" }
|
16
|
-
# component.button(
|
17
|
-
# component.button(
|
18
|
-
# component.button(
|
14
|
+
# component.button(scheme: :primary) { "Primary" }
|
15
|
+
# component.button(scheme: :danger) { "Danger" }
|
16
|
+
# component.button(scheme: :outline) { "Outline" }
|
19
17
|
# component.button(classes: "my-class") { "Custom class" }
|
20
18
|
# end %>
|
21
19
|
#
|