playbook_ui 16.1.0.pre.alpha.PLAY272013809 → 16.1.0.pre.alpha.PLAY276713854

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 (12) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +6 -8
  3. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +7 -0
  4. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb +3 -3
  5. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx +3 -0
  6. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md +1 -0
  7. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +17 -8
  8. data/app/pb_kits/playbook/pb_textarea/textarea.rb +7 -1
  9. data/dist/chunks/vendor.js +1 -1
  10. data/dist/playbook.css +1 -1
  11. data/lib/playbook/version.rb +1 -1
  12. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ac6a39ac1cb6ec18fcba139cebeb541aaf10f24f4488643bc91d227db570a1f4
4
- data.tar.gz: 1b968b6f5f6513392b8ed7013ea5397fdf42fb0e7f426564ba50aa331296dfc8
3
+ metadata.gz: ccd0e00a54b967ee2dbcdea1e4c4aadcdf6ae9520e3355da0388de1f14206dfd
4
+ data.tar.gz: 49e4caa38cb4f231b23acc7ee5339ef70db7cb9d2c4a9de6d41d89be4a78c438
5
5
  SHA512:
6
- metadata.gz: a38266fabaceae1bf080f2802ede800f0db99d1991cb82b6773b6ef63c094a2b6df462547edf359a06917b689fdd278a8c7882edcff5afd0ac76f948ded9f45b
7
- data.tar.gz: d21b8d9a27b38812cd09ce8aea5c42a2c2976db366251c7333a7bfccdc68459775044ec86bf81108eb796820abedab92edc40550e769cd50cbe2ffa5e2a426c4
6
+ metadata.gz: af18626589667769d1b2ea4aec0d4def8d2ad76b63cc8e14ad08cf265580415de261956663055e4e6c6f75b038ed48708e04f41e843e422fcf7b1b9f083dbc7d
7
+ data.tar.gz: 258b7e85070126206e76a74c7642d4c55b461d687a84a6d4b0ae19cf357abbca5ca86c5558349ff857e9de8ddc35d5915d5ab43eaf825c0634aec19eb053c133
data/app/pb_kits/playbook/pb_dialog/_dialog.scss CHANGED
@@ -135,8 +135,6 @@
135
135
  position: sticky;
136
136
  top: 0;
137
137
  background-color: $white;
138
- border-top-left-radius: $border_radius_md;
139
- border-top-right-radius: $border_radius_md;
140
138
  z-index: $z_8;
141
139
  }
142
140
 
@@ -258,7 +256,7 @@
258
256
  }
259
257
  &.full_height_left {
260
258
  justify-content: flex-start;
261
-
259
+
262
260
  .pb_dialog {
263
261
  border-radius: 0;
264
262
  height: 100%;
@@ -304,7 +302,7 @@
304
302
 
305
303
  &.full_height_center {
306
304
  justify-content: center;
307
-
305
+
308
306
  .pb_dialog {
309
307
  border-radius: 0;
310
308
  height: 100%;
@@ -348,7 +346,7 @@
348
346
 
349
347
  &.full_height_right {
350
348
  justify-content: flex-end;
351
-
349
+
352
350
  .pb_dialog {
353
351
  border-radius: 0;
354
352
  height: 100%;
@@ -419,7 +417,7 @@
419
417
  margin: unset !important;
420
418
  margin-right: auto !important;
421
419
  }
422
-
420
+
423
421
  .pb_dialog {
424
422
  border-radius: 0;
425
423
  height: 100% !important;
@@ -465,7 +463,7 @@
465
463
 
466
464
  &.full_height_center {
467
465
  justify-content: center;
468
-
466
+
469
467
  .pb_dialog {
470
468
  border-radius: 0;
471
469
  height: 100% !important;
@@ -512,7 +510,7 @@
512
510
  margin: unset !important;
513
511
  margin-left: auto !important;
514
512
  }
515
-
513
+
516
514
  .pb_dialog {
517
515
  border-radius: 0;
518
516
  height: 100% !important;
data/app/pb_kits/playbook/pb_textarea/_textarea.tsx CHANGED
@@ -120,6 +120,7 @@ const Textarea = ({
120
120
  const characterCounter = () => {
121
121
  return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
122
122
  }
123
+ const errorId = error ? `${id}-error` : undefined
123
124
 
124
125
  return (
125
126
  <div
@@ -145,7 +146,10 @@ const Textarea = ({
145
146
  )}
146
147
  {children || (
147
148
  <textarea
149
+ aria-describedby={errorId}
150
+ aria-invalid={!!error}
148
151
  disabled={disabled}
152
+ id={id}
149
153
  name={name}
150
154
  onChange={emojiMask ? handleChange : onChange}
151
155
  onPaste={emojiMask ? handlePaste : undefined}
@@ -167,6 +171,9 @@ const Textarea = ({
167
171
  >
168
172
  <FlexItem>
169
173
  <Body
174
+ aria={{ atomic: "true", live: "polite" }}
175
+ htmlOptions={{ role: "alert" }}
176
+ id={errorId}
170
177
  margin="none"
171
178
  status="negative"
172
179
  text={error}
data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb CHANGED
@@ -1,9 +1,9 @@
1
- <%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
1
+ <%= pb_rails("textarea", props: { label: "Label", rows: 4, id: "default-example-1" }) %>
2
2
 
3
3
  <br/>
4
4
 
5
- <%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
5
+ <%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
6
6
 
7
7
  <br/>
8
8
 
9
- <%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>
9
+ <%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>
data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx CHANGED
@@ -13,6 +13,7 @@ const TextareaDefault = (props) => {
13
13
  label="Label"
14
14
  rows={4}
15
15
  {...props}
16
+ id="default-example-1"
16
17
  />
17
18
 
18
19
  <br />
@@ -21,6 +22,7 @@ const TextareaDefault = (props) => {
21
22
  label="Label"
22
23
  placeholder="Placeholder text"
23
24
  {...props}
25
+ id="default-example-2"
24
26
  />
25
27
 
26
28
  <br />
@@ -32,6 +34,7 @@ const TextareaDefault = (props) => {
32
34
  placeholder="Placeholder text"
33
35
  value={value}
34
36
  {...props}
37
+ id="default-example-3"
35
38
  />
36
39
 
37
40
  </div>
data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md ADDED
@@ -0,0 +1 @@
1
+ Add an `id` to your Textarea so that clicking the label will move focus directly to the input.
data/app/pb_kits/playbook/pb_textarea/textarea.html.erb CHANGED
@@ -1,12 +1,14 @@
1
- <%= pb_content_tag do %>
1
+ <%= pb_content_tag(:div, id: nil) do %>
2
2
  <% if object.label.present? %>
3
- <% if object.required_indicator %>
4
- <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
5
- <%= object.label %><span style="color: #DA0014;"> *</span>
3
+ <label for="<%= object.input_options[:id] || object.id %>" >
4
+ <% if object.required_indicator %>
5
+ <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
6
+ <%= object.label %><span style="color: #DA0014;"> *</span>
7
+ <% end %>
8
+ <% else %>
9
+ <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
6
10
  <% end %>
7
- <% else %>
8
- <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
9
- <% end %>
11
+ </label>
10
12
  <% end %>
11
13
  <% if content.present? %>
12
14
  <%= content %>
@@ -22,7 +24,14 @@
22
24
  <% if object.character_count %>
23
25
  <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>
24
26
  <%= pb_rails("flex/flex_item") do %>
25
- <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
27
+ <%= pb_rails("body", props: {
28
+ dark: object.dark,
29
+ status: "negative",
30
+ text: object.error,
31
+ id: object.error_id,
32
+ aria: { atomic: "true", live: "polite" },
33
+ html_options: { role: "alert" },
34
+ }) %>
26
35
  <% end %>
27
36
  <%= pb_rails("flex/flex_item") do %>
28
37
  <%= pb_rails("caption", props: { margin: "none", size: "xs", text: object.character_counter }) %>
data/app/pb_kits/playbook/pb_textarea/textarea.rb CHANGED
@@ -47,7 +47,9 @@ module Playbook
47
47
  merged_data = data_attrs.merge(input_data)
48
48
 
49
49
  base_attributes = {
50
- id: input_options[:id] || "object_method",
50
+ 'aria-describedby': error.present? ? error_id : nil,
51
+ 'aria-invalid': error.present?,
52
+ id: input_options[:id] || id || "object_method",
51
53
  max_characters: max_characters,
52
54
  name: name,
53
55
  onkeyup: onkeyup,
@@ -66,6 +68,10 @@ module Playbook
66
68
  result
67
69
  end
68
70
 
71
+ def error_id
72
+ "#{id}-error" if error.present?
73
+ end
74
+
69
75
  private
70
76
 
71
77
  def error_class