playbook_ui 13.30.0 → 13.31.0.pre.alpha.PBNTR342navtabbing3230

Sign up to get free protection for your applications and to get access to all the features.
Files changed (88) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +59 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md +6 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +4 -4
  6. data/app/pb_kits/playbook/pb_button/_button.scss +3 -3
  7. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +3 -2
  8. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -1
  9. data/app/pb_kits/playbook/pb_card/_card.tsx +4 -3
  10. data/app/pb_kits/playbook/pb_collapsible/index.js +6 -1
  11. data/app/pb_kits/playbook/pb_dashboard/commonSettings.js +1 -1
  12. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -1
  13. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -1
  14. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md +33 -0
  15. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md +18 -0
  16. data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +6 -1
  17. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx +4 -1
  18. data/app/pb_kits/playbook/pb_draggable/_draggable.scss +2 -4
  19. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +84 -50
  20. data/app/pb_kits/playbook/pb_draggable/context/types.ts +31 -0
  21. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +15 -19
  22. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md +5 -3
  23. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +5 -1
  24. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +11 -4
  25. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md +8 -2
  26. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +2 -2
  27. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md +5 -1
  28. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +6 -4
  29. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md +5 -0
  30. data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +142 -15
  31. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +6 -5
  32. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +18 -0
  33. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +228 -218
  34. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +9 -0
  35. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +34 -0
  36. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -0
  37. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
  38. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +16 -12
  39. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +9 -0
  40. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +17 -2
  41. data/app/pb_kits/playbook/pb_dropdown/index.js +33 -4
  42. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -3
  43. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.html.erb +32 -0
  44. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.jsx +48 -0
  45. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
  46. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
  47. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +16 -11
  48. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js +72 -0
  49. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +9 -0
  50. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +1 -1
  51. data/app/pb_kits/playbook/pb_icon/_icon.tsx +37 -6
  52. data/app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb +1 -1
  53. data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx +2 -3
  54. data/app/pb_kits/playbook/pb_icon/icon.rb +21 -1
  55. data/app/pb_kits/playbook/pb_icon/icon_aliases.json +39 -0
  56. data/app/pb_kits/playbook/pb_list/_list.tsx +4 -4
  57. data/app/pb_kits/playbook/pb_list/_list_item.tsx +7 -3
  58. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +1 -1
  59. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +1 -0
  60. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +3 -1
  61. data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb +12 -0
  62. data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.md +0 -0
  63. data/app/pb_kits/playbook/pb_nav/docs/example.yml +1 -0
  64. data/app/pb_kits/playbook/pb_nav/index.js +43 -0
  65. data/app/pb_kits/playbook/pb_nav/item.html.erb +1 -1
  66. data/app/pb_kits/playbook/pb_nav/item.rb +1 -0
  67. data/app/pb_kits/playbook/pb_nav/nav.rb +9 -0
  68. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb +24 -0
  69. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +4 -4
  70. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb +11 -0
  71. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -0
  72. data/app/pb_kits/playbook/pb_overlay/overlay.html.erb +27 -0
  73. data/app/pb_kits/playbook/pb_overlay/overlay.rb +110 -0
  74. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +8 -23
  75. data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +7 -3
  76. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +3 -3
  77. data/app/pb_kits/playbook/pb_table/table_header.html.erb +16 -2
  78. data/app/pb_kits/playbook/pb_timeline/_item.tsx +11 -10
  79. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +8 -6
  80. data/app/pb_kits/playbook/playbook-rails.js +3 -0
  81. data/app/pb_kits/playbook/tokens/_titles.scss +4 -4
  82. data/app/pb_kits/playbook/tokens/_typography.scss +10 -10
  83. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -0
  84. data/dist/menu.yml +566 -472
  85. data/dist/playbook-rails.js +7 -7
  86. data/dist/reset.css +1 -1
  87. data/lib/playbook/version.rb +2 -2
  88. metadata +24 -5
@@ -36,29 +36,32 @@ const DraggableWithCards = (props) => {
36
36
  >
37
37
  <Draggable.Container {...props}>
38
38
  {initialState.map(({ id, text }) => (
39
- <Card
39
+ <Card dragId={id}
40
40
  draggableItem
41
41
  highlight={{ color: "primary", position: "side" }}
42
- id={id}
43
42
  key={id}
44
43
  marginBottom="xs"
45
44
  padding="xs"
45
+ {...props}
46
46
  >
47
47
  <Flex alignItems="stretch"
48
48
  flexDirection="column"
49
49
  >
50
50
  <Flex gap="xs">
51
51
  <Title size={4}
52
- text={text}
52
+ text={text}
53
+ {...props}
53
54
  />
54
55
  <Badge
55
56
  text="35-12345"
56
57
  variant="primary"
58
+ {...props}
57
59
  />
58
60
  </Flex>
59
61
  <Caption
60
62
  size="xs"
61
63
  text="8:00A • Township Name • 90210"
64
+ {...props}
62
65
  />
63
66
  <Flex gap="xxs"
64
67
  spacing="between"
@@ -66,6 +69,7 @@ const DraggableWithCards = (props) => {
66
69
  <Flex gap="xxs">
67
70
  <Caption color="error"
68
71
  size="xs"
72
+ {...props}
69
73
  >
70
74
  <Icon icon="house-circle-exclamation" />
71
75
  </Caption>
@@ -78,14 +82,17 @@ const DraggableWithCards = (props) => {
78
82
  <Badge rounded
79
83
  text="Schedule QA"
80
84
  variant="warning"
85
+ {...props}
81
86
  />
82
87
  <Badge rounded
83
88
  text="Flex"
84
- variant="primary"
89
+ variant="primary"
90
+ {...props}
85
91
  />
86
92
  <Badge rounded
87
93
  text="R99"
88
94
  variant="primary"
95
+ {...props}
89
96
  />
90
97
  </Flex>
91
98
  </Flex>
@@ -1,3 +1,9 @@
1
- For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop on Card. The dragHandle is added by default but this can be opted out off by setting `dragHandle` to false on the Card kit.
1
+ For a simplified version of the Draggable API for the Card kit, you can do the following:
2
+
3
+ Use `DraggableProvider` and manage state as shown.
4
+
5
+ `Draggable.Container` creates the container within which the cards can be dragged and dropped.
6
+
7
+ The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
8
+
2
9
 
3
- The dev must manage state as shown and pass in id to the Card for dragging to work.
@@ -30,11 +30,11 @@ const DraggableWithList = (props) => {
30
30
  <DraggableProvider initialItems={data}
31
31
  onReorder={(items) => setInitialState(items)}
32
32
  >
33
- <List draggable
33
+ <List enableDrag
34
34
  {...props}
35
35
  >
36
36
  {initialState.map(({ id, text }) => (
37
- <ListItem id={id}
37
+ <ListItem dragId={id}
38
38
  key={id}
39
39
  >
40
40
  {text}
@@ -1 +1,5 @@
1
- For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem for dragging to work.
1
+ For a simplified version of the Draggable API for the List kit, you can do the following:
2
+
3
+ Use `DraggableProvider` and manage state as shown.
4
+
5
+ The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.
@@ -29,16 +29,18 @@ const DraggableWithSelectableList = (props) => {
29
29
  <DraggableProvider initialItems={data}
30
30
  onReorder={(items) => setInitialState(items)}
31
31
  >
32
- <SelectableList draggable
33
- variant="checkbox"
32
+ <SelectableList enableDrag
33
+ variant="radio"
34
34
  {...props}
35
35
  >
36
36
  {initialState.map(({ id, text }) => (
37
- <SelectableList.Item id={id}
37
+ <SelectableList.Item
38
+ dragId={id}
38
39
  key={id}
39
40
  label={text}
40
- name={id}
41
+ name="radio-test"
41
42
  value={id}
43
+ {...props}
42
44
  />
43
45
  ))}
44
46
  </SelectableList>
@@ -0,0 +1,5 @@
1
+ For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
2
+
3
+ Use `DraggableProvider` and manage state as shown.
4
+
5
+ The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
@@ -1,9 +1,16 @@
1
- import React, {useState} from "react"
2
- import { render, screen } from "../utilities/test-utils"
1
+ import React, { useState } from "react";
2
+ import { render, screen } from "../utilities/test-utils";
3
3
 
4
- import { Draggable, DraggableProvider, SelectableList } from '../'
4
+ import {
5
+ Draggable,
6
+ DraggableProvider,
7
+ SelectableList,
8
+ List,
9
+ ListItem,
10
+ Card,
11
+ } from "../";
5
12
 
6
- const testId = 'draggable'
13
+ const testId = "draggable";
7
14
 
8
15
  const data = [
9
16
  {
@@ -24,7 +31,6 @@ const data = [
24
31
  },
25
32
  ];
26
33
 
27
-
28
34
  const DefaultDraggableKit = () => {
29
35
  const [initialState, setInitialState] = useState(data);
30
36
 
@@ -33,13 +39,11 @@ const DefaultDraggableKit = () => {
33
39
  initialItems={data}
34
40
  onReorder={(items) => setInitialState(items)}
35
41
  >
36
- <Draggable
37
- data={{ testid: testId }}
38
- >
42
+ <Draggable data={{ testid: testId }}>
39
43
  <Draggable.Container>
40
44
  <SelectableList variant="checkbox">
41
45
  {initialState.map(({ id, text }) => (
42
- <Draggable.Item id={id}
46
+ <Draggable.Item dragId={id}
43
47
  key={id}
44
48
  >
45
49
  <SelectableList.Item label={text}
@@ -55,9 +59,132 @@ const DefaultDraggableKit = () => {
55
59
  );
56
60
  };
57
61
 
58
- test('generated default kit and classname', () => {
59
- render(<DefaultDraggableKit/>)
60
- const kit = screen.getByTestId(testId)
61
- expect(kit).toBeInTheDocument()
62
- expect(kit).toHaveClass('pb_draggable')
63
- })
62
+ const DraggableKitWithList = () => {
63
+ const [initialState, setInitialState] = useState(data);
64
+ return (
65
+ <div data-testid="draggable">
66
+ <DraggableProvider
67
+ initialItems={data}
68
+ onReorder={(items) => setInitialState(items)}
69
+ >
70
+ <List enableDrag>
71
+ {initialState.map(({ id, text }) => (
72
+ <ListItem dragId={id}
73
+ key={id}
74
+ >
75
+ {text}
76
+ </ListItem>
77
+ ))}
78
+ </List>
79
+ </DraggableProvider>
80
+ </div>
81
+ );
82
+ };
83
+
84
+ const DraggableKitWithSelectableList = () => {
85
+ const [initialState, setInitialState] = useState(data);
86
+ return (
87
+ <div data-testid="draggable">
88
+ <DraggableProvider
89
+ initialItems={data}
90
+ onReorder={(items) => setInitialState(items)}
91
+ >
92
+ <SelectableList enableDrag>
93
+ {initialState.map(({ id, text }) => (
94
+ <SelectableList.Item
95
+ dragId={id}
96
+ key={id}
97
+ label={text}
98
+ name={id}
99
+ value={id}
100
+ />
101
+ ))}
102
+ </SelectableList>
103
+ </DraggableProvider>
104
+ </div>
105
+ );
106
+ };
107
+
108
+ const DraggableKitWithCard = () => {
109
+ const [initialState, setInitialState] = useState(data);
110
+ return (
111
+ <div data-testid="draggable">
112
+ <DraggableProvider
113
+ initialItems={data}
114
+ onReorder={(items) => setInitialState(items)}
115
+ >
116
+ <Draggable.Container>
117
+ {initialState.map(({ id, text }) => (
118
+ <Card dragId={id}
119
+ draggableItem
120
+ key={id}
121
+ >
122
+ {text}
123
+ </Card>
124
+ ))}
125
+ </Draggable.Container>
126
+ </DraggableProvider>
127
+ </div>
128
+ );
129
+ };
130
+
131
+ test("generated default kit and classname", () => {
132
+ render(<DefaultDraggableKit />);
133
+ const kit = screen.getByTestId(testId);
134
+ expect(kit).toBeInTheDocument();
135
+ expect(kit).toHaveClass("pb_draggable");
136
+ });
137
+
138
+ test("generated Draggable Container", () => {
139
+ render(<DefaultDraggableKit />);
140
+ const kit = screen.getByTestId(testId);
141
+
142
+ const container = kit.querySelector(".pb_draggable_container");
143
+ expect(container).toBeInTheDocument();
144
+ });
145
+
146
+ test("generated Draggable Item", () => {
147
+ render(<DefaultDraggableKit />);
148
+ const kit = screen.getByTestId(testId);
149
+
150
+ const item = kit.querySelector(".pb_draggable_item");
151
+ expect(item).toBeInTheDocument();
152
+ });
153
+
154
+ test("Attached draggable HTML attributes", () => {
155
+ render(<DefaultDraggableKit />);
156
+ const kit = screen.getByTestId(testId);
157
+
158
+ const item = kit.querySelector(".pb_draggable_item");
159
+ expect(item).toHaveAttribute("draggable");
160
+ });
161
+
162
+ test("generated dragHandle with List", () => {
163
+ render(<DraggableKitWithList />);
164
+ const kit = screen.getByTestId(testId);
165
+
166
+ const list = kit.querySelector(".pb_list_kit");
167
+ expect(list).toBeInTheDocument();
168
+ const dragHandle = list.querySelector(".fa-grip-dots-vertical");
169
+ expect(dragHandle).toBeInTheDocument();
170
+ });
171
+
172
+ test("generated dragHandle with SelectableList", () => {
173
+ render(<DraggableKitWithSelectableList />);
174
+ const kit = screen.getByTestId(testId);
175
+
176
+ const selectabellist = kit.querySelector(".pb_selectable_list_kit");
177
+ expect(selectabellist).toBeInTheDocument();
178
+ const dragHandle = selectabellist.querySelector(".fa-grip-dots-vertical");
179
+ expect(dragHandle).toBeInTheDocument();
180
+ });
181
+
182
+ test("generated dragHandle with Card", () => {
183
+ render(<DraggableKitWithCard />);
184
+ const kit = screen.getByTestId(testId);
185
+
186
+ const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
187
+ expect(card).toBeInTheDocument();
188
+ const dragHandle = card.querySelector(".fa-grip-dots-vertical");
189
+ expect(dragHandle).toBeInTheDocument();
190
+ });
@@ -17,10 +17,11 @@ type DraggableItemProps = {
17
17
  data?: { [key: string]: string };
18
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
19
  id?: string;
20
+ dragId?: string;
20
21
  };
21
22
 
22
23
  const DraggableItem = (props: DraggableItemProps) => {
23
- const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
24
+ const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, dragId } = props;
24
25
 
25
26
  const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
26
27
  DraggableContext();
@@ -31,7 +32,7 @@ const DraggableItem = (props: DraggableItemProps) => {
31
32
 
32
33
  const classes = classnames(
33
34
  buildCss("pb_draggable_item"),
34
- `${isDragging === id ? "is_dragging" : ""}`,
35
+ `${isDragging === dragId ? "is_dragging" : ""}`,
35
36
  globalProps(props),
36
37
  className
37
38
  );
@@ -44,10 +45,10 @@ const DraggableItem = (props: DraggableItemProps) => {
44
45
  className={classes}
45
46
  draggable
46
47
  id={id}
47
- key={id}
48
+ key={dragId}
48
49
  onDragEnd={() => handleDragEnd()}
49
- onDragEnter={() => handleDragEnter(id, container)}
50
- onDragStart={() => handleDragStart(id, container)}
50
+ onDragEnter={() => handleDragEnter(dragId, container)}
51
+ onDragStart={() => handleDragStart(dragId, container)}
51
52
  >
52
53
  {children}
53
54
  </div>
@@ -96,6 +96,7 @@
96
96
  width: 100%;
97
97
  }
98
98
  }
99
+
99
100
  .close {
100
101
  display: none;
101
102
  animation-name: fadeOut;
@@ -111,6 +112,17 @@
111
112
  animation-timing-function: linear;
112
113
  animation-fill-mode: forwards;
113
114
  }
115
+
116
+ &.error {
117
+ [class*=pb_body_kit] {
118
+ margin-top: $space_xs / 2;
119
+ }
120
+
121
+ [class*="dropdown_trigger_wrapper"] {
122
+ border-color: $error;
123
+ box-shadow: none !important;
124
+ }
125
+ }
114
126
  }
115
127
 
116
128
  &.dark {
@@ -138,6 +150,12 @@
138
150
  color: $white;
139
151
  }
140
152
  }
153
+
154
+ &.error {
155
+ [class*="dropdown_trigger_wrapper"] {
156
+ border-color: $error_dark;
157
+ }
158
+ }
141
159
  }
142
160
  .pb_dropdown_container {
143
161
  background-color: $bg_dark !important;