primer_view_components 0.0.117 → 0.0.119
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +28 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/item.rb +3 -3
- data/app/components/primer/alpha/action_list.rb +1 -1
- data/app/components/primer/alpha/dialog.rb +6 -5
- data/app/components/primer/alpha/modal_dialog.js +24 -12
- data/app/components/primer/alpha/modal_dialog.ts +29 -15
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.json +1 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +6 -0
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.json +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.html.erb +4 -2
- data/app/components/primer/alpha/toggle_switch.js +23 -11
- data/app/components/primer/alpha/toggle_switch.pcss +6 -0
- data/app/components/primer/alpha/toggle_switch.ts +27 -11
- data/app/components/primer/alpha/tool_tip.js +0 -3
- data/app/components/primer/alpha/tool_tip.ts +0 -4
- data/app/components/primer/alpha/tooltip.rb +4 -3
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +1 -1
- data/app/components/primer/beta/icon_button.rb +1 -1
- data/app/components/primer/beta/relative_time.rb +6 -0
- data/app/components/primer/component.rb +4 -0
- data/app/components/primer/icon_button.rb +1 -1
- data/app/components/primer/primer.d.ts +1 -0
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/app/forms/example_toggle_switch_form.rb +1 -1
- data/lib/primer/forms/dsl/input.rb +1 -1
- data/lib/primer/forms/toggle_switch.html.erb +7 -2
- data/lib/primer/forms/toggle_switch.rb +2 -4
- data/lib/primer/forms/toggle_switch_input.d.ts +5 -0
- data/lib/primer/forms/toggle_switch_input.js +29 -0
- data/lib/primer/forms/toggle_switch_input.ts +19 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/tasks/docs.rake +1 -1
- data/previews/primer/alpha/dialog_preview/with_text_input.html.erb +10 -0
- data/previews/primer/alpha/dialog_preview.rb +15 -0
- data/previews/primer/alpha/tooltip_preview.rb +8 -8
- data/previews/primer/beta/clipboard_copy_preview.rb +1 -1
- data/previews/primer/beta/relative_time_preview.rb +15 -0
- data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +3 -1
- data/static/arguments.json +78 -72
- data/static/constants.json +11 -2
- metadata +8 -18
|
@@ -81,9 +81,13 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
|
|
|
81
81
|
this.loadingSpinner.removeAttribute('hidden');
|
|
82
82
|
}
|
|
83
83
|
setSuccessState() {
|
|
84
|
+
const event = new CustomEvent('toggleSwitchSuccess', { bubbles: true });
|
|
85
|
+
this.dispatchEvent(event);
|
|
84
86
|
this.setFinishedState(false);
|
|
85
87
|
}
|
|
86
|
-
setErrorState() {
|
|
88
|
+
setErrorState(message) {
|
|
89
|
+
const event = new CustomEvent('toggleSwitchError', { bubbles: true, detail: message });
|
|
90
|
+
this.dispatchEvent(event);
|
|
87
91
|
this.setFinishedState(true);
|
|
88
92
|
}
|
|
89
93
|
setFinishedState(error) {
|
|
@@ -102,24 +106,32 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
|
|
|
102
106
|
try {
|
|
103
107
|
if (!this.src)
|
|
104
108
|
throw new Error('invalid src');
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
109
|
+
let response;
|
|
110
|
+
try {
|
|
111
|
+
response = await fetch(this.src, {
|
|
112
|
+
credentials: 'same-origin',
|
|
113
|
+
method: 'POST',
|
|
114
|
+
headers: {
|
|
115
|
+
'Requested-With': 'XMLHttpRequest'
|
|
116
|
+
},
|
|
117
|
+
body
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
catch (error) {
|
|
121
|
+
throw new Error('A network error occurred, please try again.');
|
|
122
|
+
}
|
|
113
123
|
if (response.ok) {
|
|
114
124
|
this.setSuccessState();
|
|
115
125
|
this.performToggle();
|
|
116
126
|
}
|
|
117
127
|
else {
|
|
118
|
-
|
|
128
|
+
throw new Error(await response.text());
|
|
119
129
|
}
|
|
120
130
|
}
|
|
121
131
|
catch (error) {
|
|
122
|
-
|
|
132
|
+
if (error instanceof Error) {
|
|
133
|
+
this.setErrorState(error.message || 'An error occurred, please try again.');
|
|
134
|
+
}
|
|
123
135
|
}
|
|
124
136
|
}
|
|
125
137
|
};
|
|
@@ -208,6 +208,12 @@
|
|
|
208
208
|
text-align: right;
|
|
209
209
|
}
|
|
210
210
|
|
|
211
|
+
.ToggleSwitch-statusIcon {
|
|
212
|
+
width: var(--base-size-16, 16px);
|
|
213
|
+
display: flex;
|
|
214
|
+
margin-top: 0.063rem;
|
|
215
|
+
}
|
|
216
|
+
|
|
211
217
|
.ToggleSwitch--small {
|
|
212
218
|
& .ToggleSwitch-status {
|
|
213
219
|
font-size: var(--primer-text-body-size-small, 12px);
|
|
@@ -97,10 +97,16 @@ class ToggleSwitchElement extends HTMLElement {
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
private setSuccessState(): void {
|
|
100
|
+
const event = new CustomEvent('toggleSwitchSuccess', {bubbles: true})
|
|
101
|
+
this.dispatchEvent(event)
|
|
102
|
+
|
|
100
103
|
this.setFinishedState(false)
|
|
101
104
|
}
|
|
102
105
|
|
|
103
|
-
private setErrorState(): void {
|
|
106
|
+
private setErrorState(message: string): void {
|
|
107
|
+
const event = new CustomEvent('toggleSwitchError', {bubbles: true, detail: message})
|
|
108
|
+
this.dispatchEvent(event)
|
|
109
|
+
|
|
104
110
|
this.setFinishedState(true)
|
|
105
111
|
}
|
|
106
112
|
|
|
@@ -125,22 +131,32 @@ class ToggleSwitchElement extends HTMLElement {
|
|
|
125
131
|
|
|
126
132
|
try {
|
|
127
133
|
if (!this.src) throw new Error('invalid src')
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
134
|
+
|
|
135
|
+
let response
|
|
136
|
+
|
|
137
|
+
try {
|
|
138
|
+
response = await fetch(this.src, {
|
|
139
|
+
credentials: 'same-origin',
|
|
140
|
+
method: 'POST',
|
|
141
|
+
headers: {
|
|
142
|
+
'Requested-With': 'XMLHttpRequest'
|
|
143
|
+
},
|
|
144
|
+
body
|
|
145
|
+
})
|
|
146
|
+
} catch (error) {
|
|
147
|
+
throw new Error('A network error occurred, please try again.')
|
|
148
|
+
}
|
|
149
|
+
|
|
136
150
|
if (response.ok) {
|
|
137
151
|
this.setSuccessState()
|
|
138
152
|
this.performToggle()
|
|
139
153
|
} else {
|
|
140
|
-
|
|
154
|
+
throw new Error(await response.text())
|
|
141
155
|
}
|
|
142
156
|
} catch (error) {
|
|
143
|
-
|
|
157
|
+
if (error instanceof Error) {
|
|
158
|
+
this.setErrorState(error.message || 'An error occurred, please try again.')
|
|
159
|
+
}
|
|
144
160
|
}
|
|
145
161
|
}
|
|
146
162
|
}
|
|
@@ -197,9 +197,6 @@ class ToolTipElement extends HTMLElement {
|
|
|
197
197
|
}
|
|
198
198
|
this.hiddenFromView = true;
|
|
199
199
|
__classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
|
|
200
|
-
if (!this.id) {
|
|
201
|
-
this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`;
|
|
202
|
-
}
|
|
203
200
|
if (!this.control)
|
|
204
201
|
return;
|
|
205
202
|
this.setAttribute('role', 'tooltip');
|
|
@@ -197,10 +197,6 @@ class ToolTipElement extends HTMLElement {
|
|
|
197
197
|
this.hiddenFromView = true
|
|
198
198
|
this.#allowUpdatePosition = true
|
|
199
199
|
|
|
200
|
-
if (!this.id) {
|
|
201
|
-
this.id = `tooltip-${Date.now()}-${(Math.random() * 10000).toFixed(0)}`
|
|
202
|
-
}
|
|
203
|
-
|
|
204
200
|
if (!this.control) return
|
|
205
201
|
|
|
206
202
|
this.setAttribute('role', 'tooltip')
|
|
@@ -107,10 +107,11 @@ module Primer
|
|
|
107
107
|
|
|
108
108
|
@text = text
|
|
109
109
|
@system_arguments = system_arguments
|
|
110
|
+
@system_arguments[:id] ||= self.class.generate_id
|
|
110
111
|
@system_arguments[:tag] = :"tool-tip"
|
|
111
112
|
@system_arguments[:for] = for_id
|
|
112
|
-
system_arguments[:classes] = class_names(
|
|
113
|
-
system_arguments[:classes],
|
|
113
|
+
@system_arguments[:classes] = class_names(
|
|
114
|
+
@system_arguments[:classes],
|
|
114
115
|
"sr-only"
|
|
115
116
|
)
|
|
116
117
|
@system_arguments[:position] = :absolute
|
|
@@ -121,6 +122,6 @@ module Primer
|
|
|
121
122
|
def call
|
|
122
123
|
render(Primer::BaseComponent.new(**@system_arguments)) { @text }
|
|
123
124
|
end
|
|
124
|
-
end
|
|
125
125
|
end
|
|
126
126
|
end
|
|
127
|
+
end
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:
|
|
1
|
+
:root{--primer-duration-fast:80ms;--primer-easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--primer-borderWidth-thin,1px) solid;border-color:#0000;border-radius:var(--primer-borderRadius-medium,6px);color:var(--color-btn-text);cursor:pointer;display:flex;flex-direction:row;font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-medium,500);gap:var(--primer-control-medium-gap,8px);height:var(--primer-control-medium-size,32px);justify-content:space-between;min-width:max-content;padding:0 var(--primer-control-medium-paddingInline-normal,12px);position:relative;text-align:center;transition:var(--primer-duration-fast) var(--primer-easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--primer-duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button,summary.Button{display:inline-flex}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--primer-control-medium-gap,8px)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--color-btn-counter-bg);color:inherit}.Button-label{grid-area:text;line-height:var(--primer-text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 4px)*-1)}.Button--small{font-size:var(--primer-text-body-size-small,12px);gap:var(--primer-control-small-gap,4px);height:var(--primer-control-small-size,28px);padding:0 var(--primer-control-small-paddingInline-condensed,8px)}.Button--small .Button-label{line-height:var(--primer-text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--primer-control-small-gap,4px)}.Button--large{gap:var(--primer-control-large-gap,8px);height:var(--primer-control-large-size,40px);padding:0 var(--primer-control-large-paddingInline-spacious,16px)}.Button--large .Button-label{line-height:var(--primer-text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--primer-control-large-gap,8px)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--color-btn-primary-icon);background-color:var(--color-btn-primary-bg);border-color:var(--color-btn-primary-border);box-shadow:var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);color:var(--color-btn-primary-text)}.Button--primary:hover:not(:disabled){background-color:var(--color-btn-primary-hover-bg);border-color:var(--color-btn-primary-hover-border)}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--color-fg-on-emphasis);outline:2px solid var(--color-accent-fg);outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--color-btn-primary-selected-bg);box-shadow:var(--color-btn-primary-selected-shadow)}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--color-btn-primary-disabled-text);background-color:var(--color-btn-primary-disabled-bg);border-color:var(--color-btn-primary-disabled-border);color:var(--color-btn-primary-disabled-text)}.Button--secondary{fill:var(--color-fg-muted);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-text)}.Button--secondary:hover:not(:disabled){background-color:var(--color-btn-hover-bg);border-color:var(--color-btn-hover-border)}.Button--secondary:active:not(:disabled){background-color:var(--color-btn-active-bg);border-color:var(--color-btn-active-border)}.Button--secondary[aria-pressed=true]{background-color:var(--color-btn-selected-bg);box-shadow:var(--color-primer-shadow-inset)}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible{color:var(--color-btn-text)}.Button--invisible:hover:not(:disabled){background-color:var(--color-action-list-item-default-hover-bg)}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--color-action-list-item-default-active-bg)}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);color:var(--color-primer-fg-disabled)}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-accent-fg)}.Button--invisible .Button-visual{color:var(--color-fg-muted)}.Button--link{fill:var(--color-accent-fg);border:none;color:var(--color-accent-fg);display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--color-primer-fg-disabled);background-color:initial;border-color:#0000;color:var(--color-primer-fg-disabled)}.Button--danger{fill:var(--color-btn-danger-icon);background-color:var(--color-btn-bg);border-color:var(--color-btn-border);box-shadow:var(--color-btn-shadow),var(--color-btn-inset-shadow);color:var(--color-btn-danger-text)}.Button--danger:hover:not(:disabled){fill:var(--color-btn-danger-hover-text);background-color:var(--color-btn-danger-hover-bg);border-color:var(--color-btn-danger-hover-border);box-shadow:var(--color-btn-danger-hover-shadow),var(--color-btn-danger-hover-inset-shadow);color:var(--color-btn-danger-hover-text)}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--color-btn-danger-selected-text);background-color:var(--color-btn-danger-selected-bg);border-color:var(--color-btn-danger-selected-border);box-shadow:var(--color-btn-danger-selected-shadow);color:var(--color-btn-danger-selected-text)}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--color-btn-danger-disabled-text);background-color:var(--color-btn-danger-disabled-bg);border-color:var(--color-btn-border);color:var(--color-btn-danger-disabled-text)}.Button--iconOnly{display:grid;padding:unset;place-content:center;width:var(--primer-control-medium-size,32px)}.Button--iconOnly.Button--small{width:var(--primer-control-small-size,28px)}.Button--iconOnly.Button--large{width:var(--primer-control-large-size,40px)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: course) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-counter-bg);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --primer-duration-fast: 80ms;\n --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--primer-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--primer-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--primer-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--primer-control-medium-size, 32px);\n padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--primer-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--primer-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--primer-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-counter-bg);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--primer-text-body-size-small, 12px);\n height: var(--primer-control-small-size, 28px);\n padding: 0 var(--primer-control-small-paddingInline-condensed, 8px);\n gap: var(--primer-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--primer-control-large-size, 40px);\n padding: 0 var(--primer-control-large-paddingInline-spacious, 16px);\n gap: var(--primer-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--primer-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--primer-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-primer-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-primer-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-primer-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-primer-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--primer-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--primer-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--primer-control-large-size, 40px);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}\n"]}
|
|
@@ -63,7 +63,7 @@ module Primer
|
|
|
63
63
|
@wrapper_arguments = wrapper_arguments
|
|
64
64
|
@show_tooltip = show_tooltip
|
|
65
65
|
@system_arguments = system_arguments
|
|
66
|
-
@system_arguments[:id] ||=
|
|
66
|
+
@system_arguments[:id] ||= self.class.generate_id
|
|
67
67
|
|
|
68
68
|
@system_arguments[:classes] = class_names(
|
|
69
69
|
"Button",
|
|
@@ -12,6 +12,9 @@ module Primer
|
|
|
12
12
|
FORMAT_DEFAULT = :auto
|
|
13
13
|
FORMAT_OPTIONS = [FORMAT_DEFAULT, :micro, :elapsed].freeze
|
|
14
14
|
|
|
15
|
+
FORMAT_STYLE_DEFAULT = nil
|
|
16
|
+
FORMAT_STYLE_OPTIONS = [FORMAT_STYLE_DEFAULT, :long, :short, :narrow].freeze
|
|
17
|
+
|
|
15
18
|
SECOND_DEFAULT = nil
|
|
16
19
|
SECOND_MAPPINGS = {
|
|
17
20
|
SECOND_DEFAULT => nil,
|
|
@@ -104,6 +107,7 @@ module Primer
|
|
|
104
107
|
# @param threshold [string] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
|
|
105
108
|
# @param precision [Symbol] The precision elapsed time should display. <%= one_of(Primer::Beta::RelativeTime::PRECISION_OPTIONS) %>
|
|
106
109
|
# @param format [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_OPTIONS) %>
|
|
110
|
+
# @param format_style [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %>
|
|
107
111
|
# @param lang [string] The language to use.
|
|
108
112
|
# @param title [string] Provide a custom title to the element.
|
|
109
113
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
@@ -122,6 +126,7 @@ module Primer
|
|
|
122
126
|
threshold: nil,
|
|
123
127
|
precision: PRECISION_DEFAULT,
|
|
124
128
|
format: nil,
|
|
129
|
+
format_style: nil,
|
|
125
130
|
lang: nil,
|
|
126
131
|
title: nil,
|
|
127
132
|
**system_arguments
|
|
@@ -143,6 +148,7 @@ module Primer
|
|
|
143
148
|
@system_arguments[:title] = title if title.present?
|
|
144
149
|
@system_arguments[:lang] = lang if lang.present?
|
|
145
150
|
@system_arguments[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present?
|
|
151
|
+
@system_arguments[:"format-style"] = format_style if format_style.present?
|
|
146
152
|
if datetime.present? && datetime.respond_to?(:iso8601)
|
|
147
153
|
@datetime = datetime
|
|
148
154
|
@system_arguments[:datetime] = datetime.iso8601
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
# :nodoc:
|
|
4
4
|
class ExampleToggleSwitchForm < Primer::Forms::ToggleSwitchForm
|
|
5
5
|
def initialize(**system_arguments)
|
|
6
|
-
super(name: :example_field, label: "Example", **system_arguments)
|
|
6
|
+
super(name: :example_field, label: "Example", caption: "This is an example toggle switch.", **system_arguments)
|
|
7
7
|
end
|
|
8
8
|
end
|
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
<%= content_tag(
|
|
1
|
+
<%= content_tag("toggle-switch-input", **@input.input_arguments) do %>
|
|
2
2
|
<span style="flex-grow: 1">
|
|
3
3
|
<%= builder.label(@input.name, **@input.label_arguments) do %>
|
|
4
4
|
<%= @input.label %>
|
|
5
5
|
<% end %>
|
|
6
|
-
|
|
6
|
+
|
|
7
|
+
<%= content_tag(:div, data: { target: "toggle-switch-input.validationElement" }, **@input.validation_arguments) do %>
|
|
8
|
+
<%= content_tag(:span, @input.validation_messages.first, data: { target: "toggle-switch-input.validationMessageElement" }, **@input.validation_message_arguments) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
<div><%= render(Caption.new(input: @input)) %></div>
|
|
7
12
|
</span>
|
|
8
13
|
<%
|
|
9
14
|
csrf = @input.csrf || @view_context.form_authenticity_token(
|
|
@@ -9,10 +9,8 @@ module Primer
|
|
|
9
9
|
def initialize(input:)
|
|
10
10
|
@input = input
|
|
11
11
|
@input.add_label_classes("FormControl-label")
|
|
12
|
-
|
|
13
|
-
@
|
|
14
|
-
|
|
15
|
-
@form_group_arguments[:hidden] = "hidden" if @input.hidden?
|
|
12
|
+
@input.add_input_classes("FormControl-toggleSwitchInput")
|
|
13
|
+
@input.input_arguments[:hidden] = "hidden" if @input.hidden?
|
|
16
14
|
end
|
|
17
15
|
end
|
|
18
16
|
end
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { controller, target } from '@github/catalyst';
|
|
8
|
+
let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement {
|
|
9
|
+
connectedCallback() {
|
|
10
|
+
this.addEventListener('toggleSwitchError', (event) => {
|
|
11
|
+
this.validationMessageElement.innerText = event.detail;
|
|
12
|
+
this.validationElement.removeAttribute('hidden');
|
|
13
|
+
});
|
|
14
|
+
this.addEventListener('toggleSwitchSuccess', () => {
|
|
15
|
+
this.validationMessageElement.innerText = '';
|
|
16
|
+
this.validationElement.setAttribute('hidden', 'hidden');
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
__decorate([
|
|
21
|
+
target
|
|
22
|
+
], ToggleSwitchInputElement.prototype, "validationElement", void 0);
|
|
23
|
+
__decorate([
|
|
24
|
+
target
|
|
25
|
+
], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
|
|
26
|
+
ToggleSwitchInputElement = __decorate([
|
|
27
|
+
controller
|
|
28
|
+
], ToggleSwitchInputElement);
|
|
29
|
+
export { ToggleSwitchInputElement };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import {controller, target} from '@github/catalyst'
|
|
2
|
+
|
|
3
|
+
@controller
|
|
4
|
+
export class ToggleSwitchInputElement extends HTMLElement {
|
|
5
|
+
@target validationElement: HTMLElement
|
|
6
|
+
@target validationMessageElement: HTMLElement
|
|
7
|
+
|
|
8
|
+
connectedCallback() {
|
|
9
|
+
this.addEventListener('toggleSwitchError', (event: Event) => {
|
|
10
|
+
this.validationMessageElement.innerText = (event as CustomEvent).detail
|
|
11
|
+
this.validationElement.removeAttribute('hidden')
|
|
12
|
+
})
|
|
13
|
+
|
|
14
|
+
this.addEventListener('toggleSwitchSuccess', () => {
|
|
15
|
+
this.validationMessageElement.innerText = ''
|
|
16
|
+
this.validationElement.setAttribute('hidden', 'hidden')
|
|
17
|
+
})
|
|
18
|
+
}
|
|
19
|
+
}
|
data/lib/tasks/docs.rake
CHANGED
|
@@ -515,7 +515,7 @@ namespace :docs do
|
|
|
515
515
|
def lookbook_url(component)
|
|
516
516
|
path = component.name.underscore.gsub("_component", "")
|
|
517
517
|
|
|
518
|
-
"https://primer.style/view-components/lookbook/inspect/#{path}
|
|
518
|
+
"https://primer.style/view-components/lookbook/inspect/#{path}/default/"
|
|
519
519
|
end
|
|
520
520
|
|
|
521
521
|
def preview_exists?(component)
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
|
|
2
|
+
<% d.show_button { button_text } %>
|
|
3
|
+
<% d.body do %>
|
|
4
|
+
<p>Dialog One!</p>
|
|
5
|
+
|
|
6
|
+
<form>
|
|
7
|
+
<input type="text" value="Some text goes in here">
|
|
8
|
+
</form>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
@@ -112,6 +112,21 @@ module Primer
|
|
|
112
112
|
show_divider: show_divider
|
|
113
113
|
})
|
|
114
114
|
end
|
|
115
|
+
|
|
116
|
+
# @label Dialog with text input
|
|
117
|
+
#
|
|
118
|
+
# @param title [String] text
|
|
119
|
+
# @param subtitle [String] text
|
|
120
|
+
# @param button_text [String] text
|
|
121
|
+
# @param show_divider [Boolean] toggle
|
|
122
|
+
def with_text_input(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
|
|
123
|
+
render_with_template(locals: {
|
|
124
|
+
title: title,
|
|
125
|
+
subtitle: subtitle,
|
|
126
|
+
button_text: button_text,
|
|
127
|
+
show_divider: show_divider
|
|
128
|
+
})
|
|
129
|
+
end
|
|
115
130
|
end
|
|
116
131
|
end
|
|
117
132
|
end
|
|
@@ -7,7 +7,7 @@ module Primer
|
|
|
7
7
|
# @param type [Symbol] select [["Description", description], ["Label", label]]
|
|
8
8
|
# @param direction select [s, n, e, w, ne, nw, se, sw]
|
|
9
9
|
# @param tooltip_text text
|
|
10
|
-
def playground(type: :description, direction: :s, tooltip_text: "
|
|
10
|
+
def playground(type: :description, direction: :s, tooltip_text: "You can press a button")
|
|
11
11
|
render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
|
|
12
12
|
component.with_tooltip(text: tooltip_text, type: type, direction: direction)
|
|
13
13
|
"Button"
|
|
@@ -17,7 +17,7 @@ module Primer
|
|
|
17
17
|
# @param type [Symbol] select [["Description", description], ["Label", label]]
|
|
18
18
|
# @param direction select [s, n, e, w, ne, nw, se, sw]
|
|
19
19
|
# @param tooltip_text text
|
|
20
|
-
def default(type: :description, direction: :s, tooltip_text: "
|
|
20
|
+
def default(type: :description, direction: :s, tooltip_text: "You can press a button")
|
|
21
21
|
render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
|
|
22
22
|
component.with_tooltip(text: tooltip_text, type: type, direction: direction)
|
|
23
23
|
"Button"
|
|
@@ -26,7 +26,7 @@ module Primer
|
|
|
26
26
|
|
|
27
27
|
# @param direction select [s, n, e, w, ne, nw, se, sw]
|
|
28
28
|
# @param tooltip_text text
|
|
29
|
-
def label_tooltip_on_button_with_existing_labelledby(type: :label, direction: :s, tooltip_text: "
|
|
29
|
+
def label_tooltip_on_button_with_existing_labelledby(type: :label, direction: :s, tooltip_text: "You can press a button")
|
|
30
30
|
render(Primer::Beta::Button.new(id: "button-with-existing-label", "aria-labelledby": "existing-label-id")) do |component|
|
|
31
31
|
component.with_tooltip(text: tooltip_text, type: type, direction: direction)
|
|
32
32
|
"Button"
|
|
@@ -35,7 +35,7 @@ module Primer
|
|
|
35
35
|
|
|
36
36
|
# @param direction select [s, n, e, w, ne, nw, se, sw]
|
|
37
37
|
# @param tooltip_text text
|
|
38
|
-
def description_tooltip_on_button_with_existing_describedby(type: :description, direction: :s, tooltip_text: "
|
|
38
|
+
def description_tooltip_on_button_with_existing_describedby(type: :description, direction: :s, tooltip_text: "You can press a button")
|
|
39
39
|
render(Primer::Beta::Button.new(id: "button-with-existing-description", "aria-describedby": "existing-description-id")) do |component|
|
|
40
40
|
component.with_tooltip(text: tooltip_text, type: type, direction: direction)
|
|
41
41
|
"Button"
|
|
@@ -56,7 +56,7 @@ module Primer
|
|
|
56
56
|
|
|
57
57
|
# @param direction select [s, n, e, w, ne, nw, se, sw]
|
|
58
58
|
# @param tooltip_text text
|
|
59
|
-
def with_multiple_on_a_page(type: :description, direction: :s, tooltip_text: "
|
|
59
|
+
def with_multiple_on_a_page(type: :description, direction: :s, tooltip_text: "You can press a button")
|
|
60
60
|
render_with_template(
|
|
61
61
|
locals: {
|
|
62
62
|
type: type,
|
|
@@ -68,7 +68,7 @@ module Primer
|
|
|
68
68
|
|
|
69
69
|
# @!group Tooltip enabled elements
|
|
70
70
|
# @label Tooltip with Primer::Beta::Button
|
|
71
|
-
def tooltip_with_button(type: :description, direction: :s, tooltip_text: "
|
|
71
|
+
def tooltip_with_button(type: :description, direction: :s, tooltip_text: "You can press a button")
|
|
72
72
|
render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
|
|
73
73
|
component.with_tooltip(text: tooltip_text, type: type, direction: direction)
|
|
74
74
|
"Button"
|
|
@@ -76,7 +76,7 @@ module Primer
|
|
|
76
76
|
end
|
|
77
77
|
|
|
78
78
|
# @label Tooltip with Primer::Beta::Link
|
|
79
|
-
def tooltip_with_link(type: :description, direction: :s, tooltip_text: "
|
|
79
|
+
def tooltip_with_link(type: :description, direction: :s, tooltip_text: "You can press a button")
|
|
80
80
|
render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip")) do |component|
|
|
81
81
|
component.with_tooltip(text: tooltip_text, type: type, direction: direction)
|
|
82
82
|
"Button"
|
|
@@ -84,7 +84,7 @@ module Primer
|
|
|
84
84
|
end
|
|
85
85
|
|
|
86
86
|
# @label Tooltip with Primer::IconButton
|
|
87
|
-
def tooltip_with_icon_button(direction: :s, tooltip_text: "
|
|
87
|
+
def tooltip_with_icon_button(direction: :s, tooltip_text: "You can press a button")
|
|
88
88
|
render(Primer::Beta::IconButton.new(icon: :search, "aria-label": tooltip_text, tooltip_direction: direction))
|
|
89
89
|
end
|
|
90
90
|
# @!endgroup
|
|
@@ -24,7 +24,7 @@ module Primer
|
|
|
24
24
|
#
|
|
25
25
|
# @param aria_label [String]
|
|
26
26
|
# @param value [String]
|
|
27
|
-
def text(value: "Text to copy", aria_label: "
|
|
27
|
+
def text(value: "Text to copy", aria_label: "Click to copy!")
|
|
28
28
|
render(Primer::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label)) { "Click to copy!" }
|
|
29
29
|
end
|
|
30
30
|
|