Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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
<div class="FormControl-spacingWrapper">
<toggle-switch-input class="FormControl-toggleSwitchInput">
<span style="flex-grow: 1">
<span for="success-toggle" id="label-f0c131a8-3d60-44b2-8d0a-87f2a79e6613" data-view-component="true" class="FormControl-label">
Good example
</span>
<div data-target="toggle-switch-input.validationElement" class="FormControl-inlineValidation" id="validation-f0c131a8-3d60-44b2-8d0a-87f2a79e6613" hidden="hidden" role="alert">
<span data-target="toggle-switch-input.validationMessageElement"></span>
</div>
<div> <span class="FormControl-caption" id="caption-f0c131a8-3d60-44b2-8d0a-87f2a79e6613">
My <em>favorite</em> caption.
</span>
</div>
</span>
<toggle-switch id="success-toggle" src="/view-components/rails-app/toggle_switch" data-csrf="4zO2v2GqoszMkEeU5axON1e3OPbGSWdCGOkAmJf5twfwPrgVdjOlSCeyUaXekmH-7MBhwKfO2MVj7bhuZMEkng" data-view-component="true" class="ToggleSwitch">
<span class="ToggleSwitch-statusIcon">
<svg hidden="hidden" data-target="toggle-switch.errorIcon" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert-fill color-fg-danger">
<path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"></path>
</svg>
<svg hidden="hidden" data-target="toggle-switch.loadingSpinner" style="box-sizing: content-box; color: var(--color-icon-primary);" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="anim-rotate">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg> <span class="sr-only">Loading</span>
</span>
<span aria-hidden="true" data-view-component="true" class="ToggleSwitch-status">
<div data-view-component="true" class="ToggleSwitch-statusOn">On</div>
<div data-view-component="true" class="ToggleSwitch-statusOff">Off</div>
</span>
<button data-target="toggle-switch.switch" data-action="click:toggle-switch#toggle" aria-describedby="validation-f0c131a8-3d60-44b2-8d0a-87f2a79e6613 caption-f0c131a8-3d60-44b2-8d0a-87f2a79e6613" aria-labelledby="label-f0c131a8-3d60-44b2-8d0a-87f2a79e6613" aria-pressed="false" data-view-component="true" class="ToggleSwitch-track">
<div aria-hidden="true" data-view-component="true" class="ToggleSwitch-icons">
<div data-view-component="true" class="ToggleSwitch-lineIcon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true">
<path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" />
</svg></div>
<div data-view-component="true" class="ToggleSwitch-circleIcon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true">
<path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
</svg></div>
</div>
<div data-view-component="true" class="ToggleSwitch-knob"></div>
</button></toggle-switch>
</toggle-switch-input>
</div>
<hr>
<div class="FormControl-spacingWrapper">
<toggle-switch-input class="FormControl-toggleSwitchInput">
<span style="flex-grow: 1">
<span for="error-toggle" id="label-f699705e-3a06-45a0-9635-58e14c8a4b53" data-view-component="true" class="FormControl-label">
Bad example
</span>
<div data-target="toggle-switch-input.validationElement" class="FormControl-inlineValidation" id="validation-f699705e-3a06-45a0-9635-58e14c8a4b53" hidden="hidden" role="alert">
<span data-target="toggle-switch-input.validationMessageElement"></span>
</div>
<div> <span class="FormControl-caption" id="caption-f699705e-3a06-45a0-9635-58e14c8a4b53">
My <em>favorite</em> caption.
</span>
</div>
</span>
<toggle-switch id="error-toggle" src="/view-components/rails-app/toggle_switch?fail=true" data-csrf="J5He8uddyBVvPVSFU9ZuanR9M0_sLxjLlyoRnQVttGs0nNBY8MTPkYQfQrRo6EGjzwpqeY2op0zsLqlr9lUn8g" data-view-component="true" class="ToggleSwitch">
<span class="ToggleSwitch-statusIcon">
<svg hidden="hidden" data-target="toggle-switch.errorIcon" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert-fill color-fg-danger">
<path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575ZM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5Zm1 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"></path>
</svg>
<svg hidden="hidden" data-target="toggle-switch.loadingSpinner" style="box-sizing: content-box; color: var(--color-icon-primary);" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="anim-rotate">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg> <span class="sr-only">Loading</span>
</span>
<span aria-hidden="true" data-view-component="true" class="ToggleSwitch-status">
<div data-view-component="true" class="ToggleSwitch-statusOn">On</div>
<div data-view-component="true" class="ToggleSwitch-statusOff">Off</div>
</span>
<button data-target="toggle-switch.switch" data-action="click:toggle-switch#toggle" aria-describedby="validation-f699705e-3a06-45a0-9635-58e14c8a4b53 caption-f699705e-3a06-45a0-9635-58e14c8a4b53" aria-labelledby="label-f699705e-3a06-45a0-9635-58e14c8a4b53" aria-pressed="false" data-view-component="true" class="ToggleSwitch-track">
<div aria-hidden="true" data-view-component="true" class="ToggleSwitch-icons">
<div data-view-component="true" class="ToggleSwitch-lineIcon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true">
<path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" />
</svg></div>
<div data-view-component="true" class="ToggleSwitch-circleIcon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-view-component="true">
<path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
</svg></div>
</div>
<div data-view-component="true" class="ToggleSwitch-knob"></div>
</button></toggle-switch>
</toggle-switch-input>
</div>
1
2
3
<%= render(ExampleToggleSwitchForm.new(label: "Good example", src: toggle_switch_index_path, id: "success-toggle")) %>
<hr>
<%= render(ExampleToggleSwitchForm.new(label: "Bad example", src: toggle_switch_index_path(fail: true), id: "error-toggle")) %>

app/forms/example_toggle_switch_form.rb

1
2
3
4
5
6
7
8
# frozen_string_literal: true
# :nodoc:
class ExampleToggleSwitchForm < Primer::Forms::ToggleSwitchForm
def initialize(**system_arguments)
super(name: :example_field, label: "Example", **system_arguments)
end
end

app/forms/example_toggle_switch_form/example_field_caption.html.erb

1
My <em>favorite</em> caption.