playbook_ui 14.7.0.pre.rc.19 → 14.8.0.pre.alpha.PBNTR713dropdowncustomtriggerbug4696

Sign up to get free protection for your applications and to get access to all the features.
Files changed (90) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_card/docs/_card_light.md +1 -1
  4. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +2 -2
  5. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +0 -4
  6. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +84 -7
  7. data/app/pb_kits/playbook/pb_date/_date.scss +3 -0
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.html.erb +42 -0
  10. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.jsx +44 -0
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_default_date.md +1 -0
  12. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +17 -1
  15. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb +26 -0
  16. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md +7 -0
  17. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +38 -0
  18. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md +0 -0
  19. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +19 -0
  20. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -0
  21. data/app/pb_kits/playbook/pb_draggable/draggable.html.erb +3 -0
  22. data/app/pb_kits/playbook/pb_draggable/draggable.rb +18 -0
  23. data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb +3 -0
  24. data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +15 -0
  25. data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb +7 -0
  26. data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +18 -0
  27. data/app/pb_kits/playbook/pb_draggable/index.js +125 -0
  28. data/app/pb_kits/playbook/pb_drawer/_drawer.scss +88 -175
  29. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +79 -47
  30. data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +20 -16
  31. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -0
  32. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +0 -1
  33. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +0 -4
  34. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +13 -2
  35. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
  36. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
  37. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +63 -12
  38. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +2 -1
  39. data/app/pb_kits/playbook/pb_table/_table.tsx +103 -24
  40. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +87 -0
  41. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +2 -0
  42. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  43. data/app/pb_kits/playbook/pb_table/styles/_all.scss +2 -0
  44. data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +4 -0
  45. data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss +18 -0
  46. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +43 -1
  47. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +6 -2
  48. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +47 -0
  49. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +59 -0
  50. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb +94 -0
  51. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx +180 -0
  52. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md +1 -0
  53. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +5 -3
  54. data/app/pb_kits/playbook/pb_timeline/docs/index.js +2 -0
  55. data/app/pb_kits/playbook/pb_timeline/timeline.rb +11 -1
  56. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +4 -4
  57. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +3 -0
  58. data/app/pb_kits/playbook/pb_typeahead/index.ts +29 -3
  59. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +5 -2
  60. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +4 -0
  61. data/app/pb_kits/playbook/tokens/_height.scss +19 -0
  62. data/app/pb_kits/playbook/tokens/exports/_height.module.scss +37 -0
  63. data/app/pb_kits/playbook/utilities/_height.scss +33 -0
  64. data/app/pb_kits/playbook/utilities/_hover.scss +40 -27
  65. data/app/pb_kits/playbook/utilities/_max_width.scss +4 -0
  66. data/app/pb_kits/playbook/utilities/_min_width.scss +1 -1
  67. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
  68. data/app/pb_kits/playbook/utilities/globalProps.ts +29 -3
  69. data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js +79 -0
  70. data/dist/chunks/_typeahead-C8Q_fFYF.js +22 -0
  71. data/dist/chunks/_weekday_stacked-CUJfwh5E.js +45 -0
  72. data/dist/chunks/{lib-D-mTv-kp.js → lib-SyD3buPZ.js} +1 -1
  73. data/dist/chunks/{pb_form_validation-BkWGwJsl.js → pb_form_validation-Dt8UJgrJ.js} +1 -1
  74. data/dist/chunks/vendor.js +1 -1
  75. data/dist/menu.yml +322 -1
  76. data/dist/playbook-doc.js +1 -1
  77. data/dist/playbook-rails-react-bindings.js +1 -1
  78. data/dist/playbook-rails.js +1 -1
  79. data/dist/playbook.css +1 -1
  80. data/lib/playbook/classnames.rb +3 -0
  81. data/lib/playbook/forms/builder/typeahead_field.rb +13 -0
  82. data/lib/playbook/height.rb +29 -0
  83. data/lib/playbook/hover.rb +1 -1
  84. data/lib/playbook/kit_base.rb +16 -1
  85. data/lib/playbook/max_height.rb +29 -0
  86. data/lib/playbook/min_height.rb +29 -0
  87. data/lib/playbook/version.rb +2 -2
  88. metadata +35 -6
  89. data/dist/chunks/_typeahead-DhLic2Fe.js +0 -22
  90. data/dist/chunks/_weekday_stacked-Mx8TYP5I.js +0 -45
@@ -62,6 +62,65 @@ const TimelineWithChildren = (props) => (
62
62
  </Timeline.Detail>
63
63
  </Timeline.Item>
64
64
  </Timeline>
65
+
66
+ <br />
67
+ <br />
68
+ <br />
69
+
70
+ <Timeline orientation="vertical"
71
+ showDate
72
+ {...props}
73
+ >
74
+ <Timeline.Item lineStyle="solid"
75
+ {...props}
76
+ >
77
+ <Timeline.Label>
78
+ <Title size={4}
79
+ text='Any Kit'
80
+ />
81
+ </Timeline.Label>
82
+ <Timeline.Step icon="user"
83
+ iconColor="royal"
84
+ />
85
+ <Timeline.Detail>
86
+ <TitleDetail detail="37-27 74th Street"
87
+ title="Jackson Heights"
88
+ {...props}
89
+ />
90
+ </Timeline.Detail>
91
+ </Timeline.Item>
92
+
93
+ <Timeline.Item lineStyle="dotted"
94
+ {...props}
95
+ >
96
+ <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
97
+ <Timeline.Step icon="map-marker-alt"
98
+ iconColor="purple"
99
+ />
100
+ <Timeline.Detail>
101
+ <TitleDetail detail="72 E St Astoria"
102
+ title="Society Hill"
103
+ {...props}
104
+ />
105
+ </Timeline.Detail>
106
+ </Timeline.Item>
107
+
108
+ <Timeline.Item lineStyle="solid"
109
+ {...props}
110
+ >
111
+ <Timeline.Step>
112
+ <Pill text="3"
113
+ variant="success"
114
+ />
115
+ </Timeline.Step>
116
+ <Timeline.Detail>
117
+ <TitleDetail detail="81 Gate St Brooklyn"
118
+ title="Greenpoint"
119
+ {...props}
120
+ />
121
+ </Timeline.Detail>
122
+ </Timeline.Item>
123
+ </Timeline>
65
124
  </div>
66
125
  )
67
126
 
@@ -0,0 +1,94 @@
1
+ <%= pb_rails("flex", props: { justify: "evenly" }) do %>
2
+ <%= pb_rails("flex/flex_item") do %>
3
+ <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
4
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
5
+ <%= pb_rails("body", props: {
6
+ text: "Conversation started",
7
+ color: "light"
8
+ }) %>
9
+ <% end %>
10
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
11
+ <%= pb_rails("body", props: {
12
+ text: "Trip #12422",
13
+ color: "light"
14
+ }) %>
15
+ <% end %>
16
+ <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
17
+ <%= pb_rails("body", props: {
18
+ text: "Refund issue #12422",
19
+ color: "light"
20
+ }) %>
21
+ <% end %>
22
+ <% end %>
23
+ <% end %>
24
+
25
+ <%= pb_rails("flex/flex_item") do %>
26
+ <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
27
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
28
+ <%= pb_rails("body", props: {
29
+ text: "Conversation started",
30
+ color: "light"
31
+ }) %>
32
+ <% end %>
33
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
34
+ <%= pb_rails("body", props: {
35
+ text: "Trip #12422",
36
+ color: "light"
37
+ }) %>
38
+ <% end %>
39
+ <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
40
+ <%= pb_rails("body", props: {
41
+ text: "Refund issue #12422",
42
+ color: "light"
43
+ }) %>
44
+ <% end %>
45
+ <% end %>
46
+ <% end %>
47
+
48
+ <%= pb_rails("flex/flex_item") do %>
49
+ <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
50
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
51
+ <%= pb_rails("body", props: {
52
+ text: "Conversation started",
53
+ color: "light"
54
+ }) %>
55
+ <% end %>
56
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
57
+ <%= pb_rails("body", props: {
58
+ text: "Trip #12422",
59
+ color: "light"
60
+ }) %>
61
+ <% end %>
62
+ <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
63
+ <%= pb_rails("body", props: {
64
+ text: "Refund issue #12422",
65
+ color: "light"
66
+ }) %>
67
+ <% end %>
68
+ <% end %>
69
+ <% end %>
70
+
71
+ <%= pb_rails("flex/flex_item") do %>
72
+ <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
73
+ <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
74
+ <%= pb_rails("body", props: {
75
+ text: "Conversation started",
76
+ color: "light"
77
+ }) %>
78
+ <% end %>
79
+ <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
80
+ <%= pb_rails("body", props: {
81
+ text: "Trip #12422",
82
+ color: "light"
83
+ }) %>
84
+ <% end %>
85
+ <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
86
+ <%= pb_rails("body", props: {
87
+ text: "Refund issue #12422",
88
+ color: "light"
89
+ }) %>
90
+ <% end %>
91
+ <% end %>
92
+ <% end %>
93
+ <% end %>
94
+
@@ -0,0 +1,180 @@
1
+ import React from 'react'
2
+
3
+ import Timeline from '../_timeline'
4
+ import Flex from "../../pb_flex/_flex"
5
+ import FlexItem from "../../pb_flex/_flex_item"
6
+ import Body from '../../pb_body/_body'
7
+
8
+ const TimelineWithGap = (props) => (
9
+ <div>
10
+ <Flex justify="evenly">
11
+ <FlexItem>
12
+ <Timeline
13
+ gap="xs"
14
+ orientation="vertical"
15
+ >
16
+ <Timeline.Item
17
+ icon="user"
18
+ iconColor="royal"
19
+ {...props}
20
+ >
21
+ <Body
22
+ color="light"
23
+ text="Conversation started"
24
+ {...props}
25
+ />
26
+ </Timeline.Item>
27
+ <Timeline.Item
28
+ icon="check"
29
+ iconColor="teal"
30
+ lineStyle="dotted"
31
+ {...props}
32
+ >
33
+ <Body
34
+ color="light"
35
+ text="Trip #12422"
36
+ {...props}
37
+ />
38
+ </Timeline.Item>
39
+ <Timeline.Item
40
+ icon="credit-card"
41
+ iconColor="red"
42
+ {...props}
43
+ >
44
+ <Body
45
+ color="light"
46
+ text="Refund issue #12422"
47
+ {...props}
48
+ />
49
+ </Timeline.Item>
50
+ </Timeline>
51
+ </FlexItem>
52
+ <FlexItem>
53
+ <Timeline
54
+ gap="sm"
55
+ orientation="vertical"
56
+ >
57
+ <Timeline.Item
58
+ icon="user"
59
+ iconColor="royal"
60
+ {...props}
61
+ >
62
+ <Body
63
+ color="light"
64
+ text="Conversation started"
65
+ {...props}
66
+ />
67
+ </Timeline.Item>
68
+ <Timeline.Item
69
+ icon="check"
70
+ iconColor="teal"
71
+ lineStyle="dotted"
72
+ {...props}
73
+ >
74
+ <Body
75
+ color="light"
76
+ text="Trip #12422"
77
+ {...props}
78
+ />
79
+ </Timeline.Item>
80
+ <Timeline.Item
81
+ icon="credit-card"
82
+ iconColor="red"
83
+ {...props}
84
+ >
85
+ <Body
86
+ color="light"
87
+ text="Refund issue #12422"
88
+ {...props}
89
+ />
90
+ </Timeline.Item>
91
+ </Timeline>
92
+ </FlexItem>
93
+ <FlexItem>
94
+ <Timeline
95
+ gap="md"
96
+ orientation="vertical"
97
+ >
98
+ <Timeline.Item
99
+ icon="user"
100
+ iconColor="royal"
101
+ {...props}
102
+ >
103
+ <Body
104
+ color="light"
105
+ text="Conversation started"
106
+ {...props}
107
+ />
108
+ </Timeline.Item>
109
+ <Timeline.Item
110
+ icon="check"
111
+ iconColor="teal"
112
+ lineStyle="dotted"
113
+ {...props}
114
+ >
115
+ <Body
116
+ color="light"
117
+ text="Trip #12422"
118
+ {...props}
119
+ />
120
+ </Timeline.Item>
121
+ <Timeline.Item
122
+ icon="credit-card"
123
+ iconColor="red"
124
+ lineStyle="dotted"
125
+ {...props}
126
+ >
127
+ <Body
128
+ color="light"
129
+ text="Refund issue #12422"
130
+ {...props}
131
+ />
132
+ </Timeline.Item>
133
+ </Timeline>
134
+ </FlexItem>
135
+ <FlexItem>
136
+ <Timeline
137
+ gap="lg"
138
+ orientation="vertical"
139
+ >
140
+ <Timeline.Item
141
+ icon="user"
142
+ iconColor="royal"
143
+ {...props}
144
+ >
145
+ <Body
146
+ color="light"
147
+ text="Conversation started"
148
+ {...props}
149
+ />
150
+ </Timeline.Item>
151
+ <Timeline.Item
152
+ icon="check"
153
+ iconColor="teal"
154
+ lineStyle="dotted"
155
+ {...props}
156
+ >
157
+ <Body
158
+ color="light"
159
+ text="Trip #12422"
160
+ {...props}
161
+ />
162
+ </Timeline.Item>
163
+ <Timeline.Item
164
+ icon="credit-card"
165
+ iconColor="red"
166
+ {...props}
167
+ >
168
+ <Body
169
+ color="light"
170
+ text="Refund issue #12422"
171
+ {...props}
172
+ />
173
+ </Timeline.Item>
174
+ </Timeline>
175
+ </FlexItem>
176
+ </Flex>
177
+ </div>
178
+ )
179
+
180
+ export default TimelineWithGap
@@ -0,0 +1 @@
1
+ Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
@@ -1,14 +1,16 @@
1
1
  examples:
2
-
2
+
3
3
  rails:
4
4
  - timeline_default: Default
5
5
  - timeline_vertical: Vertical
6
6
  - timeline_with_date: With Date
7
7
  - timeline_with_children: With Children
8
-
9
-
8
+ - timeline_with_gap: With Gap
9
+
10
+
10
11
  react:
11
12
  - timeline_default: Default
12
13
  - timeline_vertical: Vertical
13
14
  - timeline_with_date: With Date
14
15
  - timeline_with_children: With Children
16
+ - timeline_with_gap: With Gap
@@ -2,3 +2,5 @@ export { default as TimelineDefault } from './_timeline_default.jsx'
2
2
  export { default as TimelineVertical } from './_timeline_vertical.jsx'
3
3
  export { default as TimelineWithDate } from './_timeline_with_date.jsx'
4
4
  export { default as TimelineWithChildren } from './_timeline_with_children.jsx'
5
+ export { default as TimelineWithGap } from './_timeline_with_gap.jsx'
6
+
@@ -8,9 +8,15 @@ module Playbook
8
8
  default: "horizontal"
9
9
  prop :show_date, type: Playbook::Props::Boolean,
10
10
  default: false
11
+ prop :gap, type: Playbook::Props::Enum,
12
+ values: %w[xs sm md lg none],
13
+ default: "none"
11
14
 
12
15
  def classname
13
- generate_classname("pb_timeline_kit", orientation, date_class)
16
+ generate_classname("pb_timeline_kit",
17
+ orientation,
18
+ date_class,
19
+ gap_class)
14
20
  end
15
21
 
16
22
  private
@@ -18,6 +24,10 @@ module Playbook
18
24
  def date_class
19
25
  show_date ? "with_date" : nil
20
26
  end
27
+
28
+ def gap_class
29
+ gap == "none" ? nil : "gap_#{gap}"
30
+ end
21
31
  end
22
32
  end
23
33
  end
@@ -147,26 +147,26 @@ test('should pass id prop', () => {
147
147
  test('should have horizontal orientation by default', () => {
148
148
  render(<TimelineDefault />)
149
149
  const kit = screen.getByTestId(testId)
150
- expect(kit).toHaveClass('pb_timeline_kit__horizontal')
150
+ expect(kit).toHaveClass('pb_timeline_kit_horizontal')
151
151
  })
152
152
 
153
153
  test('should pass vertical orientation', () => {
154
154
  const props = { orientation: 'vertical' }
155
155
  render(<TimelineDefault {...props} />)
156
156
  const kit = screen.getByTestId(testId)
157
- expect(kit).toHaveClass('pb_timeline_kit__vertical')
157
+ expect(kit).toHaveClass('pb_timeline_kit_vertical')
158
158
  })
159
159
 
160
160
  test('should pass showDate prop', () => {
161
161
  const props = { showDate: true }
162
162
  render(<TimelineDefault {...props} />)
163
163
  const kit = screen.getByTestId(testId)
164
- expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
164
+ expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
165
165
  })
166
166
 
167
167
  test('should pass showDate prop with Children', () => {
168
168
  const props = { showDate: true }
169
169
  render(<TimelineWithChildren {...props} />)
170
170
  const kit = screen.getByTestId(testId)
171
- expect(kit).toHaveClass('pb_timeline_kit__horizontal__with_date')
171
+ expect(kit).toHaveClass('pb_timeline_kit_horizontal__with_date')
172
172
  })
@@ -2,6 +2,7 @@
2
2
  @import "../tokens/border_radius";
3
3
  @import "../tokens/spacing";
4
4
  @import "../tokens/shadows";
5
+ @import "../tokens/positioning";
5
6
 
6
7
  [class^=pb_typeahead_kit] {
7
8
  .typeahead-kit-select__option {
@@ -99,6 +100,7 @@
99
100
  .typeahead-kit-select__menu {
100
101
  background-color: $bg_dark;
101
102
  color: $white;
103
+ z-index: $z_1;
102
104
  }
103
105
  .typeahead-kit-select__option:hover {
104
106
  background-color: $active_dark;
@@ -182,6 +184,7 @@
182
184
  }
183
185
 
184
186
  .typeahead-kit-select__menu {
187
+ z-index: $z_1;
185
188
  .typeahead-kit-select__menu-list {
186
189
  padding: 0;
187
190
  }
@@ -4,11 +4,12 @@ import { debounce } from 'lodash'
4
4
  export default class PbTypeahead extends PbEnhancedElement {
5
5
  _searchInput: HTMLInputElement
6
6
  _resultsElement: HTMLElement
7
- _debouncedSearch: Function
7
+ _debouncedSearch: () => void
8
8
  _resultsLoadingIndicator: HTMLElement
9
9
  _resultOptionTemplate: HTMLElement
10
10
  _resultsOptionCache: Map<string, Array<DocumentFragment>>
11
11
  _searchContext: string
12
+ _validSelection: boolean
12
13
 
13
14
  static get selector() {
14
15
  return '[data-pb-typeahead-kit]'
@@ -86,6 +87,9 @@ export default class PbTypeahead extends PbEnhancedElement {
86
87
  const resultOption = (event.target as Element).closest('[data-result-option-item]')
87
88
  if (!resultOption) return
88
89
 
90
+ this._validSelection = true
91
+ this.removeValidationError()
92
+
89
93
  this.resultsCacheClear()
90
94
  this.searchInputClear()
91
95
  this.clearResults()
@@ -93,6 +97,28 @@ export default class PbTypeahead extends PbEnhancedElement {
93
97
  this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
94
98
  }
95
99
 
100
+ removeValidationError() {
101
+ const inputWrapper = this.searchInput.closest('.text_input_wrapper')
102
+ if (inputWrapper) {
103
+ const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
104
+ if (errorMessage) {
105
+ errorMessage.style.display = 'none'
106
+ }
107
+ this.searchInput.classList.remove('error')
108
+ }
109
+ }
110
+
111
+ showValidationError() {
112
+ const inputWrapper = this.searchInput.closest('.text_input_wrapper')
113
+ if (inputWrapper) {
114
+ const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
115
+ if (errorMessage) {
116
+ errorMessage.style.display = 'block'
117
+ }
118
+ this.searchInput.classList.add('error')
119
+ }
120
+ }
121
+
96
122
  clearResults() {
97
123
  this.resultsElement.innerHTML = ''
98
124
  }
@@ -201,8 +227,8 @@ export default class PbTypeahead extends PbEnhancedElement {
201
227
  }
202
228
 
203
229
  toggleResultsLoadingIndicator(visible: boolean) {
204
- var visibilityProperty = '0'
230
+ let visibilityProperty = '0'
205
231
  if (visible) visibilityProperty = '1'
206
232
  this.resultsLoadingIndicator.style.opacity = visibilityProperty
207
233
  }
208
- }
234
+ }
@@ -17,11 +17,14 @@
17
17
  <%= pb_rails("text_input", props: {
18
18
  type: "search",
19
19
  input_options: object.input_options,
20
- label: object.label,
21
20
  name: object.name,
22
21
  value: object.value,
23
22
  placeholder: object.placeholder,
24
23
  margin_bottom: "none",
24
+ required: object.required,
25
+ validation: object.validation,
26
+ label: object.label,
27
+ id: object.input_options[:id],
25
28
  }) %>
26
29
  <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
27
30
  <% end %>
@@ -33,4 +36,4 @@
33
36
  <% end %>
34
37
  </template>
35
38
  <% end %>
36
- <% end %>
39
+ <% end %>
@@ -40,6 +40,10 @@ module Playbook
40
40
  prop :pill_color, type: Playbook::Props::Enum,
41
41
  values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
42
42
  default: "primary"
43
+ prop :required, type: Playbook::Props::Boolean,
44
+ default: false
45
+ prop :validation, type: Playbook::Props::HashProp,
46
+ default: {}
43
47
 
44
48
  def classname
45
49
  default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
@@ -0,0 +1,19 @@
1
+
2
+ $height_auto: auto !default;
3
+ $height_xs: 320px !default;
4
+ $height_sm: 480px !default;
5
+ $height_md: 768px !default;
6
+ $height_lg: 1024px !default;
7
+ $height_xl: 1280px !default;
8
+ $height_2xl: 1440px !default;
9
+ $height_3xl: 1920px !default;
10
+ $heights: (
11
+ height_auto: $height_auto,
12
+ height_xs: $height_xs,
13
+ height_sm: $height_sm,
14
+ height_md: $height_md,
15
+ height_lg: $height_lg,
16
+ height_xl: $height_xl,
17
+ height_xxl: $height_2xl,
18
+ height_xxxl: $height_3xl
19
+ );
@@ -0,0 +1,37 @@
1
+ @import "../height";
2
+
3
+ :export {
4
+ @mixin export_height($height_list) {
5
+ @each $name, $value in $height_list {
6
+ .#{$name} {
7
+ height: $value;
8
+ }
9
+ }
10
+ }
11
+
12
+ @include export_height($heights);
13
+ }
14
+
15
+ :export {
16
+ @mixin export_max_height($height_list) {
17
+ @each $name, $value in $height_list {
18
+ .max_#{$name} {
19
+ max-height: $value;
20
+ }
21
+ }
22
+ }
23
+
24
+ @include export_max_height($heights);
25
+ }
26
+
27
+ :export {
28
+ @mixin export_min_height($height_list) {
29
+ @each $name, $value in $height_list {
30
+ .min_#{$name} {
31
+ min-height: $value;
32
+ }
33
+ }
34
+ }
35
+
36
+ @include export_min_height($heights);
37
+ }
@@ -0,0 +1,33 @@
1
+ @import "../tokens/exports/height.module";
2
+
3
+ @mixin export_height($height_list) {
4
+ @each $name, $value in $height_list {
5
+ .#{$name} {
6
+ height: $value;
7
+ }
8
+ }
9
+ }
10
+
11
+ @mixin export_max_height($height_list) {
12
+ @each $name, $value in $height_list {
13
+ .max_#{$name} {
14
+ max-height: $value;
15
+ }
16
+ }
17
+ }
18
+
19
+ @mixin export_min_height($height_list) {
20
+ @each $name, $value in $height_list {
21
+ .min_#{$name} {
22
+ min-height: $value;
23
+ }
24
+ }
25
+ }
26
+
27
+ @include export_height($heights);
28
+ @include export_max_height($heights);
29
+ @include export_min_height($heights);
30
+
31
+ .height-resize {
32
+ resize: vertical;
33
+ }