playbook_ui 12.1.0 → 12.3.0.pre.alpha.patchtest1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +3 -0
  3. data/app/pb_kits/playbook/data/menu.yml +1 -0
  4. data/app/pb_kits/playbook/index.js +3 -2
  5. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +10 -10
  6. data/app/pb_kits/playbook/pb_button/_button.scss +0 -5
  7. data/app/pb_kits/playbook/pb_button/_button.tsx +4 -0
  8. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +39 -4
  9. data/app/pb_kits/playbook/pb_button/button.rb +2 -0
  10. data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx +1 -0
  11. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +1 -0
  12. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +4 -0
  13. data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx +1 -0
  14. data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx +1 -0
  15. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -2
  16. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +4 -0
  17. data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb +3 -3
  18. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +6 -0
  19. data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb +3 -3
  20. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +6 -0
  21. data/app/pb_kits/playbook/pb_button/docs/_button_options.jsx +1 -0
  22. data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb +3 -3
  23. data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +6 -0
  24. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +26 -19
  25. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +24 -0
  26. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +2 -0
  27. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +10 -2
  28. data/app/pb_kits/playbook/pb_map/_map.scss +8 -0
  29. data/app/pb_kits/playbook/pb_map/_map.tsx +40 -0
  30. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +52 -0
  31. data/app/pb_kits/playbook/pb_map/docs/_map_default.md +13 -0
  32. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +64 -0
  33. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.md +8 -0
  34. data/app/pb_kits/playbook/pb_map/docs/example.yml +7 -0
  35. data/app/pb_kits/playbook/pb_map/docs/index.js +2 -0
  36. data/app/pb_kits/playbook/pb_map/map.test.jsx +17 -0
  37. data/app/pb_kits/playbook/pb_progress_simple/{_progress_simple.jsx → _progress_simple.tsx} +7 -5
  38. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.test.js +120 -0
  39. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -9
  40. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +66 -0
  41. data/app/pb_kits/playbook/pb_stat_change/stat_change.test.js +41 -0
  42. data/app/pb_kits/playbook/pb_stat_value/{_stat_value.jsx → _stat_value.tsx} +4 -6
  43. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx +1 -1
  44. data/app/pb_kits/playbook/pb_stat_value/stat_value.test.js +27 -0
  45. data/app/pb_kits/playbook/pb_time_stacked/{_time_stacked.jsx → _time_stacked.tsx} +3 -5
  46. data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_time_stacked/docs/index.js +1 -1
  48. data/app/pb_kits/playbook/pb_timestamp/{_timestamp.jsx → _timestamp.tsx} +5 -7
  49. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +1 -1
  50. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +1 -1
  51. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +36 -28
  55. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +1 -0
  56. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +14 -0
  57. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +11 -2
  58. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -2
  59. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +95 -0
  60. data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx +1 -1
  61. data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx +1 -0
  62. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +19 -0
  63. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +39 -0
  64. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md +1 -0
  65. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  66. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  67. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
  68. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  69. data/app/pb_kits/playbook/tokens/_colors.scss +6 -2
  70. data/app/pb_kits/playbook/utilities/_focus.scss +12 -0
  71. data/lib/playbook/version.rb +2 -2
  72. metadata +26 -9
  73. data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +0 -63
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 637dc98a1badc91927d22a80c40b7dab9ff223d0beef1585f2d588f34aea833d
4
- data.tar.gz: 1d95711beb58f0c37cf3dafc98f6c8c38cbd59e6a390290f2574fa612fbcc14e
3
+ metadata.gz: '0928d7277d3ae8bafae0638314ca0e5b76d4fd09e8c402e281644196b7917903'
4
+ data.tar.gz: f62293859cddfd9bfe8493e9fd3a40a7515881e99262a329e8914390b99a632c
5
5
  SHA512:
6
- metadata.gz: 449796d0443af564166cd7fea3d5b3ec3354553c7263aaf00def68b6bbd809aac65b3dc680034faa04564f79d692c3c11618f78a88fe07fa6dbe79c6c56822a3
7
- data.tar.gz: 17c5ef327dec5cd35db9d780af9bc4af5b7a7eb6ec8f474ecce9a726e2b8c89f8bf379c4b07e32b9a776abcf630529faf7fb6d37d558cdde5dadf5c75309adbc
6
+ metadata.gz: afba11e867700ad41542a1e6a6dbff294bbe0d56dbee36ea7484cce52b8c8fc7575dc08c4f63fee38518833102abcc1815b57a4d2b71276291a1a5058a221ea7
7
+ data.tar.gz: bb698f0b069b59bfac04f05235f1a3a0f73b1ca3fe7e0c00613ba213a398307ee7666f29820f9249ef410ff48395c2b3674bf18d2815fd81f7e23d1aac14d86c
@@ -51,6 +51,7 @@
51
51
  @import 'pb_line_graph/line_graph';
52
52
  @import 'pb_list/list';
53
53
  @import 'pb_loading_inline/loading_inline';
54
+ @import 'pb_map/map';
54
55
  @import 'pb_message/message';
55
56
  @import 'pb_multiple_users/multiple_users';
56
57
  @import 'pb_multiple_users_stacked/multiple_users_stacked';
@@ -104,3 +105,5 @@
104
105
  @import './utilities/line_height';
105
106
  @import './utilities/display';
106
107
  @import './utilities/flexbox';
108
+ @import './utilities/focus';
109
+
@@ -55,6 +55,7 @@ kits:
55
55
  - lightbox
56
56
  - list
57
57
  - loading_inline
58
+ - map
58
59
  - nav
59
60
  - tags:
60
61
  - badge
@@ -10,8 +10,8 @@ export { default as Background } from './pb_background/_background'
10
10
  export { default as Badge } from './pb_badge/_badge'
11
11
  export { default as BarGraph } from './pb_bar_graph/_bar_graph'
12
12
  export { default as Body } from './pb_body/_body'
13
- export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
14
13
  export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
14
+ export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
15
15
  export { default as Button } from './pb_button/_button'
16
16
  export { default as ButtonToolbar } from './pb_button_toolbar/_button_toolbar'
17
17
  export { default as Caption } from './pb_caption/_caption'
@@ -53,11 +53,12 @@ export { default as LabelPill } from './pb_label_pill/_label_pill'
53
53
  export { default as LabelValue } from './pb_label_value/_label_value'
54
54
  export { default as Layout } from './pb_layout/_layout'
55
55
  export { default as Legend } from './pb_legend/_legend'
56
+ export { default as Lightbox } from './pb_lightbox/_lightbox'
56
57
  export { default as LineGraph } from './pb_line_graph/_line_graph'
57
58
  export { default as List } from './pb_list/_list'
58
- export { default as Lightbox } from './pb_lightbox/_lightbox'
59
59
  export { default as ListItem } from './pb_list/_list_item'
60
60
  export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
61
+ export { default as Map} from './pb_map/_map'
61
62
  export { default as Message } from './pb_message/_message'
62
63
  export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
63
64
  export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_multiple_users_stacked'
@@ -13,7 +13,7 @@ import classnames from "classnames";
13
13
  type BarGraphProps = {
14
14
  align?: "left" | "right" | "center";
15
15
  axisTitle: string;
16
- dark?: Boolean;
16
+ dark?: boolean;
17
17
  xAxisCategories: [];
18
18
  yAxisMin: number;
19
19
  yAxisMax: number;
@@ -62,7 +62,7 @@ const BarGraph = ({
62
62
  x = 0,
63
63
  y = 0,
64
64
  ...props
65
- }: BarGraphProps) => {
65
+ }: BarGraphProps): React.ReactElement => {
66
66
  const ariaProps = buildAriaProps(aria);
67
67
  const dataProps = buildDataProps(data);
68
68
  const setupTheme = () => {
@@ -130,14 +130,14 @@ const BarGraph = ({
130
130
 
131
131
  return (
132
132
  <HighchartsReact
133
- containerProps={{
134
- className: classnames(globalProps(props), className),
135
- id: id,
136
- ...ariaProps,
137
- ...dataProps,
138
- }}
139
- highcharts={Highcharts}
140
- options={options}
133
+ containerProps={{
134
+ className: classnames(globalProps(props), className),
135
+ id: id,
136
+ ...ariaProps,
137
+ ...dataProps,
138
+ }}
139
+ highcharts={Highcharts}
140
+ options={options}
141
141
  />
142
142
  );
143
143
  };
@@ -29,11 +29,6 @@ $pb_button_sizes: (
29
29
  }
30
30
  &[class*=_link] {
31
31
  @include pb_button_link;
32
- @media (hover:hover) {
33
- &:hover {
34
- color: $text_lt_default;
35
- }
36
- }
37
32
  }
38
33
 
39
34
  // Disabled =================
@@ -23,6 +23,7 @@ type ButtonPropTypes = {
23
23
  loading?: boolean,
24
24
  newWindow?: boolean,
25
25
  onClick?: EventHandler,
26
+ tabIndex?: number,
26
27
  size?: 'sm' | 'md' | 'lg',
27
28
  text?: string,
28
29
  type?: 'inline' | null,
@@ -66,6 +67,7 @@ const Button = (props: ButtonPropTypes) => {
66
67
  id,
67
68
  loading = false,
68
69
  onClick,
70
+ tabIndex,
69
71
  link = null,
70
72
  newWindow = false,
71
73
  text,
@@ -128,6 +130,7 @@ const Button = (props: ButtonPropTypes) => {
128
130
  id={id}
129
131
  rel="noreferrer"
130
132
  role="link"
133
+ tabIndex={tabIndex}
131
134
  target={newWindow ? '_blank' : null}
132
135
  >
133
136
  {ifLoading()}
@@ -144,6 +147,7 @@ const Button = (props: ButtonPropTypes) => {
144
147
  id={id}
145
148
  onClick={onClick}
146
149
  role="button"
150
+ tabIndex={tabIndex}
147
151
  type={htmlType}
148
152
  value={value}
149
153
  >
@@ -5,6 +5,7 @@
5
5
  @import "../tokens/spacing";
6
6
  @import "../tokens/transition";
7
7
  @import "../tokens/typography";
8
+ @import "../utilities/focus";
8
9
 
9
10
  $pb_button_size: 40px;
10
11
  $pb_button_v_padding: 7px;
@@ -37,7 +38,7 @@ $pb_button_border_width: 0px;
37
38
  padding: $pb_button_v_padding $pb_button_h_padding;
38
39
  cursor: pointer;
39
40
  outline: none;
40
- transition: background $transition_default ease, color $transition_default ease;
41
+ transition: background $transition_default ease, color $transition_default ease, box-shadow $transition_default ease;
41
42
  box-sizing: border-box;
42
43
  display: inline-flex;
43
44
  align-items: center;
@@ -46,6 +47,12 @@ $pb_button_border_width: 0px;
46
47
  width: fit-content;
47
48
  font-family: $font_family_base;
48
49
  white-space: nowrap;
50
+
51
+ @include focus;
52
+
53
+ &[class*=dark] {
54
+ @include focus-dark
55
+ }
49
56
 
50
57
  .loading-icon {
51
58
  position: absolute;
@@ -62,9 +69,8 @@ $pb_button_border_width: 0px;
62
69
  margin-left: $space_xs;
63
70
  }
64
71
 
65
- &:hover, &:focus {
72
+ &:hover {
66
73
  outline: none;
67
-
68
74
  }
69
75
 
70
76
  &:active {
@@ -86,6 +92,10 @@ $pb_button_border_width: 0px;
86
92
  &:hover {
87
93
  @include pb_button_hover;
88
94
  }
95
+ &:active {
96
+ transition: none;
97
+ @include pb_button_variant($primary_action);
98
+ }
89
99
  }
90
100
  }
91
101
 
@@ -97,6 +107,10 @@ $pb_button_border_width: 0px;
97
107
  &:hover {
98
108
  @include pb_button_hover(rgba($primary_action, $opacity_3));
99
109
  }
110
+ &:active {
111
+ transition: none;
112
+ @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
113
+ }
100
114
  }
101
115
  }
102
116
 
@@ -107,6 +121,11 @@ $pb_button_border_width: 0px;
107
121
  @media (hover:hover) {
108
122
  &:hover {
109
123
  @include pb_button_hover($transparent);
124
+ color: $text_lt_default;
125
+ }
126
+ &:active {
127
+ transition: none;
128
+ @include pb_button_variant($transparent, $primary_action);
110
129
  }
111
130
  }
112
131
  }
@@ -116,6 +135,9 @@ $pb_button_border_width: 0px;
116
135
  $disabled_color: rgba($charcoal, $opacity_5);
117
136
  @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
118
137
  pointer-events: none;
138
+ &:focus {
139
+ outline: none;
140
+ }
119
141
  }
120
142
 
121
143
  // Block =======================
@@ -145,17 +167,25 @@ $pb_button_border_width: 0px;
145
167
  &:hover {
146
168
  @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
147
169
  }
170
+ &:active {
171
+ transition: none;
172
+ @include pb_button_variant($primary_action);
173
+ }
148
174
  }
149
175
  }
150
176
 
151
177
  // Dark Secondary ==============
152
178
  @mixin pb_button_secondary_dark{
153
- @include pb_button_variant(rgba($white, 0.2), $white);
179
+ @include pb_button_variant(rgba($white, $opacity_2), $white);
154
180
 
155
181
  @media (hover:hover) {
156
182
  &:hover {
157
183
  @include pb_button_hover(rgba($primary_action, $opacity_2));
158
184
  }
185
+ &:active {
186
+ transition: none;
187
+ @include pb_button_variant(rgba($white, $opacity_2), $white);
188
+ }
159
189
  }
160
190
  }
161
191
 
@@ -166,6 +196,11 @@ $pb_button_border_width: 0px;
166
196
  @media (hover:hover) {
167
197
  &:hover {
168
198
  @include pb_button_hover($transparent);
199
+ color: rgba($white, $opacity_6)
200
+ }
201
+ &:active {
202
+ transition: none;
203
+ @include pb_button_variant($transparent, $white);
169
204
  }
170
205
  }
171
206
  }
@@ -34,6 +34,7 @@ module Playbook
34
34
  disabled: disabled,
35
35
  id: id,
36
36
  role: "button",
37
+ tabindex: 0,
37
38
  type: type,
38
39
  value: value,
39
40
  form: form,
@@ -45,6 +46,7 @@ module Playbook
45
46
  option[:href] = link
46
47
  option[:role] = "link"
47
48
  option[:target] = "_blank" if new_window
49
+ option[:tabindex] = 0
48
50
  end
49
51
  end
50
52
 
@@ -6,6 +6,7 @@ const ButtonAccessibility = (props) => (
6
6
  <Button
7
7
  aria={{ label: 'Go to Google' }}
8
8
  link="https://google.com"
9
+ tabIndex={0}
9
10
  tag="a"
10
11
  text="Button with ARIA"
11
12
  {...props}
@@ -5,6 +5,7 @@ const ButtonBlockContent = (props) => (
5
5
  <div>
6
6
  <Button fixedWidth
7
7
  {...props}
8
+ tabIndex={0}
8
9
  >
9
10
  <Pill marginRight="xs"
10
11
  text="5"
@@ -6,12 +6,14 @@ const ButtonDefault = (props) => (
6
6
  <Button
7
7
  marginRight='lg'
8
8
  onClick={() => alert("button clicked!")}
9
+ tabIndex={0}
9
10
  text='Button Primary'
10
11
  {...props}
11
12
  />{" "}
12
13
  <Button
13
14
  marginRight='lg'
14
15
  onClick={() => alert("button clicked!")}
16
+ tabIndex={0}
15
17
  text='Button Secondary'
16
18
  variant='secondary'
17
19
  {...props}
@@ -19,6 +21,7 @@ const ButtonDefault = (props) => (
19
21
  <Button
20
22
  marginRight='lg'
21
23
  onClick={() => alert("button clicked!")}
24
+ tabIndex={0}
22
25
  text='Button Link'
23
26
  variant='link'
24
27
  {...props}
@@ -27,6 +30,7 @@ const ButtonDefault = (props) => (
27
30
  disabled
28
31
  marginRight='lg'
29
32
  onClick={() => alert("button clicked!")}
33
+ tabIndex={0}
30
34
  text='Button Disabled'
31
35
  {...props}
32
36
  />
@@ -5,6 +5,7 @@ const ButtonForm = (props) => (
5
5
  <div>
6
6
  <Button
7
7
  form="form-id"
8
+ tabIndex={0}
8
9
  text="Button with Form Attribute"
9
10
  {...props}
10
11
  />
@@ -5,6 +5,7 @@ const ButtonFullWidth = (props) => (
5
5
  <div>
6
6
  <Button
7
7
  fullWidth
8
+ tabIndex={0}
8
9
  text="Button Full Width"
9
10
  {...props}
10
11
  />
@@ -1,2 +1,2 @@
1
- <%= pb_rails("button", props: { icon: "plus", text: "Icon on Left" }) %>
2
- <%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right" }) %>
1
+ <%= pb_rails("button", props: { icon: "plus", text: "Icon on Left", margin_right: "lg" }) %>
2
+ <%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right", margin_right: "lg" }) %>
@@ -6,6 +6,8 @@ const ButtonIconOptions = (props) => (
6
6
  <Button
7
7
  fixedWidth
8
8
  icon='plus'
9
+ marginRight='lg'
10
+ tabIndex={0}
9
11
  text="Icon on Left"
10
12
  {...props}
11
13
  />
@@ -14,6 +16,8 @@ const ButtonIconOptions = (props) => (
14
16
  fixedWidth
15
17
  icon='chevron-right'
16
18
  iconRight
19
+ marginRight='lg'
20
+ tabIndex={0}
17
21
  text="Icon on Right"
18
22
  {...props}
19
23
  />
@@ -1,3 +1,3 @@
1
- <%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %>
2
- <%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %>
3
- <%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>
1
+ <%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com", margin_right: "lg" }) %>
2
+ <%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com",margin_right: "lg" }) %>
3
+ <%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com",margin_right: "lg" }) %>
@@ -6,6 +6,8 @@ const ButtonLink = (props) => (
6
6
  <Button
7
7
  aria={{ label: 'Link to Google' }}
8
8
  link="https://google.com"
9
+ marginRight='lg'
10
+ tabIndex={0}
9
11
  text="A Tag Button"
10
12
  {...props}
11
13
  />
@@ -13,7 +15,9 @@ const ButtonLink = (props) => (
13
15
  <Button
14
16
  aria={{ label: 'Link to Google in new window' }}
15
17
  link="https://google.com"
18
+ marginRight='lg'
16
19
  newWindow
20
+ tabIndex={0}
17
21
  text="Open in New Window"
18
22
  {...props}
19
23
  />
@@ -22,6 +26,8 @@ const ButtonLink = (props) => (
22
26
  aria={{ label: 'Disabled link to Google' }}
23
27
  disabled
24
28
  link="https://google.com"
29
+ marginRight='lg'
30
+ tabIndex={0}
25
31
  text="A Tag Button Disabled"
26
32
  {...props}
27
33
  />
@@ -1,3 +1,3 @@
1
- <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %>
2
- <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %>
3
- <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>
1
+ <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true, margin_right: "lg" }) %>
2
+ <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
3
+ <%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>
@@ -6,6 +6,8 @@ const ButtonLoading = (props) => (
6
6
  <Button
7
7
  aria={{ label: 'Loading' }}
8
8
  loading
9
+ marginRight='lg'
10
+
9
11
  text="Button Primary"
10
12
  {...props}
11
13
  />
@@ -13,6 +15,8 @@ const ButtonLoading = (props) => (
13
15
  <Button
14
16
  aria={{ label: 'Loading' }}
15
17
  loading
18
+ marginRight='lg'
19
+ tabIndex={0}
16
20
  text="Button Secondary"
17
21
  variant="secondary"
18
22
  {...props}
@@ -21,6 +25,8 @@ const ButtonLoading = (props) => (
21
25
  <Button
22
26
  aria={{ label: 'Loading' }}
23
27
  loading
28
+ marginRight='lg'
29
+ tabIndex={0}
24
30
  text="A Tag Button Disabled"
25
31
  variant="link"
26
32
  {...props}
@@ -6,6 +6,7 @@ const ButtonOptions = (props) => (
6
6
  <Button
7
7
  htmlType="submit"
8
8
  onClick={() => alert('Click!')}
9
+ tabIndex={0}
9
10
  text="Button with options"
10
11
  value="1234"
11
12
  {...props}
@@ -1,3 +1,3 @@
1
- <%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %>
2
- <%= pb_rails("button", props: { text: "Button md size", size: "md" }) %>
3
- <%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>
1
+ <%= pb_rails("button", props: { text: "Button sm size", size: "sm", margin_right: "lg" }) %>
2
+ <%= pb_rails("button", props: { text: "Button md size", size: "md", margin_right: "lg" }) %>
3
+ <%= pb_rails("button", props: { text: "Button lg size", size: "lg", margin_right: "lg" }) %>
@@ -4,19 +4,25 @@ import { Button } from '../../'
4
4
  const ButtonSize = (props) => (
5
5
  <div>
6
6
  <Button
7
+ marginRight='lg'
7
8
  size="sm"
9
+ tabIndex={0}
8
10
  text="Button sm size"
9
11
  {...props}
10
12
  />
11
13
  {' '}
12
14
  <Button
15
+ marginRight='lg'
13
16
  size="md"
17
+ tabIndex={0}
14
18
  text="Button md size"
15
19
  {...props}
16
20
  />
17
21
  {' '}
18
22
  <Button
23
+ marginRight='lg'
19
24
  size="lg"
25
+ tabIndex={0}
20
26
  text="Button lg size"
21
27
  {...props}
22
28
  />
@@ -21,7 +21,7 @@ $transition: $transition_cubic;
21
21
  border-radius: $border_rad_light;
22
22
  height: 22px;
23
23
  position: relative;
24
- transition: background $transition_default ease, border-color $transition_default ease;
24
+ transition: background $transition_default ease, box-shadow $transition_default ease;
25
25
  width: 22px;
26
26
  .check_icon,
27
27
  .indeterminate_icon {
@@ -40,7 +40,7 @@ $transition: $transition_cubic;
40
40
 
41
41
  @media (hover:hover) {
42
42
  &:hover input ~ .pb_checkbox_checkmark {
43
- border-color: $primary_action;
43
+ background-color: $bg_light;
44
44
  }
45
45
  }
46
46
 
@@ -52,13 +52,19 @@ $transition: $transition_cubic;
52
52
  position: relative;
53
53
  width: 0;
54
54
  left: $offscreen;
55
+
55
56
  &:focus ~ .pb_checkbox_checkmark {
56
- border-color: $primary_action;
57
+ box-shadow: 0px 0px 0px 2px $white, 0px 0px 0px 4px $primary;
57
58
  }
58
59
  &:checked ~ .pb_checkbox_checkmark,
59
60
  & ~ .pb_checkbox_indeterminate {
60
61
  background-color: $primary_action;
61
62
  border-color: $primary_action;
63
+
64
+ &:hover {
65
+ background-color: $primary_action;
66
+ border-color: $primary_action;
67
+ }
62
68
  }
63
69
  &:checked ~ .pb_checkbox_checkmark,
64
70
  & ~ .pb_checkbox_indeterminate {
@@ -70,35 +76,36 @@ $transition: $transition_cubic;
70
76
  }
71
77
  }
72
78
 
73
- &[class*=_dark] {
74
- input:checked ~ .pb_checkbox_checkmark {
75
- background-color: $primary_action;
76
- border-color: $primary_action;
79
+ &.dark {
80
+ input {
81
+ &:focus ~ .pb_checkbox_checkmark {
82
+ box-shadow: 0px 0px 0px 2px $bg_dark_card, 0px 0px 0px 4px $primary;
83
+ }
77
84
  }
78
-
85
+
79
86
  @media (hover:hover) {
80
87
  &:hover .pb_checkbox_checkmark {
81
- border-color: $primary_action;
88
+ background-color: rgba($white,.05);
82
89
  }
83
90
  }
84
91
 
85
- &.error {
86
- > .pb_checkbox_checkmark {
87
- border-color: $error_dark;
88
- }
89
- }
90
92
  &.pb_checkbox_kit_error {
91
93
  > .pb_checkbox_checkmark {
92
94
  border-color: $error_dark;
95
+ }
96
+
97
+ input {
98
+ &:checked ~ .pb_checkbox_checkmark,
99
+ & ~ .pb_checkbox_indeterminate {
100
+ border-color: $primary;
101
+ &:hover {
102
+ border-color: $primary;
103
+ }
104
+ }
93
105
  }
94
106
  }
95
107
  }
96
108
 
97
- &.error {
98
- > .pb_checkbox_checkmark {
99
- border-color: $error;
100
- }
101
- }
102
109
  &.pb_checkbox_kit_error {
103
110
  > .pb_checkbox_checkmark {
104
111
  border-color: $error;
@@ -23,10 +23,34 @@ $pb_button_styles: [
23
23
  padding: 0;
24
24
  }
25
25
 
26
+ @mixin pb_circle_icon_button_active {
27
+ &:active {
28
+ transition: none;
29
+ @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
30
+ }
31
+ }
32
+
33
+ @mixin pb_circle_icon_button_active_dark {
34
+ &:active {
35
+ transition: none;
36
+ @include pb_button_variant(rgba($white, $opacity_2), $white);
37
+ }
38
+ }
39
+
26
40
  [class^=pb_circle_icon_button_kit] {
27
41
  @each $style in $pb_button_styles {
28
42
  [class^=pb_button_kit][class*=_#{$style}] {
29
43
  @include pb_circle_icon_button;
30
44
  }
31
45
  }
46
+ :first-child {
47
+ &[class*=_link] {
48
+ @include pb_circle_icon_button_active;
49
+ }
50
+ &.dark {
51
+ &[class*=_link] {
52
+ @include pb_circle_icon_button_active_dark;
53
+ }
54
+ }
55
+ }
32
56
  }
@@ -136,6 +136,8 @@ const highchartsDarkTheme: ThemeProps = {
136
136
 
137
137
  plotOptions: {
138
138
  series: {
139
+ borderColor: colors.bg_dark_card,
140
+ borderWidth: 2,
139
141
  type: 'area',
140
142
  nullColor: colors.text_dk_lighter,
141
143
  fillColor: {
@@ -92,7 +92,12 @@
92
92
  & > [class^=pb_selectable_card_kit]:not(:last-child) label {
93
93
  border-bottom-right-radius: 0;
94
94
  border-top-right-radius: 0;
95
- border-right-width: 0;
95
+ border-right-color: transparent;
96
+ }
97
+ & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
98
+ &:hover {
99
+ border-right-color: $slate;
100
+ }
96
101
  }
97
102
 
98
103
  & > [class^=pb_selectable_card_kit]:not(:first-child) label {
@@ -112,7 +117,10 @@
112
117
 
113
118
  & > [class^=pb_selectable_card_icon_kit]:not(:last-child) {
114
119
  [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked)~ label {
115
- border-right-width: 0;
120
+ border-right-color: transparent;
121
+ &:hover {
122
+ border-right-color: $slate;
123
+ }
116
124
  }
117
125
  }
118
126
 
@@ -0,0 +1,8 @@
1
+ @import "../tokens/typography";
2
+ @import "../tokens/colors";
3
+ @import "../tokens/shadows";
4
+
5
+ .pb_map {
6
+ font-family: $font_family_base !important;
7
+
8
+ }