playbook_ui_docs 16.1.0.pre.alpha.PLAY2721railstablestickycolumnnulloffsetwidth13980 → 16.1.0.pre.alpha.PLAY2744dropdownquickpickpt113851

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 (20) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -2
  3. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +9 -16
  4. data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +0 -1
  5. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +5 -5
  6. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +4 -4
  7. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +0 -1
  8. data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +0 -2
  9. data/app/pb_kits/playbook/pb_passphrase/docs/index.js +0 -1
  10. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +0 -2
  11. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
  12. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
  14. metadata +2 -8
  15. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb +0 -7
  16. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx +0 -24
  17. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md +0 -3
  18. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb +0 -5
  19. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx +0 -14
  20. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md +0 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b9be286377e3436517ad1b266509375d99c150b6e904169e8f956028cf47e7b1
4
- data.tar.gz: 36e8984bda0ab557bfbbf36ecb869c0a60cf6b065c9e2b8c1c1bf7b56ab3160e
3
+ metadata.gz: b942a4975518f7b174fe75f98021690ce181d0a89ac5338903cc0e3a9b147bf7
4
+ data.tar.gz: bf4e2117d812d3d9842b876c8d9ee403522ecf3ab50ec05a4622587dee83e3e6
5
5
  SHA512:
6
- metadata.gz: c6628b936763806795e56fc2524be1058454ff4e1617270a291863b659bd7458e611092dc9a9c0f5507057359be475a8c4d542cdf204227dec0fb380c5e6d18f
7
- data.tar.gz: f6ac1ca0251884f92f44f75535c10c77441d936be0b58fc991d8ea9d0df23a9e579fdaf51551a57034aa74d2304fdc0dc8b1221793d009148c7d660d84bff8b6
6
+ metadata.gz: 61582c795df91633ccee14ca44ce83ee0a8b1a461486f92e843302638a77053482e6daf76a6e4b7ff7e4c47c88b3039d31ded1b47b42462e7ca2a1623ca8a63d
7
+ data.tar.gz: bcfe0ce40ddbba8c9bd899e64751d1b01bceb0b5ce8f8797af7ef8f36c3c19f159562791551935f3480dd427439efc20cff93af2d2340d7233fadb4e1a9a6c08
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_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.PLAY2721railstablestickycolumnnulloffsetwidth13980
4
+ version: 16.1.0.pre.alpha.PLAY2744dropdownquickpickpt113851
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-29 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
@@ -1627,9 +1627,6 @@ files:
1627
1627
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
1628
1628
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
1629
1629
  - 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
1630
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
1634
1631
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
1635
1632
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
@@ -1793,9 +1790,6 @@ files:
1793
1790
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
1794
1791
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
1795
1792
  - 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
1793
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
1800
1794
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
1801
1795
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
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.