primer_view_components 0.0.120 → 0.0.122
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +58 -0
- data/app/assets/styles/primer_view_components.css +2 -2
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list.css.json +123 -1
- data/app/components/primer/alpha/auto_complete.css.json +23 -1
- data/app/components/primer/alpha/banner.css.json +24 -1
- data/app/components/primer/alpha/button_marketing.css.json +33 -1
- data/app/components/primer/alpha/check_box.rb +74 -0
- data/app/components/primer/alpha/check_box_group.rb +36 -0
- data/app/components/primer/alpha/dialog.css.json +82 -1
- data/app/components/primer/alpha/dialog.rb +1 -1
- data/app/components/primer/alpha/dropdown.css.json +40 -1
- data/app/components/primer/alpha/form_button.rb +32 -0
- data/app/components/primer/alpha/form_control.html.erb +26 -0
- data/app/components/primer/alpha/form_control.rb +105 -0
- data/app/components/primer/alpha/layout.css.json +80 -1
- data/app/components/primer/alpha/menu.css.json +28 -1
- data/app/components/primer/alpha/multi_input.rb +81 -0
- data/app/components/primer/alpha/radio_button.rb +25 -0
- data/app/components/primer/alpha/radio_button_group.rb +36 -0
- data/app/components/primer/alpha/segmented_control/item.rb +1 -0
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +31 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +43 -12
- data/app/components/primer/alpha/segmented_control.rb +30 -0
- data/app/components/primer/alpha/select.rb +37 -0
- data/app/components/primer/alpha/submit_button.rb +32 -0
- data/app/components/primer/alpha/tab_nav.css.json +24 -1
- data/app/components/primer/alpha/tab_panels.rb +7 -0
- data/app/components/primer/alpha/text_area.rb +24 -0
- data/app/components/primer/alpha/text_field.css +2 -2
- data/app/components/primer/alpha/text_field.css.json +134 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +27 -0
- data/app/components/primer/alpha/text_field.rb +16 -20
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.json +40 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.pcss +31 -61
- data/app/components/primer/alpha/underline_nav.css.json +28 -1
- data/app/components/primer/base_component.rb +3 -3
- data/app/components/primer/beta/avatar.css.json +17 -1
- data/app/components/primer/beta/avatar_stack.css.json +28 -1
- data/app/components/primer/beta/blankslate.css.json +22 -1
- data/app/components/primer/beta/border_box.css.json +54 -1
- data/app/components/primer/beta/breadcrumbs.css.json +11 -1
- data/app/components/primer/beta/button.css.json +71 -1
- data/app/components/primer/beta/close_button.rb +1 -1
- data/app/components/primer/beta/counter.css.json +10 -1
- data/app/components/primer/beta/flash.css.json +27 -1
- data/app/components/primer/beta/label.css.json +25 -1
- data/app/components/primer/beta/link.css.json +19 -1
- data/app/components/primer/beta/popover.css.json +39 -1
- data/app/components/primer/beta/progress_bar.css.json +10 -1
- data/app/components/primer/{local_time.d.ts → beta/relative_time.d.ts} +0 -0
- data/app/components/primer/{local_time.js → beta/relative_time.js} +0 -0
- data/app/components/primer/{local_time.ts → beta/relative_time.ts} +0 -0
- data/app/components/primer/beta/state.css.json +13 -1
- data/app/components/primer/beta/subhead.css.json +12 -1
- data/app/components/primer/beta/timeline_item.css.json +16 -1
- data/app/components/primer/beta/truncate.css.json +12 -1
- data/app/components/primer/component.rb +12 -3
- data/app/components/primer/primer.d.ts +1 -2
- data/app/components/primer/primer.js +1 -2
- data/app/components/primer/primer.ts +1 -2
- data/app/components/primer/truncate.css.json +13 -1
- data/app/forms/example_toggle_switch_form.rb +1 -1
- data/app/forms/{select_list_form.rb → select_form.rb} +1 -1
- data/app/lib/primer/css/layout.css.json +316 -1
- data/app/lib/primer/css/utilities.css.json +1659 -1
- data/app/lib/primer/view_helper.rb +0 -1
- data/lib/primer/deprecations.yml +0 -78
- data/lib/primer/form_components.rb +26 -6
- data/lib/primer/forms/acts_as_component.rb +12 -1
- data/lib/primer/forms/builder.rb +1 -17
- data/lib/primer/forms/button.rb +4 -1
- data/lib/primer/forms/check_box_group.html.erb +14 -9
- data/lib/primer/forms/check_box_group.rb +5 -0
- data/lib/primer/forms/dsl/check_box_group_input.rb +3 -4
- data/lib/primer/forms/dsl/input.rb +33 -2
- data/lib/primer/forms/dsl/input_methods.rb +49 -1
- data/lib/primer/forms/dsl/radio_button_group_input.rb +2 -3
- data/lib/primer/forms/dsl/{select_list_input.rb → select_input.rb} +2 -2
- data/lib/primer/forms/dsl/text_field_input.rb +7 -5
- data/lib/primer/forms/form_control.rb +0 -1
- data/lib/primer/forms/group.html.erb +1 -1
- data/lib/primer/forms/multi.html.erb +8 -6
- data/lib/primer/forms/multi.rb +2 -0
- data/lib/primer/forms/radio_button_group.html.erb +14 -9
- data/lib/primer/forms/radio_button_group.rb +5 -0
- data/lib/primer/forms/{select_list.html.erb → select.html.erb} +0 -0
- data/lib/primer/forms/{select_list.rb → select.rb} +2 -2
- data/lib/primer/forms/spacing_wrapper.html.erb +1 -1
- data/lib/primer/forms/text_area.rb +1 -1
- data/lib/primer/forms/text_field.rb +5 -1
- data/lib/primer/forms/toggle_switch_form.rb +10 -3
- data/lib/primer/forms/utils.rb +20 -0
- data/lib/primer/view_components/engine.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/yard/backend.rb +1 -15
- data/lib/primer/yard/component_manifest.rb +44 -27
- data/lib/primer/yard/component_ref.rb +40 -0
- data/lib/primer/yard/docs_helper.rb +16 -2
- data/lib/primer/yard/legacy_gatsby_backend.rb +9 -15
- data/lib/primer/yard/lookbook_docs_helper.rb +32 -0
- data/lib/primer/yard/lookbook_pages_backend.rb +194 -0
- data/lib/primer/yard/registry.rb +6 -21
- data/lib/primer/yard/renders_many_handler.rb +1 -1
- data/lib/primer/yard/renders_one_handler.rb +1 -1
- data/lib/primer/yard.rb +14 -0
- data/lib/tasks/docs.rake +26 -13
- data/lib/tasks/static.rake +22 -0
- data/previews/pages/forms/01_introduction.md.erb +44 -0
- data/previews/pages/forms/02_getting_started.md.erb +125 -0
- data/previews/pages/forms/03_caption_templates.md.erb +30 -0
- data/previews/pages/forms/04_after_content.md.erb +39 -0
- data/previews/pages/forms/05_groups_layouts.md.erb +22 -0
- data/previews/pages/forms/06_miscellaneous_inputs.md.erb +43 -0
- data/previews/pages/forms/07_toggle_switch_forms.md.erb +58 -0
- data/previews/pages/forms/08_validations.md.erb +28 -0
- data/previews/pages/forms/09_compound_forms.md.erb +97 -0
- data/previews/primer/alpha/auto_complete_preview.rb +6 -6
- data/previews/primer/alpha/check_box_group_preview.rb +89 -0
- data/previews/primer/alpha/check_box_preview.rb +62 -0
- data/previews/primer/alpha/form_control_preview/playground.html.erb +9 -0
- data/previews/primer/alpha/form_control_preview.rb +106 -0
- data/previews/primer/alpha/multi_input_preview/playground.html.erb +41 -0
- data/previews/primer/alpha/multi_input_preview.rb +80 -0
- data/previews/primer/alpha/radio_button_group_preview.rb +83 -0
- data/previews/primer/alpha/radio_button_preview.rb +62 -0
- data/previews/primer/alpha/segmented_control_preview/with_label_and_caption.html.erb +9 -0
- data/previews/primer/alpha/segmented_control_preview/with_subhead_actions.html.erb +11 -0
- data/previews/primer/alpha/segmented_control_preview.rb +7 -1
- data/previews/primer/alpha/select_preview.rb +130 -0
- data/previews/primer/alpha/text_area_preview.rb +87 -0
- data/previews/primer/alpha/text_field_preview.rb +24 -1
- data/previews/primer/alpha/toggle_switch_preview.rb +9 -9
- data/previews/primer/beta/auto_complete_preview.rb +17 -17
- data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +2 -2
- data/previews/primer/forms/forms_preview/{select_list_form.html.erb → select_form.html.erb} +1 -1
- data/previews/primer/forms/forms_preview.rb +3 -1
- data/previews/primer/url_helpers.rb +1 -1
- data/static/arguments.json +1348 -1412
- data/static/audited_at.json +12 -21
- data/static/constants.json +20 -51
- data/static/previews.json +1812 -0
- data/static/statuses.json +10 -19
- metadata +47 -32
- data/app/components/primer/dropdown/menu.rb +0 -14
- data/app/components/primer/dropdown.rb +0 -7
- data/app/components/primer/hellip_button.rb +0 -7
- data/app/components/primer/label_component.rb +0 -7
- data/app/components/primer/link_component.rb +0 -7
- data/app/components/primer/local_time.rb +0 -63
- data/app/components/primer/markdown.rb +0 -7
- data/app/components/primer/menu_component.rb +0 -7
- data/app/components/primer/octicon_component.rb +0 -7
- data/app/components/primer/octicon_symbols_component.rb +0 -7
- data/app/components/primer/popover_component.rb +0 -8
- data/app/components/primer/spinner_component.rb +0 -7
- data/app/components/primer/state_component.rb +0 -7
- data/app/components/primer/subhead_component.rb +0 -7
- data/app/components/primer/tab_container_component.rb +0 -7
- data/app/components/primer/time_ago_component.d.ts +0 -1
- data/app/components/primer/time_ago_component.js +0 -1
- data/app/components/primer/time_ago_component.rb +0 -51
- data/app/components/primer/time_ago_component.ts +0 -1
- data/app/components/primer/timeline_item_component.rb +0 -13
- data/previews/primer/local_time_component_preview.rb +0 -57
- data/previews/primer/time_ago_component_preview.rb +0 -27
@@ -0,0 +1,105 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Alpha
|
5
|
+
# Wraps an input (or arbitrary content) with a label above and a caption and validation message beneath.
|
6
|
+
# NOTE: This `FormControl` component is designed for wrapping inputs that aren't supported by the Primer
|
7
|
+
# forms framework.
|
8
|
+
class FormControl < Primer::Component
|
9
|
+
# Describes the field and what sorts of input it expects. Displayed below the input.
|
10
|
+
# Note that this slot takes precedence over the `caption:` argument in the constructor.
|
11
|
+
renders_one :caption
|
12
|
+
|
13
|
+
# @example Default
|
14
|
+
# <%= render(Primer::Alpha::FormControl.new(label: "Best character")) do |component| %>
|
15
|
+
# <% component.with_input do |input_arguments| %>
|
16
|
+
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "Best character", **input_arguments)) do |seg| %>
|
17
|
+
# <% seg.with_item(label: "Han Solo") %>
|
18
|
+
# <% seg.with_item(label: "Luke Skywalker") %>
|
19
|
+
# <% seg.with_item(label: "Leia Organa") %>
|
20
|
+
# <% end %>
|
21
|
+
# <% end %>
|
22
|
+
# <% end %>
|
23
|
+
#
|
24
|
+
# @param label [String] Label text displayed above the input.
|
25
|
+
# @param caption [String] Describes the field and what sort of input it expects. Displayed below the input. Note that the `caption` slot is also available and takes precedence over this argument when provided.
|
26
|
+
# @param validation_message [String] A string displayed in red between the caption and the input indicating the input's contents are invalid.
|
27
|
+
# @param required [Boolean] Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system.
|
28
|
+
# @param visually_hide_label [Boolean] When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers.
|
29
|
+
# @param full_width [Boolean] When set to `true`, the form control will take up all the horizontal space allowed by its container.
|
30
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
31
|
+
def initialize(label:, caption: nil, validation_message: nil, required: false, visually_hide_label: false, full_width: false, **system_arguments)
|
32
|
+
@label = label
|
33
|
+
@init_caption = caption
|
34
|
+
@validation_message = validation_message
|
35
|
+
@required = required
|
36
|
+
@visually_hide_label = visually_hide_label
|
37
|
+
@full_width = full_width
|
38
|
+
@system_arguments = system_arguments
|
39
|
+
|
40
|
+
@system_arguments[:classes] = class_names(
|
41
|
+
@system_arguments[:classes],
|
42
|
+
"FormControl",
|
43
|
+
"FormControl--fullWidth" => full_width?
|
44
|
+
)
|
45
|
+
|
46
|
+
@label_arguments = {
|
47
|
+
classes: class_names(
|
48
|
+
"FormControl-label",
|
49
|
+
visually_hide_label? ? "sr-only" : nil
|
50
|
+
)
|
51
|
+
}
|
52
|
+
|
53
|
+
base_id = self.class.generate_id
|
54
|
+
@validation_id = "validation-#{base_id}"
|
55
|
+
@caption_id = "caption-#{base_id}"
|
56
|
+
|
57
|
+
@validation_arguments = {
|
58
|
+
classes: "FormControl-inlineValidation",
|
59
|
+
id: @validation_id
|
60
|
+
}
|
61
|
+
end
|
62
|
+
|
63
|
+
# @!parse
|
64
|
+
# # The input content. Yields a set of <%= link_to_system_arguments_docs %> that should be added to the input.
|
65
|
+
# #
|
66
|
+
# renders_one(:input)
|
67
|
+
|
68
|
+
def with_input(&block)
|
69
|
+
@input_block = block
|
70
|
+
end
|
71
|
+
|
72
|
+
def required?
|
73
|
+
@required
|
74
|
+
end
|
75
|
+
|
76
|
+
def visually_hide_label?
|
77
|
+
@visually_hide_label
|
78
|
+
end
|
79
|
+
|
80
|
+
def full_width?
|
81
|
+
@full_width
|
82
|
+
end
|
83
|
+
|
84
|
+
private
|
85
|
+
|
86
|
+
def before_render
|
87
|
+
# make sure to evaluate the component's content block so slots are defined
|
88
|
+
content
|
89
|
+
|
90
|
+
@input_arguments = {
|
91
|
+
aria: {}
|
92
|
+
}
|
93
|
+
|
94
|
+
ids = [].tap do |memo|
|
95
|
+
memo << @validation_id if @validation_message
|
96
|
+
memo << @caption_id if @init_caption || caption?
|
97
|
+
end
|
98
|
+
|
99
|
+
return if ids.empty?
|
100
|
+
|
101
|
+
@input_arguments[:aria][:describedby] = ids.join(" ")
|
102
|
+
end
|
103
|
+
end
|
104
|
+
end
|
105
|
+
end
|
@@ -1 +1,80 @@
|
|
1
|
-
{
|
1
|
+
{
|
2
|
+
"name": "alpha/layout",
|
3
|
+
"selectors": [
|
4
|
+
".Layout",
|
5
|
+
".Layout .Layout-divider",
|
6
|
+
".Layout .Layout-main",
|
7
|
+
".Layout .Layout-sidebar",
|
8
|
+
".Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
|
9
|
+
".Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
|
10
|
+
".Layout.Layout--sidebarPosition-flowRow-start .Layout-main",
|
11
|
+
".Layout.Layout--sidebarPosition-flowRow-end .Layout-main",
|
12
|
+
".Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
|
13
|
+
".Layout.Layout--divided",
|
14
|
+
".Layout.Layout--divided .Layout-divider",
|
15
|
+
".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",
|
16
|
+
".Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",
|
17
|
+
".Layout.Layout--divided .Layout-main",
|
18
|
+
".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
|
19
|
+
".Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
|
20
|
+
".Layout.Layout--flowRow-until-md",
|
21
|
+
".Layout.Layout--flowRow-until-md .Layout-divider",
|
22
|
+
".Layout.Layout--flowRow-until-md .Layout-main",
|
23
|
+
".Layout.Layout--flowRow-until-md .Layout-sidebar",
|
24
|
+
".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
|
25
|
+
".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
|
26
|
+
".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main",
|
27
|
+
".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main",
|
28
|
+
".Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
|
29
|
+
".Layout.Layout--flowRow-until-md.Layout--divided",
|
30
|
+
".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider",
|
31
|
+
".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",
|
32
|
+
".Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",
|
33
|
+
".Layout.Layout--flowRow-until-md.Layout--divided .Layout-main",
|
34
|
+
".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
|
35
|
+
".Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
|
36
|
+
".Layout.Layout--flowRow-until-lg",
|
37
|
+
".Layout.Layout--flowRow-until-lg .Layout-divider",
|
38
|
+
".Layout.Layout--flowRow-until-lg .Layout-main",
|
39
|
+
".Layout.Layout--flowRow-until-lg .Layout-sidebar",
|
40
|
+
".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar",
|
41
|
+
".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
|
42
|
+
".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main",
|
43
|
+
".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main",
|
44
|
+
".Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar",
|
45
|
+
".Layout.Layout--flowRow-until-lg.Layout--divided",
|
46
|
+
".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider",
|
47
|
+
".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden",
|
48
|
+
".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow",
|
49
|
+
".Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main",
|
50
|
+
".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar",
|
51
|
+
".Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main",
|
52
|
+
".Layout.Layout--gutter-none",
|
53
|
+
".Layout.Layout--gutter-condensed",
|
54
|
+
".Layout.Layout--gutter-spacious",
|
55
|
+
".Layout.Layout--sidebar-narrow",
|
56
|
+
".Layout.Layout--sidebar-wide",
|
57
|
+
".Layout.Layout--sidebarPosition-start .Layout-sidebar",
|
58
|
+
".Layout.Layout--sidebarPosition-start .Layout-main",
|
59
|
+
".Layout.Layout--sidebarPosition-end",
|
60
|
+
".Layout.Layout--sidebarPosition-end .Layout-main",
|
61
|
+
".Layout.Layout--sidebarPosition-end .Layout-sidebar",
|
62
|
+
".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar",
|
63
|
+
".Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main",
|
64
|
+
".Layout-divider",
|
65
|
+
".Layout-sidebar",
|
66
|
+
".Layout-main",
|
67
|
+
".Layout-main .Layout-main-centered-lg",
|
68
|
+
".Layout-main .Layout-main-centered-md",
|
69
|
+
".Layout-main .Layout-main-centered-xl",
|
70
|
+
".Layout-main .Layout-main-centered-lg>.container-lg",
|
71
|
+
".Layout-main .Layout-main-centered-lg>.container-md",
|
72
|
+
".Layout-main .Layout-main-centered-lg>.container-xl",
|
73
|
+
".Layout-main .Layout-main-centered-md>.container-lg",
|
74
|
+
".Layout-main .Layout-main-centered-md>.container-md",
|
75
|
+
".Layout-main .Layout-main-centered-md>.container-xl",
|
76
|
+
".Layout-main .Layout-main-centered-xl>.container-lg",
|
77
|
+
".Layout-main .Layout-main-centered-xl>.container-md",
|
78
|
+
".Layout-main .Layout-main-centered-xl>.container-xl"
|
79
|
+
]
|
80
|
+
}
|
@@ -1 +1,28 @@
|
|
1
|
-
{
|
1
|
+
{
|
2
|
+
"name": "alpha/menu",
|
3
|
+
"selectors": [
|
4
|
+
".menu",
|
5
|
+
".menu-item",
|
6
|
+
".menu-item:first-child",
|
7
|
+
".menu-item:first-child:before",
|
8
|
+
".menu-item:last-child",
|
9
|
+
".menu-item:last-child:before",
|
10
|
+
".menu-item:hover",
|
11
|
+
".menu-item:active",
|
12
|
+
".menu-item.selected",
|
13
|
+
".menu-item[aria-current]:not([aria-current=false])",
|
14
|
+
".menu-item[aria-selected=true]",
|
15
|
+
".menu-item.selected:before",
|
16
|
+
".menu-item[aria-current]:not([aria-current=false]):before",
|
17
|
+
".menu-item[aria-selected=true]:before",
|
18
|
+
".menu-item .octicon",
|
19
|
+
".menu-item .Counter",
|
20
|
+
".menu-item .menu-warning",
|
21
|
+
".menu-item .avatar",
|
22
|
+
".menu-item.alert .Counter",
|
23
|
+
".menu-heading",
|
24
|
+
".menu-heading:hover",
|
25
|
+
".menu-heading:first-child",
|
26
|
+
".menu-heading:last-child"
|
27
|
+
]
|
28
|
+
}
|
@@ -0,0 +1,81 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Alpha
|
5
|
+
MultiInput = Primer::FormComponents.from_input(Primer::Forms::Dsl::MultiInput)
|
6
|
+
|
7
|
+
# Multi inputs are comprised of multiple constituent fields, only one of which is visible
|
8
|
+
# at a given time. They are designed for situations where constituent inputs are shown or
|
9
|
+
# hidden based on the value of another field. For example, consider an address form. If
|
10
|
+
# the user chooses the USA as the country, the region input should show a list of states
|
11
|
+
# and US territories; if the user instead chooses Canada, the region input should show a
|
12
|
+
# list of Canadian provinces, etc.
|
13
|
+
#
|
14
|
+
# Unlike everywhere else in Primer forms, constituent inputs are not directly passed a
|
15
|
+
# `name` attribute. Instead, developers pass a `name` attribute to the multi input itself.
|
16
|
+
# The multi input then automatically assigns each constituent input the same name. This is
|
17
|
+
# done so that the multi input looks like a single field from the server's point of view.
|
18
|
+
# Using the address form example from earlier, this means only one value - either a US state
|
19
|
+
# or a Canadian provice - will be submitted to the server under the `region` key.
|
20
|
+
#
|
21
|
+
# Actually, that's not quite true. Constituent inputs _are_ given a `name`, but it's added to
|
22
|
+
# the input as the `data-name` attribute as a way to identify constituent inputs, and will not
|
23
|
+
# be sent to the server.
|
24
|
+
#
|
25
|
+
# @form_usage
|
26
|
+
# class ExampleForm < ApplicationForm
|
27
|
+
# form do |example_form|
|
28
|
+
# example_form.multi(attributes) do |multi|
|
29
|
+
# # can define any number of child inputs, for example:
|
30
|
+
# multi.text_field(text_field_attributes)
|
31
|
+
# multi.select_list(select_list_attributes, hidden: true) do |list|
|
32
|
+
# list.option(option_attributes)
|
33
|
+
# list.option(option_attributes)
|
34
|
+
# end
|
35
|
+
# end
|
36
|
+
# end
|
37
|
+
# end
|
38
|
+
class MultiInput < Primer::Component
|
39
|
+
# @!parse include Primer::Forms::Dsl::InputMethods
|
40
|
+
|
41
|
+
status :alpha
|
42
|
+
|
43
|
+
# @!method initialize
|
44
|
+
#
|
45
|
+
# @example Default
|
46
|
+
# <%= render(Primer::Alpha::Select.new(name: :dietary_pref, label: "Dietary preference")) do |c| %>
|
47
|
+
# <% c.option(label: "Meatatarian", value: "meatatarian") %>
|
48
|
+
# <% c.option(label: "Vegetarian", value: "vegetarian") %>
|
49
|
+
# <% end %>
|
50
|
+
#
|
51
|
+
# <%= render(Primer::Alpha::MultiInput.new(name: :dish, label: "Select dish")) do |c| %>
|
52
|
+
# <% c.select_list(name: :meatatarian) do |list| %>
|
53
|
+
# <% list.option(label: "Steak", value: "steak") %>
|
54
|
+
# <% list.option(label: "Salmon", value: "salmon") %>
|
55
|
+
# <% end %>
|
56
|
+
# <% c.select_list(name: :vegetarian, hidden: true) do |list| %>
|
57
|
+
# <% list.option(label: "Portobello mushroom", value: "portobello") %>
|
58
|
+
# <% list.option(label: "Tofu curry", value: "tofu") %>
|
59
|
+
# <% end %>
|
60
|
+
# <% end %>
|
61
|
+
#
|
62
|
+
# <script type="text/javascript" data-eval="true">
|
63
|
+
# const dietaryPrefList = document.querySelector("[name=dietary_pref]");
|
64
|
+
# const dishMulti = document.querySelector("[data-name=dish]");
|
65
|
+
#
|
66
|
+
# dietaryPrefList.onchange = (evt) => {
|
67
|
+
# switch (evt.target.value) {
|
68
|
+
# case 'meatatarian':
|
69
|
+
# dishMulti.activateField('meatatarian');
|
70
|
+
# break;
|
71
|
+
# case 'vegetarian':
|
72
|
+
# dishMulti.activateField('vegetarian');
|
73
|
+
# break;
|
74
|
+
# }
|
75
|
+
# };
|
76
|
+
# </script>
|
77
|
+
#
|
78
|
+
# @macro form_input_arguments
|
79
|
+
end
|
80
|
+
end
|
81
|
+
end
|
@@ -0,0 +1,25 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Alpha
|
5
|
+
RadioButton = Primer::FormComponents.from_input(Primer::Forms::Dsl::RadioButtonInput)
|
6
|
+
|
7
|
+
# Radio buttons represent one of a set of options and are rendered as `<input type="radio">` in HTML.
|
8
|
+
# **NOTE**: You probably want to use the <%= link_to_component(Primer::Alpha::RadioButtonGroup) %>
|
9
|
+
# component instead, as it allows rendering a group of options.
|
10
|
+
#
|
11
|
+
# @form_usage
|
12
|
+
# class ExampleForm < ApplicationForm
|
13
|
+
# form do |example_form|
|
14
|
+
# example_form.radio_button(attributes)
|
15
|
+
# end
|
16
|
+
# end
|
17
|
+
class RadioButton < Primer::Component
|
18
|
+
status :alpha
|
19
|
+
|
20
|
+
# @!method initialize
|
21
|
+
#
|
22
|
+
# @!macro form_input_arguments
|
23
|
+
end
|
24
|
+
end
|
25
|
+
end
|
@@ -0,0 +1,36 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module Alpha
|
5
|
+
RadioButtonGroup = Primer::FormComponents.from_input(Primer::Forms::Dsl::RadioButtonGroupInput)
|
6
|
+
|
7
|
+
# A group of mutually exclusive radio buttons.
|
8
|
+
#
|
9
|
+
# @form_usage
|
10
|
+
# class ExampleForm < ApplicationForm
|
11
|
+
# form do |example_form|
|
12
|
+
# example_form.radio_button_group(attributes) do |group|
|
13
|
+
# group.radio_button(radio_button_attributes)
|
14
|
+
# end
|
15
|
+
# end
|
16
|
+
# end
|
17
|
+
class RadioButtonGroup < Primer::Component
|
18
|
+
status :alpha
|
19
|
+
|
20
|
+
# @!method initialize
|
21
|
+
#
|
22
|
+
# @param name [String] Value for the HTML name attribute.
|
23
|
+
# @param label [String] Label text displayed above the input.
|
24
|
+
# @param hidden [Boolean] When set to `true`, visually hides the group.
|
25
|
+
# @param caption [String] A string describing the field and what sorts of input it expects. Displayed below the group.
|
26
|
+
# @param label_arguments [Hash] Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag.
|
27
|
+
|
28
|
+
# @!method radio_button
|
29
|
+
#
|
30
|
+
# Adds a radio button to the group.
|
31
|
+
#
|
32
|
+
# @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::RadioButton) %>.
|
33
|
+
# @param block [Proc] The block accepted by <%= link_to_component(Primer::Alpha::RadioButton) %>.
|
34
|
+
end
|
35
|
+
end
|
36
|
+
end
|
@@ -7,6 +7,7 @@ module Primer
|
|
7
7
|
# It wraps the Button and IconButton components to provide the correct styles
|
8
8
|
class Item < Primer::BaseComponent
|
9
9
|
status :alpha
|
10
|
+
audited_at "2023-02-01"
|
10
11
|
|
11
12
|
# @param label [String] The label to use
|
12
13
|
# @param selected [Boolean] Whether the item is selected
|
@@ -1 +1 @@
|
|
1
|
-
.SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--primer-borderRadius-medium,6px);
|
1
|
+
.SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--primer-borderRadius-medium,6px);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);display:inline-flex;padding:var(--primer-control-xsmall-paddingInline-condensed,4px);position:relative}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--color-segmented-control-button-bg);border-color:var(--color-segmented-control-button-selected-border)}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before,.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:before{border-left:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--primer-control-medium-paddingBlock,6px);margin-top:var(--primer-control-medium-paddingBlock,6px);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--color-btn-text);font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--primer-borderRadius-medium, 6px) - 5px);outline-offset:calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px))}.SegmentedControl-item .Button--small{height:calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-medium-size,32px);min-width:var(--primer-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-medium-size,32px);min-width:var(--primer-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2);padding:0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-large-size,40px);min-width:var(--primer-control-large-size,40px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-btn-text)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
|
@@ -1 +1,31 @@
|
|
1
|
-
{
|
1
|
+
{
|
2
|
+
"name": "alpha/segmented_control",
|
3
|
+
"selectors": [
|
4
|
+
".SegmentedControl",
|
5
|
+
".SegmentedControl-item",
|
6
|
+
".SegmentedControl-item.SegmentedControl-item--selected",
|
7
|
+
".SegmentedControl-item.SegmentedControl-item--selected .Button",
|
8
|
+
".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",
|
9
|
+
".SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before",
|
10
|
+
".SegmentedControl-item.SegmentedControl-item--selected:before",
|
11
|
+
".SegmentedControl-item .Button-label[data-content]:before",
|
12
|
+
".SegmentedControl-item:before",
|
13
|
+
".SegmentedControl-item .Button",
|
14
|
+
".SegmentedControl-item .Button:focus-visible",
|
15
|
+
".SegmentedControl-item .Button--small",
|
16
|
+
".SegmentedControl-item .Button--small.Button--iconOnly",
|
17
|
+
".SegmentedControl-item .Button--small.Button--iconOnly:before",
|
18
|
+
".SegmentedControl-item .Button--medium",
|
19
|
+
".SegmentedControl-item .Button--medium.Button--iconOnly",
|
20
|
+
".SegmentedControl-item .Button--medium.Button--iconOnly:before",
|
21
|
+
".SegmentedControl-item .Button--large",
|
22
|
+
".SegmentedControl-item .Button--large.Button--iconOnly",
|
23
|
+
".SegmentedControl-item .Button--large.Button--iconOnly:before",
|
24
|
+
".SegmentedControl-item .Button--iconOnly",
|
25
|
+
".SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label",
|
26
|
+
".SegmentedControl--fullWidth",
|
27
|
+
".SegmentedControl--fullWidth .SegmentedControl-item",
|
28
|
+
".SegmentedControl--fullWidth .Button--iconOnly",
|
29
|
+
".SegmentedControl--fullWidth .Button-withTooltip"
|
30
|
+
]
|
31
|
+
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,mDAAqD,
|
1
|
+
{"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,mDAAqD,CAHrD,mBAAoB,CACpB,eAGF,CAEA,uBAGE,mEAA6E,CAC7E,mDAAqD,CAFrD,mBAAoB,CAGpB,gEAAkE,CAJlE,iBA0IF,CAnIE,uDACE,yDAA0D,CAC1D,kEAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAOF,mJACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAGA,8BAME,8FAAkG,CADlG,UAAW,CAHX,gBAAiB,CAEjB,2DAA6D,CAD7D,wDAA0D,CAF1D,iBAMF,CAGA,+BACE,QAAS,CAGT,2BAA4B,CAF5B,8CAAgD,CAChD,eASF,CANE,6CAIE,gEAAiE,CAHjE,oHAIF,CAGF,sCACE,yJAGC,CACD,oIAgBF,CAVE,uDACE,yJAQF,CAFI,8DC1FR,WAAA,YAAA,SAAA,kDAAA,iDAAA,kBAAA,QAAA,4CAAA,UD0F8G,CAK5G,uCACE,0JAGC,CACD,mIAgBF,CAVE,wDACE,yJAQF,CAFI,+DCjHR,WAAA,YAAA,SAAA,kDAAA,iDAAA,kBAAA,QAAA,4CAAA,UDiH8G,CAK5G,sCACE,yJAGC,CACD,oIAgBF,CAVE,uDACE,wJAQF,CAFI,8DCxIR,WAAA,YAAA,SAAA,iDAAA,gDAAA,kBAAA,QAAA,4CAAA,UDwI4G,CAK1G,yCACE,eACF,CAEA,oFACE,2BACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n display: inline-flex;\n list-style: none;\n background-color: var(--color-segmented-control-bg);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n border: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n padding: var(--primer-control-xsmall-paddingInline-condensed, 4px);\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--color-segmented-control-button-bg);\n border-color: var(--color-segmented-control-button-selected-border);\n\n & .Button {\n font-weight: var(--base-text-weight-semibold, 600);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--primer-control-medium-paddingBlock, 6px);\n margin-bottom: var(--primer-control-medium-paddingBlock, 6px);\n content: '';\n border-left: var(--primer-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-border-default);\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n border: 0;\n font-weight: var(--base-text-weight-normal, 400);\n transition: none;\n color: var(--color-btn-text);\n\n &:focus-visible {\n outline-offset: calc(\n var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px)\n );\n border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);\n }\n }\n\n & .Button--small {\n height: calc(\n var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n padding: 0\n calc(\n var(--primer-control-small-paddingInline-condensed, 8px) -\n var(--primer-control-xsmall-paddingInline-condensed, 4px)\n );\n\n &.Button--iconOnly {\n width: calc(\n var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);\n }\n }\n }\n\n & .Button--medium {\n height: calc(\n var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n padding: 0\n calc(\n var(--primer-control-medium-paddingInline-normal, 12px) -\n var(--primer-control-xsmall-paddingInline-condensed, 4px)\n );\n\n &.Button--iconOnly {\n width: calc(\n var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);\n }\n }\n }\n\n & .Button--large {\n height: calc(\n var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n padding: 0\n calc(\n var(--primer-control-large-paddingInline-spacious, 16px) -\n var(--primer-control-xsmall-paddingInline-condensed, 4px)\n );\n\n &.Button--iconOnly {\n width: calc(\n var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -\n var(--primer-borderWidth-thin, 1px) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--primer-control-large-size, 40px), var(--primer-control-large-size, 40px);\n }\n }\n }\n\n & .Button--iconOnly {\n padding: initial;\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--color-btn-text);\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n\n /* is .Button-withTooltip used anywhere? can't find use of it */\n & .Button--iconOnly,\n & .Button-withTooltip {\n width: 100%;\n }\n}\n",null]}
|
@@ -5,7 +5,6 @@
|
|
5
5
|
list-style: none;
|
6
6
|
background-color: var(--color-segmented-control-bg);
|
7
7
|
border-radius: var(--primer-borderRadius-medium, 6px);
|
8
|
-
box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);
|
9
8
|
}
|
10
9
|
|
11
10
|
.SegmentedControl-item {
|
@@ -17,7 +16,7 @@
|
|
17
16
|
|
18
17
|
/* Selected ---------------------------------------- */
|
19
18
|
&.SegmentedControl-item--selected {
|
20
|
-
background-color: var(--color-
|
19
|
+
background-color: var(--color-segmented-control-button-bg);
|
21
20
|
border-color: var(--color-segmented-control-button-selected-border);
|
22
21
|
|
23
22
|
& .Button {
|
@@ -64,17 +63,29 @@
|
|
64
63
|
color: var(--color-btn-text);
|
65
64
|
|
66
65
|
&:focus-visible {
|
67
|
-
outline-offset: calc(
|
66
|
+
outline-offset: calc(
|
67
|
+
var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px)
|
68
|
+
);
|
68
69
|
border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);
|
69
70
|
}
|
70
71
|
}
|
71
72
|
|
72
73
|
& .Button--small {
|
73
|
-
height: calc(
|
74
|
-
|
74
|
+
height: calc(
|
75
|
+
var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
|
76
|
+
var(--primer-borderWidth-thin, 1px) * 2
|
77
|
+
);
|
78
|
+
padding: 0
|
79
|
+
calc(
|
80
|
+
var(--primer-control-small-paddingInline-condensed, 8px) -
|
81
|
+
var(--primer-control-xsmall-paddingInline-condensed, 4px)
|
82
|
+
);
|
75
83
|
|
76
84
|
&.Button--iconOnly {
|
77
|
-
width: calc(
|
85
|
+
width: calc(
|
86
|
+
var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
|
87
|
+
var(--primer-borderWidth-thin, 1px) * 2
|
88
|
+
);
|
78
89
|
|
79
90
|
&::before {
|
80
91
|
@mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
|
@@ -83,11 +94,21 @@
|
|
83
94
|
}
|
84
95
|
|
85
96
|
& .Button--medium {
|
86
|
-
height: calc(
|
87
|
-
|
97
|
+
height: calc(
|
98
|
+
var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
|
99
|
+
var(--primer-borderWidth-thin, 1px) * 2
|
100
|
+
);
|
101
|
+
padding: 0
|
102
|
+
calc(
|
103
|
+
var(--primer-control-medium-paddingInline-normal, 12px) -
|
104
|
+
var(--primer-control-xsmall-paddingInline-condensed, 4px)
|
105
|
+
);
|
88
106
|
|
89
107
|
&.Button--iconOnly {
|
90
|
-
width: calc(
|
108
|
+
width: calc(
|
109
|
+
var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
|
110
|
+
var(--primer-borderWidth-thin, 1px) * 2
|
111
|
+
);
|
91
112
|
|
92
113
|
&::before {
|
93
114
|
@mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
|
@@ -96,11 +117,21 @@
|
|
96
117
|
}
|
97
118
|
|
98
119
|
& .Button--large {
|
99
|
-
height: calc(
|
100
|
-
|
120
|
+
height: calc(
|
121
|
+
var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
|
122
|
+
var(--primer-borderWidth-thin, 1px) * 2
|
123
|
+
);
|
124
|
+
padding: 0
|
125
|
+
calc(
|
126
|
+
var(--primer-control-large-paddingInline-spacious, 16px) -
|
127
|
+
var(--primer-control-xsmall-paddingInline-condensed, 4px)
|
128
|
+
);
|
101
129
|
|
102
130
|
&.Button--iconOnly {
|
103
|
-
width: calc(
|
131
|
+
width: calc(
|
132
|
+
var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
|
133
|
+
var(--primer-borderWidth-thin, 1px) * 2
|
134
|
+
);
|
104
135
|
|
105
136
|
&::before {
|
106
137
|
@mixin minTouchTarget var(--primer-control-large-size, 40px), var(--primer-control-large-size, 40px);
|
@@ -3,8 +3,12 @@
|
|
3
3
|
module Primer
|
4
4
|
module Alpha
|
5
5
|
# Use a segmented control to let users select an option from a short list and immediately apply the selection
|
6
|
+
# @accessibility
|
7
|
+
# A `SegmentedControl` should not be used in a form as a replacement for something like a radio group or select.
|
8
|
+
# See the [Accessibility section](https://primer.style/design/components/segmented-control#accessibility) of the SegmentedControl interface guidelines for more details.
|
6
9
|
class SegmentedControl < Primer::Component
|
7
10
|
status :alpha
|
11
|
+
audited_at "2023-02-01"
|
8
12
|
|
9
13
|
FULL_WIDTH_DEFAULT = false
|
10
14
|
HIDE_LABELS_DEFAULT = false
|
@@ -24,6 +28,30 @@ module Primer
|
|
24
28
|
)
|
25
29
|
}
|
26
30
|
|
31
|
+
# @example With a label above and caption below
|
32
|
+
# <%= render(Primer::Box.new(display: :flex, direction: :column)) do %>
|
33
|
+
# <%= render(Primer::BaseComponent.new(tag: "span", id: "scLabel-horiz")) { "File view" } %>
|
34
|
+
# <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-horiz", "aria-describedby": "scCaption-horiz")) do |component| %>
|
35
|
+
# <% component.with_item(label: "Preview", selected: true) %>
|
36
|
+
# <% component.with_item(label: "Raw") %>
|
37
|
+
# <% component.with_item(label: "Blame") %>
|
38
|
+
# <% end %>
|
39
|
+
# <%= render(Primer::Beta::Text.new(font_size: :small, mt: 1, color: :muted, id: "scCaption-horiz")) { "Change the way the file is viewed" } %>
|
40
|
+
# <% end %>
|
41
|
+
#
|
42
|
+
# @example With a label and caption on the left
|
43
|
+
# <%= render(Primer::Beta::Subhead.new) do |component| %>
|
44
|
+
# <% component.with_heading(id: "scLabel-vert") { "File view" } %>
|
45
|
+
# <% component.with_description(id: "scCaption-vert") { "Change the way the file is viewed" } %>
|
46
|
+
# <% component.with_actions do %>
|
47
|
+
# <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-vert", "aria-describedby": "scCaption-vert")) do |component| %>
|
48
|
+
# <% component.with_item(label: "Preview", selected: true) %>
|
49
|
+
# <% component.with_item(label: "Raw") %>
|
50
|
+
# <% component.with_item(label: "Blame") %>
|
51
|
+
# <% end %>
|
52
|
+
# <% end %>
|
53
|
+
# <% end %>
|
54
|
+
#
|
27
55
|
# @example Basic usage
|
28
56
|
#
|
29
57
|
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
|
@@ -79,6 +107,8 @@ module Primer
|
|
79
107
|
"SegmentedControl--iconOnly": hide_labels,
|
80
108
|
"SegmentedControl--fullWidth": full_width
|
81
109
|
)
|
110
|
+
|
111
|
+
validate_aria_label
|
82
112
|
end
|
83
113
|
|
84
114
|
def render?
|