primer_view_components 0.0.117 → 0.0.119

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.
Files changed (53) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +28 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list/item.rb +3 -3
  8. data/app/components/primer/alpha/action_list.rb +1 -1
  9. data/app/components/primer/alpha/dialog.rb +6 -5
  10. data/app/components/primer/alpha/modal_dialog.js +24 -12
  11. data/app/components/primer/alpha/modal_dialog.ts +29 -15
  12. data/app/components/primer/alpha/text_field.css +1 -1
  13. data/app/components/primer/alpha/text_field.css.json +1 -1
  14. data/app/components/primer/alpha/text_field.css.map +1 -1
  15. data/app/components/primer/alpha/text_field.pcss +6 -0
  16. data/app/components/primer/alpha/toggle_switch.css +1 -1
  17. data/app/components/primer/alpha/toggle_switch.css.json +1 -1
  18. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  19. data/app/components/primer/alpha/toggle_switch.html.erb +4 -2
  20. data/app/components/primer/alpha/toggle_switch.js +23 -11
  21. data/app/components/primer/alpha/toggle_switch.pcss +6 -0
  22. data/app/components/primer/alpha/toggle_switch.ts +27 -11
  23. data/app/components/primer/alpha/tool_tip.js +0 -3
  24. data/app/components/primer/alpha/tool_tip.ts +0 -4
  25. data/app/components/primer/alpha/tooltip.rb +4 -3
  26. data/app/components/primer/beta/button.css +1 -1
  27. data/app/components/primer/beta/button.css.map +1 -1
  28. data/app/components/primer/beta/button.pcss +1 -1
  29. data/app/components/primer/beta/icon_button.rb +1 -1
  30. data/app/components/primer/beta/relative_time.rb +6 -0
  31. data/app/components/primer/component.rb +4 -0
  32. data/app/components/primer/icon_button.rb +1 -1
  33. data/app/components/primer/primer.d.ts +1 -0
  34. data/app/components/primer/primer.js +1 -0
  35. data/app/components/primer/primer.ts +1 -0
  36. data/app/forms/example_toggle_switch_form.rb +1 -1
  37. data/lib/primer/forms/dsl/input.rb +1 -1
  38. data/lib/primer/forms/toggle_switch.html.erb +7 -2
  39. data/lib/primer/forms/toggle_switch.rb +2 -4
  40. data/lib/primer/forms/toggle_switch_input.d.ts +5 -0
  41. data/lib/primer/forms/toggle_switch_input.js +29 -0
  42. data/lib/primer/forms/toggle_switch_input.ts +19 -0
  43. data/lib/primer/view_components/version.rb +1 -1
  44. data/lib/tasks/docs.rake +1 -1
  45. data/previews/primer/alpha/dialog_preview/with_text_input.html.erb +10 -0
  46. data/previews/primer/alpha/dialog_preview.rb +15 -0
  47. data/previews/primer/alpha/tooltip_preview.rb +8 -8
  48. data/previews/primer/beta/clipboard_copy_preview.rb +1 -1
  49. data/previews/primer/beta/relative_time_preview.rb +15 -0
  50. data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +3 -1
  51. data/static/arguments.json +78 -72
  52. data/static/constants.json +11 -2
  53. metadata +8 -18
data/app/components/primer/alpha/toggle_switch.js CHANGED
@@ -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
- const response = await fetch(this.src, {
106
- credentials: 'same-origin',
107
- method: 'POST',
108
- headers: {
109
- 'Requested-With': 'XMLHttpRequest'
110
- },
111
- body
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
- this.setErrorState();
128
+ throw new Error(await response.text());
119
129
  }
120
130
  }
121
131
  catch (error) {
122
- this.setErrorState();
132
+ if (error instanceof Error) {
133
+ this.setErrorState(error.message || 'An error occurred, please try again.');
134
+ }
123
135
  }
124
136
  }
125
137
  };
data/app/components/primer/alpha/toggle_switch.pcss CHANGED
@@ -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);
data/app/components/primer/alpha/toggle_switch.ts CHANGED
@@ -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
- const response = await fetch(this.src, {
129
- credentials: 'same-origin',
130
- method: 'POST',
131
- headers: {
132
- 'Requested-With': 'XMLHttpRequest'
133
- },
134
- body
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
- this.setErrorState()
154
+ throw new Error(await response.text())
141
155
  }
142
156
  } catch (error) {
143
- this.setErrorState()
157
+ if (error instanceof Error) {
158
+ this.setErrorState(error.message || 'An error occurred, please try again.')
159
+ }
144
160
  }
145
161
  }
146
162
  }
data/app/components/primer/alpha/tool_tip.js CHANGED
@@ -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');
data/app/components/primer/alpha/tool_tip.ts CHANGED
@@ -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')
data/app/components/primer/alpha/tooltip.rb CHANGED
@@ -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
data/app/components/primer/beta/button.css CHANGED
@@ -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:course){.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
+ :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)}
data/app/components/primer/beta/button.css.map CHANGED
@@ -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"]}
data/app/components/primer/beta/button.pcss CHANGED
@@ -31,7 +31,7 @@
31
31
  min-width: max-content;
32
32
 
33
33
  /* mobile friendly sizing */
34
- @media (pointer: course) {
34
+ @media (pointer: coarse) {
35
35
  &::before {
36
36
  @mixin minTouchTarget 48px, 48px;
37
37
  }
data/app/components/primer/beta/icon_button.rb CHANGED
@@ -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] ||= "icon-button-#{SecureRandom.hex(4)}"
66
+ @system_arguments[:id] ||= self.class.generate_id
67
67
 
68
68
  @system_arguments[:classes] = class_names(
69
69
  "Button",
data/app/components/primer/beta/relative_time.rb CHANGED
@@ -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
data/app/components/primer/component.rb CHANGED
@@ -22,6 +22,10 @@ module Primer
22
22
  status == :deprecated
23
23
  end
24
24
 
25
+ def self.generate_id
26
+ "#{name.demodulize.underscore.dasherize}-#{SecureRandom.uuid}"
27
+ end
28
+
25
29
  private
26
30
 
27
31
  def raise_on_invalid_options?
data/app/components/primer/icon_button.rb CHANGED
@@ -65,7 +65,7 @@ module Primer
65
65
 
66
66
  @system_arguments = system_arguments
67
67
 
68
- @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
68
+ @system_arguments[:id] ||= self.class.generate_id
69
69
 
70
70
  @system_arguments[:classes] = class_names(
71
71
  "btn-octicon",
data/app/components/primer/primer.d.ts CHANGED
@@ -13,3 +13,4 @@ import './alpha/tab_container';
13
13
  import './time_ago_component';
14
14
  import '../../../lib/primer/forms/primer_multi_input';
15
15
  import '../../../lib/primer/forms/primer_text_field';
16
+ import '../../../lib/primer/forms/toggle_switch_input';
data/app/components/primer/primer.js CHANGED
@@ -13,3 +13,4 @@ import './alpha/tab_container';
13
13
  import './time_ago_component';
14
14
  import '../../../lib/primer/forms/primer_multi_input';
15
15
  import '../../../lib/primer/forms/primer_text_field';
16
+ import '../../../lib/primer/forms/toggle_switch_input';
data/app/components/primer/primer.ts CHANGED
@@ -13,3 +13,4 @@ import './alpha/tab_container'
13
13
  import './time_ago_component'
14
14
  import '../../../lib/primer/forms/primer_multi_input'
15
15
  import '../../../lib/primer/forms/primer_text_field'
16
+ import '../../../lib/primer/forms/toggle_switch_input'
data/app/forms/example_toggle_switch_form.rb CHANGED
@@ -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
data/lib/primer/forms/dsl/input.rb CHANGED
@@ -76,7 +76,7 @@ module Primer
76
76
 
77
77
  @input_arguments[:invalid] = "true" if invalid?
78
78
 
79
- base_id = SecureRandom.hex[0..5]
79
+ base_id = SecureRandom.uuid
80
80
 
81
81
  @ids = {}.tap do |id_map|
82
82
  id_map[:validation] = "validation-#{base_id}" if invalid?
data/lib/primer/forms/toggle_switch.html.erb CHANGED
@@ -1,9 +1,14 @@
1
- <%= content_tag(:div, **@form_group_arguments) do %>
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
- <%= render(Caption.new(input: @input)) %>
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(
data/lib/primer/forms/toggle_switch.rb CHANGED
@@ -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
- @form_group_arguments = { class: "d-flex" }
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
data/lib/primer/forms/toggle_switch_input.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare class ToggleSwitchInputElement extends HTMLElement {
2
+ validationElement: HTMLElement;
3
+ validationMessageElement: HTMLElement;
4
+ connectedCallback(): void;
5
+ }
data/lib/primer/forms/toggle_switch_input.js ADDED
@@ -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 };
data/lib/primer/forms/toggle_switch_input.ts ADDED
@@ -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/primer/view_components/version.rb CHANGED
@@ -6,7 +6,7 @@ module Primer
6
6
  module VERSION
7
7
  MAJOR = 0
8
8
  MINOR = 0
9
- PATCH = 117
9
+ PATCH = 119
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
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}_preview/default/"
518
+ "https://primer.style/view-components/lookbook/inspect/#{path}/default/"
519
519
  end
520
520
 
521
521
  def preview_exists?(component)
data/previews/primer/alpha/dialog_preview/with_text_input.html.erb ADDED
@@ -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 %>
data/previews/primer/alpha/dialog_preview.rb CHANGED
@@ -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
data/previews/primer/alpha/tooltip_preview.rb CHANGED
@@ -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: "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: "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: "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: "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: "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: "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: "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: "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
data/previews/primer/beta/clipboard_copy_preview.rb CHANGED
@@ -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: "Copy text to the system clipboard")
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