playbook_ui_docs 16.1.0.pre.alpha.PLAY276713921 → 16.1.0.pre.alpha.PLAY276913866

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 (38) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md +1 -0
  3. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -6
  4. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -4
  5. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -2
  6. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +9 -16
  7. data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +0 -1
  8. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +5 -5
  9. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +4 -4
  10. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +0 -1
  11. data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +0 -2
  12. data/app/pb_kits/playbook/pb_passphrase/docs/index.js +0 -1
  13. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +0 -2
  14. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
  15. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb +3 -3
  16. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx +0 -3
  17. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb +1 -1
  18. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
  19. metadata +3 -21
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md +0 -3
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md +0 -3
  22. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb +0 -52
  23. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx +0 -72
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md +0 -5
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx +0 -33
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb +0 -20
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md +0 -8
  28. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md +0 -8
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb +0 -9
  30. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx +0 -33
  31. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md +0 -3
  32. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb +0 -7
  33. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx +0 -24
  34. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md +0 -3
  35. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb +0 -5
  36. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx +0 -14
  37. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md +0 -3
  38. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f4b9d2c66823a21f72e9e3ec8c484af1b69578572b12c7f5625097157cf92321
4
- data.tar.gz: 6f094e1df256d71c194209f4598baf7df18aec5f7786ce7432a708f7c40712d0
3
+ metadata.gz: e55b8a5d61e60fca3fa3389d212520db49fe0d4fb7a53169e8a5c8bc33ae0683
4
+ data.tar.gz: 2378b703c315b159eeacc1a17ede32f32ac27129582ca92c8d2384087fd39d1a
5
5
  SHA512:
6
- metadata.gz: 344a2f7e22e5b3a74d7f5792c3006d0fdd46937b303dde3caf488d5633f283bb18ae5ccf595b6bcf0b0a190b70d9e9af7572ec339e8c8e252ad17cb417037bf3
7
- data.tar.gz: b5571946048c12196cd674fb67e7c216581a23a20eb2764beaba942f1fa8dcec3fc12ee18450b7b8e00d878279e00ba1b87c1c05e1510bc2cc0b3a51d4ee0fad
6
+ metadata.gz: 49d4b90d0558deaf3b7e5423b6603adcf33e32ce524fd876906e1cce58e3f1fcf35f080609b6b5ff7186e876fb86b55aa03c6eeb27b574e2c8f14f092abf2e5a
7
+ data.tar.gz: 19697a27c0179f148de23ef8518ca3a9d86b87dfa894c1005948ae88af03141927f3a8e0a9756c640c7665a099f11aa5f657fb359df422bf9f5c266c2f0d6b55
data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md ADDED
@@ -0,0 +1 @@
1
+ Add a `pickerId` to your Date Picker so that clicking the label will move focus directly to the input.
data/app/pb_kits/playbook/pb_dropdown/docs/example.yml CHANGED
@@ -21,10 +21,7 @@ examples:
21
21
  - dropdown_default_value: Default Value
22
22
  - dropdown_multi_select_with_default: Multi Select Default Value
23
23
  - dropdown_blank_selection: Blank Selection
24
- - dropdown_with_placeholder: Placeholder
25
24
  - dropdown_separators_hidden: Separators Hidden
26
- - dropdown_with_clearable: Clearable
27
- - dropdown_with_constrain_height_rails: Constrain Height
28
25
  - dropdown_quickpick_rails: Quick Pick Variant
29
26
  - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
30
27
  - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
@@ -55,10 +52,7 @@ examples:
55
52
  - dropdown_default_value: Default Value
56
53
  - dropdown_multi_select_with_default: Multi Select Default Value
57
54
  - dropdown_blank_selection: Blank Selection
58
- - dropdown_with_placeholder: Placeholder
59
55
  - dropdown_clear_selection: Clear Selection
60
- - dropdown_with_clearable: Clearable
61
- - dropdown_with_constrain_height: Constrain Height
62
56
  - dropdown_separators_hidden: Separators Hidden
63
57
  - dropdown_with_external_control: useDropdown Hook
64
58
  - dropdown_quickpick: Quick Pick Variant
data/app/pb_kits/playbook/pb_dropdown/docs/index.js CHANGED
@@ -11,7 +11,6 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
11
11
  export { default as DropdownError } from './_dropdown_error.jsx'
12
12
  export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
13
13
  export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
14
- export { default as DropdownWithPlaceholder } from './_dropdown_with_placeholder.jsx'
15
14
  export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
16
15
  export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
17
16
  export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
@@ -28,6 +27,4 @@ export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
28
27
  export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
29
28
  export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
30
29
  export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
31
- export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
32
- export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
33
- export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
30
+ export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb CHANGED
@@ -1,7 +1,7 @@
1
1
  <%=
2
2
  pb_rails("filter", props: {
3
3
  min_width: "360px",
4
- id: "filter-demo-1",
4
+ id: "1",
5
5
  margin_bottom: "xl",
6
6
  filters: [
7
7
  { name: "name", value: "John Wick" },
@@ -44,7 +44,7 @@
44
44
  <%=
45
45
  pb_rails("filter", props: {
46
46
  min_width: "360px",
47
- id: "filter-demo-2",
47
+ id: "def2",
48
48
  sort_menu: [
49
49
  { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
50
50
  { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react'
1
+ import React from 'react'
2
2
 
3
3
  import Button from '../../pb_button/_button'
4
4
  import Filter from '../../pb_filter/_filter'
@@ -6,18 +6,11 @@ import Flex from '../../pb_flex/_flex'
6
6
  import Select from '../../pb_select/_select'
7
7
  import TextInput from '../../pb_text_input/_text_input'
8
8
 
9
- const FilterDefault = (props) => {
10
- const [sortValue, setSortValue] = useState([{ name: 'popularity', dir: 'desc' }])
11
- const [sortValue2, setSortValue2] = useState([{ name: 'popularity', dir: 'desc' }])
12
-
13
- const handleSortChange = (sortOptions) => {
14
- setSortValue(sortOptions)
15
- alert(JSON.stringify(sortOptions[0]))
16
- }
9
+ const SortingChangeCallback = (sortOptions) => {
10
+ alert(JSON.stringify(sortOptions[0]))
11
+ }
17
12
 
18
- const handleSortChange2 = (sortOptions) => {
19
- setSortValue2(sortOptions)
20
- }
13
+ const FilterDefault = (props) => {
21
14
  const options = [
22
15
  { value: 'USA' },
23
16
  { value: 'Canada' },
@@ -36,7 +29,7 @@ const FilterDefault = (props) => {
36
29
  }}
37
30
  marginBottom="xl"
38
31
  minWidth="375px"
39
- onSortChange={handleSortChange}
32
+ onSortChange={SortingChangeCallback}
40
33
  results={1}
41
34
  sortOptions={{
42
35
  popularity: 'Popularity',
@@ -45,7 +38,7 @@ const FilterDefault = (props) => {
45
38
  // eslint-disable-next-line
46
39
  manager_name: 'Manager\'s Name',
47
40
  }}
48
- sortValue={sortValue}
41
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
49
42
  {...props}
50
43
  >
51
44
  {({ closePopover }) => (
@@ -89,7 +82,7 @@ const FilterDefault = (props) => {
89
82
  <Filter
90
83
  double
91
84
  minWidth="375px"
92
- onSortChange={handleSortChange2}
85
+ onSortChange={SortingChangeCallback}
93
86
  results={0}
94
87
  sortOptions={{
95
88
  popularity: 'Popularity',
@@ -98,7 +91,7 @@ const FilterDefault = (props) => {
98
91
  // eslint-disable-next-line
99
92
  manager_name: 'Manager\'s Name',
100
93
  }}
101
- sortValue={sortValue2}
94
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
102
95
  {...props}
103
96
  >
104
97
  {({ closePopover }) => (
data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb CHANGED
@@ -8,7 +8,6 @@
8
8
  <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
9
9
  <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
10
10
  <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
11
- <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
12
11
 
13
12
  <%= form.actions do |action| %>
14
13
  <%= action.submit %>
data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb CHANGED
@@ -15,7 +15,7 @@
15
15
  options: names,
16
16
  label: "Truncation Within Typeahead",
17
17
  pills: true,
18
- truncate: "1",
18
+ truncate: 1,
19
19
  }) %>
20
20
 
21
21
  <%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
@@ -24,19 +24,19 @@
24
24
  name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
25
25
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
26
26
  tabindex: 0,
27
- truncate: "1",
27
+ truncate: 1,
28
28
  id: "truncation-1"
29
29
  }) %>
30
30
  <%= pb_rails("form_pill", props: {
31
31
  icon: "badge-check",
32
32
  text: "icon and a very long tag to show truncation",
33
33
  tabindex: 0,
34
- truncate: "1",
34
+ truncate: 1,
35
35
  id: "truncation-2"
36
36
  }) %>
37
37
  <%= pb_rails("form_pill", props: {
38
38
  text: "form pill long tag no tooltip show truncation",
39
39
  tabindex: 0,
40
- truncate: "1",
40
+ truncate: 1,
41
41
  }) %>
42
- <% end %>
42
+ <% end %>
data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx CHANGED
@@ -21,7 +21,7 @@ const FormPillTruncatedText = (props) => {
21
21
  isMulti
22
22
  label="Truncation Within Typeahead"
23
23
  options={names}
24
- truncate={"1"}
24
+ truncate={1}
25
25
  {...props}
26
26
  />
27
27
  <Caption text="Form Pill Truncation"/>
@@ -31,20 +31,20 @@ const FormPillTruncatedText = (props) => {
31
31
  name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
32
32
  onClick={() => alert('Click!')}
33
33
  tabIndex={0}
34
- truncate={"1"}
34
+ truncate={1}
35
35
  />
36
36
  <FormPill
37
37
  icon="badge-check"
38
38
  onClick={() => {alert('Click!')}}
39
39
  tabIndex={0}
40
40
  text="icon and a very long tag to show truncation"
41
- truncate={"1"}
41
+ truncate={1}
42
42
  />
43
43
  <FormPill
44
44
  onClick={() => {alert('Click!')}}
45
45
  tabIndex={0}
46
46
  text="form pill with a very long tag to show truncation"
47
- truncate={"1"}
47
+ truncate={1}
48
48
  />
49
49
  </Card>
50
50
  </>
data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx CHANGED
@@ -120,7 +120,6 @@ const PassphraseMeterSettings = (props) => {
120
120
  "These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings."
121
121
  }
122
122
  </Body>
123
- <br/>
124
123
  <Passphrase
125
124
  label={"Type your passphrase"}
126
125
  onChange={handleChange}
data/app/pb_kits/playbook/pb_passphrase/docs/example.yml CHANGED
@@ -9,7 +9,6 @@ examples:
9
9
  - passphrase_strength_change: Strength Change
10
10
  - passphrase_common: Common Passphrases
11
11
  - passphrase_breached: Breached Passphrases
12
- - passphrase_required_indicator: Required Indicator
13
12
 
14
13
  react:
15
14
  - passphrase_default: Default
@@ -20,4 +19,3 @@ examples:
20
19
  - passphrase_strength_change: Strength Change
21
20
  - passphrase_common: Common Passphrases
22
21
  - passphrase_breached: Breached Passphrases
23
- - passphrase_required_indicator: Required Indicator
data/app/pb_kits/playbook/pb_passphrase/docs/index.js CHANGED
@@ -6,4 +6,3 @@ export { default as PassphraseTips } from './_passphrase_tips'
6
6
  export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
7
7
  export { default as PassphraseCommon } from './_passphrase_common'
8
8
  export { default as PassphraseBreached } from './_passphrase_breached'
9
- export { default as PassphraseRequiredIndicator } from './_passphrase_required_indicator.jsx'
data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml CHANGED
@@ -12,7 +12,6 @@ examples:
12
12
  - phone_number_input_format: Format as You Type
13
13
  - phone_number_input_strict_mode: Strict Mode
14
14
  - phone_number_input_country_search: Country Search
15
- - phone_number_input_required_indicator: Required Indicator
16
15
 
17
16
  rails:
18
17
  - phone_number_input_default: Default
@@ -25,4 +24,3 @@ examples:
25
24
  - phone_number_input_strict_mode: Strict Mode
26
25
  - phone_number_input_hidden_inputs: Hidden Inputs
27
26
  - phone_number_input_country_search: Country Search
28
- - phone_number_input_required_indicator: Required Indicator
data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js CHANGED
@@ -9,4 +9,3 @@ export { default as PhoneNumberInputAccessInputElement } from './_phone_number_i
9
9
  export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
10
10
  export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
11
11
  export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
12
- export { default as PhoneNumberInputRequiredIndicator } from './_phone_number_input_required_indicator.jsx'
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, id: "default-example-1" }) %>
1
+ <%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
2
2
 
3
3
  <br/>
4
4
 
5
- <%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
5
+ <%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
6
6
 
7
7
  <br/>
8
8
 
9
- <%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>
9
+ <%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>
data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx CHANGED
@@ -13,7 +13,6 @@ const TextareaDefault = (props) => {
13
13
  label="Label"
14
14
  rows={4}
15
15
  {...props}
16
- id="default-example-1"
17
16
  />
18
17
 
19
18
  <br />
@@ -22,7 +21,6 @@ const TextareaDefault = (props) => {
22
21
  label="Label"
23
22
  placeholder="Placeholder text"
24
23
  {...props}
25
- id="default-example-2"
26
24
  />
27
25
 
28
26
  <br />
@@ -34,7 +32,6 @@ const TextareaDefault = (props) => {
34
32
  placeholder="Placeholder text"
35
33
  value={value}
36
34
  {...props}
37
- id="default-example-3"
38
35
  />
39
36
 
40
37
  </div>
data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb CHANGED
@@ -15,5 +15,5 @@
15
15
  options: names,
16
16
  label: "Truncation Within Typeahead",
17
17
  pills: true,
18
- truncate: "1",
18
+ truncate: 1,
19
19
  }) %>
data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx CHANGED
@@ -17,7 +17,7 @@ const TypeaheadTruncatedText = (props) => {
17
17
  isMulti
18
18
  label="Truncation Within Typeahead"
19
19
  options={names}
20
- truncate={"1"}
20
+ truncate={1}
21
21
  {...props}
22
22
  />
23
23
  </>
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 16.1.0.pre.alpha.PLAY276713921
4
+ version: 16.1.0.pre.alpha.PLAY276913866
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2026-01-28 00:00:00.000000000 Z
12
+ date: 2026-01-27 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -576,6 +576,7 @@ files:
576
576
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
577
577
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
578
578
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
579
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
579
580
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
580
581
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
581
582
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
@@ -840,8 +841,6 @@ files:
840
841
  - app/pb_kits/playbook/pb_draggable/docs/index.js
841
842
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
842
843
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
843
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md
844
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md
845
844
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
846
845
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
847
846
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
@@ -903,13 +902,6 @@ files:
903
902
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
904
903
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
905
904
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
906
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb
907
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx
908
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md
909
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx
910
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb
911
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md
912
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md
913
905
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
914
906
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
915
907
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
@@ -940,9 +932,6 @@ files:
940
932
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
941
933
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
942
934
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
943
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb
944
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx
945
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md
946
935
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
947
936
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
948
937
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
@@ -1627,9 +1616,6 @@ files:
1627
1616
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
1628
1617
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
1629
1618
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
1630
- - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb
1631
- - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx
1632
- - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md
1633
1619
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
1634
1620
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
1635
1621
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
@@ -1793,9 +1779,6 @@ files:
1793
1779
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
1794
1780
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
1795
1781
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
1796
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb
1797
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx
1798
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md
1799
1782
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
1800
1783
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
1801
1784
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
@@ -2343,7 +2326,6 @@ files:
2343
2326
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
2344
2327
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
2345
2328
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
2346
- - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
2347
2329
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
2348
2330
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
2349
2331
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md DELETED
@@ -1,3 +0,0 @@
1
- The `blank_selection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
2
-
3
- The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md DELETED
@@ -1,3 +0,0 @@
1
- The `blankSelection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
2
-
3
- The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb DELETED
@@ -1,52 +0,0 @@
1
- <%
2
- options = [
3
- { label: 'United States', value: 'unitedStates', id: 'us' },
4
- { label: 'Canada', value: 'canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'pakistan', id: 'pk' },
6
- ]
7
- %>
8
-
9
- <%= pb_rails("dropdown", props: {
10
- id: "date-range-quickpick-reset-closeable",
11
- label: "Quick Pick",
12
- variant: "quickpick",
13
- clearable: false
14
- }) %>
15
-
16
- <%= pb_rails("button", props: {
17
- margin_y: "md",
18
- text: "Reset",
19
- html_options: {
20
- onclick: "handleReset()"
21
- }
22
- }) %>
23
-
24
- <%= pb_rails("dropdown", props: {
25
- id: "closeable-default",
26
- options: options,
27
- clearable: false,
28
- default_value: options.last,
29
- margin_bottom: "md",
30
- label: "Default"
31
- }) %>
32
-
33
- <%= pb_rails("dropdown", props: {
34
- id: "closeable-subtle",
35
- options: options,
36
- clearable: false,
37
- default_value: options.second,
38
- variant: "subtle",
39
- separators: false,
40
- label: "Subtle"
41
- }) %>
42
-
43
- <script>
44
- function handleReset() {
45
- const dropdown = document.querySelector("#date-range-quickpick-reset-closeable[data-pb-dropdown]");
46
- const instance = dropdown?._pbDropdownInstance;
47
-
48
- if (instance) {
49
- instance.clearSelection();
50
- }
51
- }
52
- </script>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx DELETED
@@ -1,72 +0,0 @@
1
- import React, { useRef } from 'react'
2
-
3
- import Button from '../../pb_button/_button'
4
- import Dropdown from '../../pb_dropdown/_dropdown'
5
-
6
- const DropdownWithClearable = (props) => {
7
- const dropdownRef = useRef(null)
8
-
9
- const options = [
10
- {
11
- label: "United States",
12
- value: "unitedStates",
13
- id: "us"
14
- },
15
- {
16
- label: "Canada",
17
- value: "canada",
18
- id: "ca"
19
- },
20
- {
21
- label: "Pakistan",
22
- value: "pakistan",
23
- id: "pk"
24
- }
25
- ]
26
-
27
- const handleReset = () => {
28
- if (dropdownRef.current) {
29
- dropdownRef.current.clearSelected()
30
- }
31
- }
32
-
33
- return (
34
- <>
35
- <Dropdown
36
- clearable={false}
37
- label="Quick Pick"
38
- onSelect={() => {}}
39
- ref={dropdownRef}
40
- variant="quickpick"
41
- {...props}
42
- />
43
- <Button
44
- marginY="md"
45
- onClick={handleReset}
46
- text="Reset"
47
- />
48
-
49
- <Dropdown
50
- clearable={false}
51
- defaultValue={options[options.length - 1]}
52
- label="Default"
53
- marginBottom="md"
54
- options={options}
55
- variant="default"
56
- {...props}
57
- />
58
-
59
- <Dropdown
60
- clearable={false}
61
- defaultValue={options[1]}
62
- label="Subtle"
63
- options={options}
64
- separators={false}
65
- variant="subtle"
66
- {...props}
67
- />
68
- </>
69
- )
70
- }
71
-
72
- export default DropdownWithClearable
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md DELETED
@@ -1,5 +0,0 @@
1
- The `clearable` prop controls whether the clear (X) button appears in the dropdown. When set to `false`, the clear button is hidden.
2
-
3
- This is useful in two scenarios:
4
- 1. When you have a separate "Reset" or "Defaults" button that handles clearing the selection (as shown in the Quick Pick example)
5
- 2. When you don't want to provide any way to clear the selection (as shown in the Default and Subtle examples)
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx DELETED
@@ -1,33 +0,0 @@
1
- import React from 'react'
2
- import Dropdown from '../../pb_dropdown/_dropdown'
3
-
4
- const DropdownWithConstrainHeight = (props) => {
5
- // Create a long list of options to demonstrate height constraint
6
- const options = Array.from({ length: 30 }, (_, i) => ({
7
- label: `Option ${i + 1}`,
8
- value: `option_${i + 1}`,
9
- id: `opt_${i + 1}`
10
- }))
11
-
12
- return (
13
- <>
14
- <Dropdown
15
- data={{ testid: "dropdown-no-constrain" }}
16
- label="Without Constrain Height (Default)"
17
- marginBottom="md"
18
- options={options}
19
- {...props}
20
- />
21
-
22
- <Dropdown
23
- constrainHeight
24
- data={{ testid: "dropdown-constrain" }}
25
- label="With Constrain Height"
26
- options={options}
27
- {...props}
28
- />
29
- </>
30
- )
31
- }
32
-
33
- export default DropdownWithConstrainHeight
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb DELETED
@@ -1,20 +0,0 @@
1
- <%
2
- # Create a long list of options to demonstrate height constraint
3
- options = (1..30).map do |i|
4
- { label: "Option #{i}", value: "option_#{i}", id: "opt_#{i}" }
5
- end
6
- %>
7
-
8
- <%= pb_rails("dropdown", props: {
9
- id: "dropdown-no-constrain",
10
- options: options,
11
- label: "Without Constrain Height (Default)",
12
- margin_bottom: "md"
13
- }) %>
14
-
15
- <%= pb_rails("dropdown", props: {
16
- id: "dropdown-constrain",
17
- options: options,
18
- constrain_height: true,
19
- label: "With Constrain Height"
20
- }) %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md DELETED
@@ -1,8 +0,0 @@
1
- The `constrain_height` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
2
-
3
- When `constrain_height` is `true`, the dropdown will:
4
- - Have a maximum height of 18em
5
- - Show a scrollbar when content exceeds the max height
6
- - Prevent the dropdown from extending beyond the viewport
7
-
8
- This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md DELETED
@@ -1,8 +0,0 @@
1
- The `constrainHeight` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
2
-
3
- When `constrainHeight` is `true`, the dropdown will:
4
- - Have a maximum height of 18em
5
- - Show a scrollbar when content exceeds the max height
6
- - Prevent the dropdown from extending beyond the viewport
7
-
8
- This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb DELETED
@@ -1,9 +0,0 @@
1
- <%
2
- options = [
3
- { label: 'United States', value: 'unitedStates', id: 'us' },
4
- { label: 'Canada', value: 'canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'pakistan', id: 'pk' },
6
- ]
7
- %>
8
-
9
- <%= pb_rails("dropdown", props: { options: options, placeholder: "Choose a country" }) %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx DELETED
@@ -1,33 +0,0 @@
1
- import React from 'react'
2
- import Dropdown from '../../pb_dropdown/_dropdown'
3
-
4
- const DropdownWithPlaceholder = (props) => {
5
-
6
- const options = [
7
- {
8
- label: "United States",
9
- value: "unitedStates",
10
- id: "us"
11
- },
12
- {
13
- label: "Canada",
14
- value: "canada",
15
- id: "ca"
16
- },
17
- {
18
- label: "Pakistan",
19
- value: "pakistan",
20
- id: "pk"
21
- }
22
- ];
23
-
24
- return (
25
- <Dropdown
26
- options={options}
27
- placeholder="Choose a country"
28
- {...props}
29
- />
30
- )
31
- }
32
-
33
- export default DropdownWithPlaceholder
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md DELETED
@@ -1,3 +0,0 @@
1
- The `placeholder` prop allows you to customize the placeholder text that appears when no option is selected in the dropdown.
2
-
3
- The placeholder prop works with all dropdown variants (`default`, `subtle`, and `quickpick`). When no option is selected, the placeholder text is displayed. When an option is selected, the placeholder is replaced by the selected option's label. The default placeholder text is "Select..." if no placeholder is provided.
data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb DELETED
@@ -1,7 +0,0 @@
1
- <%= pb_rails("passphrase", props: {
2
- id: "passphrase_required_indicator",
3
- label: "Passphrase",
4
- placeholder: "Enter passphrase",
5
- required_indicator: true,
6
- value: "passphrase",
7
- }) %>
data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx DELETED
@@ -1,24 +0,0 @@
1
- import React, { useState } from 'react'
2
-
3
- import Passphrase from '../_passphrase'
4
-
5
- const PassphraseRequiredIndicator = (props) => {
6
- const [passphrase, setPassphrase] = useState('')
7
- const handleOnChangePassphrase = (e) => {
8
- setPassphrase(e.target ? e.target.value : e)
9
- }
10
-
11
- return (
12
- <Passphrase
13
- id="passphrase_required_indicator"
14
- label="Passphrase"
15
- name="passphrase"
16
- onChange={handleOnChangePassphrase}
17
- requiredIndicator
18
- value={passphrase}
19
- {...props}
20
- />
21
- )
22
- }
23
-
24
- export default PassphraseRequiredIndicator
data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md DELETED
@@ -1,3 +0,0 @@
1
- The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
2
-
3
- You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb DELETED
@@ -1,5 +0,0 @@
1
- <%= pb_rails("phone_number_input", props: {
2
- id: "phone_number_input_required_indicator",
3
- label: "Required Phone Number",
4
- required_indicator: true,
5
- }) %>
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx DELETED
@@ -1,14 +0,0 @@
1
- import React from 'react'
2
- import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
3
-
4
- const PhoneNumberInputRequiredIndicator = (props) => (
5
- <>
6
- <PhoneNumberInput
7
- id='phone_number_input_required_indicator'
8
- label='Phone Number'
9
- requiredIndicator
10
- {...props} />
11
- </>
12
- )
13
-
14
- export default PhoneNumberInputRequiredIndicator
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md DELETED
@@ -1,3 +0,0 @@
1
- The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
2
-
3
- You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.
data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md DELETED
@@ -1 +0,0 @@
1
- Add an `id` to your Textarea so that clicking the label will move focus directly to the input.