playbook_ui_docs 16.0.0.pre.alpha.play263413732 → 16.0.0.pre.alpha.play267313765

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 (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +2 -1
  3. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +0 -1
  4. data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +0 -2
  5. data/app/pb_kits/playbook/pb_passphrase/docs/index.js +0 -1
  6. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +0 -2
  7. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
  8. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +35 -0
  9. data/app/pb_kits/playbook/{pb_passphrase/docs/_passphrase_required_indicator.md → pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md} +1 -1
  10. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +10 -0
  11. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +21 -0
  12. data/app/pb_kits/playbook/{pb_phone_number_input/docs/_phone_number_input_required_indicator.md → pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md} +1 -1
  13. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +3 -0
  14. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -0
  15. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb +5 -0
  16. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx +25 -0
  17. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md +3 -0
  18. data/app/pb_kits/playbook/pb_textarea/docs/example.yml +3 -1
  19. data/app/pb_kits/playbook/pb_textarea/docs/index.js +1 -0
  20. metadata +10 -8
  21. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb +0 -7
  22. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx +0 -24
  23. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb +0 -5
  24. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx +0 -14
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 233b458f5f353637cfd0b6262481e5978ca0d3118e5d4ea1bd7a5c66d1fa5044
4
- data.tar.gz: 7c3705efe86d41ce9f9242d82363b3e4d40ff4504f6fa3feebfa48e50a5281b3
3
+ metadata.gz: 557c5fe3d76fb022f764c1d1686958e50fb3ca29536da2f38a0d0165f75a8eaf
4
+ data.tar.gz: 29614ed4f30e57c0070864ebf8647525c5125ebf4f3aa08f246df5b4dec3f0e6
5
5
  SHA512:
6
- metadata.gz: 99963da08c64e4ddbd8078d012b1de6a4fb038bd0a76e61e9a2afedaca5eacf17a7922dd77e96041302da96b89fe21df69a4f38b5d99824b8f32cc93fbbeaab6
7
- data.tar.gz: 42809b26f816f40ae9f2e65e9f358d23d44f15ae2a364f4332fede6f3db2f4c138213b33cb8cdff4505b114e81d3c8131952945c2e712fc390414d8cc562fb53
6
+ metadata.gz: eb8d8b130ef526c33e6628e86b79e7512a830b9fa79f8a624807294025747762bc73af717a3364adb5d0ae70e487512acca0d7fc05ab1c7d590863e0b0faf1d3
7
+ data.tar.gz: 4bface0ecd35a174f89758debd3c070d29b4d7342a998a5d3b95e7a8e6126615377848ca82c9471eb45199cf5c9403aa4dab191a825ad22b31782481ff1a95b1
@@ -1,12 +1,13 @@
1
1
  <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
2
2
  <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
3
3
  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
4
+ <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
5
+ <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
4
6
  <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
5
7
  <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
6
8
  <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
7
9
  <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
8
10
  <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
9
- <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
10
11
 
11
12
  <%= form.actions do |action| %>
12
13
  <%= action.submit %>
@@ -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}
@@ -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
@@ -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'
@@ -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
@@ -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'
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import { useEditor, EditorContent } from "@tiptap/react"
4
+ import StarterKit from "@tiptap/starter-kit"
5
+ import Link from '@tiptap/extension-link'
6
+
7
+
8
+ const RichTextEditorAdvancedRequiredIndicator = (props) => {
9
+
10
+ const editor = useEditor({
11
+ extensions: [
12
+ StarterKit,
13
+ Link
14
+ ],
15
+ content:"Add your text here. You can format your text, add links, quotes, and bullets."
16
+ })
17
+ if (!editor) {
18
+ return null
19
+ }
20
+
21
+ return (
22
+ <div>
23
+ <RichTextEditor
24
+ advancedEditor={editor}
25
+ label="Label"
26
+ requiredIndicator
27
+ {...props}
28
+ >
29
+ <EditorContent editor={editor}/>
30
+ </RichTextEditor>
31
+ </div>
32
+ )
33
+ }
34
+
35
+ export default RichTextEditorAdvancedRequiredIndicator
@@ -1,3 +1,3 @@
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.
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
2
 
3
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.
@@ -0,0 +1,10 @@
1
+ <%= pb_rails("rich_text_editor", props: {
2
+ id: "required-indicator",
3
+ input_options: {
4
+ id: 'hidden_input_id',
5
+ name: "hidden_input_name"
6
+ },
7
+ label: "Label",
8
+ required_indicator: true,
9
+ value: "Add your text here. You can format your text, add links, quotes, and bullets."
10
+ }) %>
@@ -0,0 +1,21 @@
1
+ import React, { useState } from 'react'
2
+ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+
4
+ const RichTextEditorRequiredIndicator = (props) => {
5
+ const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
6
+ handleOnChange = (html) => setValue(html)
7
+
8
+ return (
9
+ <div>
10
+ <RichTextEditor
11
+ label="Label"
12
+ onChange={handleOnChange}
13
+ requiredIndicator
14
+ value={value}
15
+ {...props}
16
+ />
17
+ </div>
18
+ )
19
+ }
20
+
21
+ export default RichTextEditorRequiredIndicator
@@ -1,3 +1,3 @@
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.
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
2
 
3
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.
@@ -9,6 +9,7 @@ examples:
9
9
  - rich_text_editor_templates: Templates
10
10
  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
11
11
  - rich_text_editor_inline: Inline
12
+ - rich_text_editor_required_indicator: Required Indicator
12
13
  - rich_text_editor_preview: Preview
13
14
 
14
15
  react:
@@ -31,5 +32,7 @@ examples:
31
32
  - rich_text_editor_advanced_inline: Advanced (Inline)
32
33
  - rich_text_editor_advanced_height: Advanced Height
33
34
  - rich_text_editor_advanced_min_height: Advanced Min Height
35
+ - rich_text_editor_required_indicator: Required Indicator
36
+ - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
34
37
  - rich_text_editor_preview: Preview
35
38
  - rich_text_editor_advanced_preview: Advanced Preview
@@ -19,3 +19,5 @@ export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_adv
19
19
  export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
20
20
  export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
21
21
  export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
22
+ export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
23
+ export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
@@ -0,0 +1,5 @@
1
+ <%= pb_rails("textarea", props: {
2
+ label: "Label",
3
+ placeholder: "Placeholder text",
4
+ required_indicator: true
5
+ }) %>
@@ -0,0 +1,25 @@
1
+ import React, {useState} from 'react'
2
+
3
+ import Textarea from '../_textarea'
4
+
5
+ const TextareaRequiredIndicator = (props) => {
6
+ const [value, setValue] = useState('Default value text')
7
+ const handleChange = (event) => {
8
+ setValue(event.target.value)
9
+ }
10
+ return (
11
+ <div>
12
+ <Textarea
13
+ label="Label"
14
+ name="comment"
15
+ onChange={(e) => handleChange(e)}
16
+ placeholder="Placeholder text"
17
+ requiredIndicator
18
+ value={value}
19
+ {...props}
20
+ />
21
+ </div>
22
+ )
23
+ }
24
+
25
+ export default TextareaRequiredIndicator
@@ -0,0 +1,3 @@
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.
@@ -8,6 +8,7 @@ examples:
8
8
  - textarea_character_counter: Character Counter
9
9
  - textarea_inline: Inline
10
10
  - textarea_emoji_mask: Emoji Mask
11
+ - textarea_required_indicator: Required Indicator
11
12
  - textarea_input_options: Input Options
12
13
 
13
14
  react:
@@ -18,8 +19,9 @@ examples:
18
19
  - textarea_character_counter: Character Counter
19
20
  - textarea_inline: Inline
20
21
  - textarea_emoji_mask: Emoji Mask
22
+ - textarea_required_indicator: Required Indicator
21
23
 
22
24
  swift:
23
25
  - textarea_default_swift: Default
24
26
  - textarea_error_swift: Textarea w/ Error
25
- - textarea_props_swift: ""
27
+ - textarea_props_swift: ""
@@ -5,3 +5,4 @@ export { default as TextareaError } from './_textarea_error.jsx'
5
5
  export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
6
6
  export { default as TextareaInline } from './_textarea_inline.jsx'
7
7
  export { default as TextareaEmojiMask } from './_textarea_emoji_mask.jsx'
8
+ export { default as TextareaRequiredIndicator } from './_textarea_required_indicator.jsx'
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.0.0.pre.alpha.play263413732
4
+ version: 16.0.0.pre.alpha.play267313765
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-22 00:00:00.000000000 Z
12
+ date: 2026-01-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -1615,9 +1615,6 @@ files:
1615
1615
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
1616
1616
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
1617
1617
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
1618
- - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb
1619
- - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx
1620
- - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md
1621
1618
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
1622
1619
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
1623
1620
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
@@ -1781,9 +1778,6 @@ files:
1781
1778
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
1782
1779
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
1783
1780
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
1784
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb
1785
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx
1786
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md
1787
1781
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
1788
1782
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
1789
1783
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
@@ -1920,6 +1914,8 @@ files:
1920
1914
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
1921
1915
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
1922
1916
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
1917
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx
1918
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md
1923
1919
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
1924
1920
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
1925
1921
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
@@ -1937,6 +1933,9 @@ files:
1937
1933
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
1938
1934
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
1939
1935
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
1936
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
1937
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
1938
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
1940
1939
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
1941
1940
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
1942
1941
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
@@ -2339,6 +2338,9 @@ files:
2339
2338
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
2340
2339
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
2341
2340
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
2341
+ - app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb
2342
+ - app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx
2343
+ - app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md
2342
2344
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
2343
2345
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
2344
2346
  - app/pb_kits/playbook/pb_textarea/docs/example.yml
@@ -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
- }) %>
@@ -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
@@ -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
- }) %>
@@ -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