playbook_ui_docs 16.0.0.pre.alpha.play250713764 → 16.0.0.pre.alpha.play263413732
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +9 -16
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -2
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +1 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb +7 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx +24 -0
- data/app/pb_kits/playbook/{pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md → pb_passphrase/docs/_passphrase_required_indicator.md} +1 -1
- data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb +5 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx +14 -0
- data/app/pb_kits/playbook/{pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md → pb_phone_number_input/docs/_phone_number_input_required_indicator.md} +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +0 -1
- metadata +8 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +0 -35
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +0 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +0 -21
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb +0 -5
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx +0 -25
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md +0 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 233b458f5f353637cfd0b6262481e5978ca0d3118e5d4ea1bd7a5c66d1fa5044
|
|
4
|
+
data.tar.gz: 7c3705efe86d41ce9f9242d82363b3e4d40ff4504f6fa3feebfa48e50a5281b3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 99963da08c64e4ddbd8078d012b1de6a4fb038bd0a76e61e9a2afedaca5eacf17a7922dd77e96041302da96b89fe21df69a4f38b5d99824b8f32cc93fbbeaab6
|
|
7
|
+
data.tar.gz: 42809b26f816f40ae9f2e65e9f358d23d44f15ae2a364f4332fede6f3db2f4c138213b33cb8cdff4505b114e81d3c8131952945c2e712fc390414d8cc562fb53
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<%=
|
|
2
2
|
pb_rails("filter", props: {
|
|
3
3
|
min_width: "360px",
|
|
4
|
-
id: "
|
|
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: "
|
|
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 },
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import 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
|
|
10
|
-
|
|
11
|
-
|
|
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
|
-
|
|
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={
|
|
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={
|
|
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={
|
|
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={
|
|
94
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
|
102
95
|
{...props}
|
|
103
96
|
>
|
|
104
97
|
{({ closePopover }) => (
|
|
@@ -1,13 +1,12 @@
|
|
|
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 } %>
|
|
6
4
|
<%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
|
|
7
5
|
<%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
|
|
8
6
|
<%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
|
|
9
7
|
<%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
|
|
10
8
|
<%= 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 } %>
|
|
11
10
|
|
|
12
11
|
<%= form.actions do |action| %>
|
|
13
12
|
<%= action.submit %>
|
|
@@ -120,6 +120,7 @@ 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/>
|
|
123
124
|
<Passphrase
|
|
124
125
|
label={"Type your passphrase"}
|
|
125
126
|
onChange={handleChange}
|
|
@@ -0,0 +1,24 @@
|
|
|
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,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
|
- passphrase_strength_change: Strength Change
|
|
10
10
|
- passphrase_common: Common Passphrases
|
|
11
11
|
- passphrase_breached: Breached Passphrases
|
|
12
|
+
- passphrase_required_indicator: Required Indicator
|
|
12
13
|
|
|
13
14
|
react:
|
|
14
15
|
- passphrase_default: Default
|
|
@@ -19,3 +20,4 @@ examples:
|
|
|
19
20
|
- passphrase_strength_change: Strength Change
|
|
20
21
|
- passphrase_common: Common Passphrases
|
|
21
22
|
- passphrase_breached: Breached Passphrases
|
|
23
|
+
- passphrase_required_indicator: Required Indicator
|
|
@@ -6,3 +6,4 @@ 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/_phone_number_input_required_indicator.jsx
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
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
|
|
@@ -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.
|
|
@@ -12,6 +12,7 @@ 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
|
|
15
16
|
|
|
16
17
|
rails:
|
|
17
18
|
- phone_number_input_default: Default
|
|
@@ -24,3 +25,4 @@ examples:
|
|
|
24
25
|
- phone_number_input_strict_mode: Strict Mode
|
|
25
26
|
- phone_number_input_hidden_inputs: Hidden Inputs
|
|
26
27
|
- phone_number_input_country_search: Country Search
|
|
28
|
+
- phone_number_input_required_indicator: Required Indicator
|
|
@@ -9,3 +9,4 @@ 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'
|
|
@@ -9,7 +9,6 @@ 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
|
|
13
12
|
- rich_text_editor_preview: Preview
|
|
14
13
|
|
|
15
14
|
react:
|
|
@@ -32,7 +31,5 @@ examples:
|
|
|
32
31
|
- rich_text_editor_advanced_inline: Advanced (Inline)
|
|
33
32
|
- rich_text_editor_advanced_height: Advanced Height
|
|
34
33
|
- 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
|
|
37
34
|
- rich_text_editor_preview: Preview
|
|
38
35
|
- rich_text_editor_advanced_preview: Advanced Preview
|
|
@@ -19,5 +19,3 @@ 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'
|
|
@@ -8,7 +8,6 @@ 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
|
|
12
11
|
- textarea_input_options: Input Options
|
|
13
12
|
|
|
14
13
|
react:
|
|
@@ -19,9 +18,8 @@ examples:
|
|
|
19
18
|
- textarea_character_counter: Character Counter
|
|
20
19
|
- textarea_inline: Inline
|
|
21
20
|
- textarea_emoji_mask: Emoji Mask
|
|
22
|
-
- textarea_required_indicator: Required Indicator
|
|
23
21
|
|
|
24
22
|
swift:
|
|
25
23
|
- textarea_default_swift: Default
|
|
26
24
|
- textarea_error_swift: Textarea w/ Error
|
|
27
|
-
- textarea_props_swift: ""
|
|
25
|
+
- textarea_props_swift: ""
|
|
@@ -5,4 +5,3 @@ 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.
|
|
4
|
+
version: 16.0.0.pre.alpha.play263413732
|
|
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-
|
|
12
|
+
date: 2026-01-22 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -1615,6 +1615,9 @@ 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
|
|
1618
1621
|
- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
|
|
1619
1622
|
- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
|
|
1620
1623
|
- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
|
|
@@ -1778,6 +1781,9 @@ files:
|
|
|
1778
1781
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
|
|
1779
1782
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
|
|
1780
1783
|
- 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
|
|
1781
1787
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
|
|
1782
1788
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
|
|
1783
1789
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
|
|
@@ -1914,8 +1920,6 @@ files:
|
|
|
1914
1920
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
|
|
1915
1921
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
|
|
1916
1922
|
- 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
|
|
1919
1923
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
|
|
1920
1924
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
|
|
1921
1925
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
|
|
@@ -1933,9 +1937,6 @@ files:
|
|
|
1933
1937
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
|
1934
1938
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
|
|
1935
1939
|
- 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
|
|
1939
1940
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
|
|
1940
1941
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
|
|
1941
1942
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
|
|
@@ -2338,9 +2339,6 @@ files:
|
|
|
2338
2339
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
|
|
2339
2340
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
|
|
2340
2341
|
- 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
|
|
2344
2342
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
|
|
2345
2343
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
|
|
2346
2344
|
- app/pb_kits/playbook/pb_textarea/docs/example.yml
|
data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
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
|
data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
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
|
-
}) %>
|
|
@@ -1,21 +0,0 @@
|
|
|
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,25 +0,0 @@
|
|
|
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
|
|
@@ -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.
|