playbook_ui_docs 16.1.0.pre.alpha.play274314102 → 16.1.0.pre.alpha.play274314184

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0a4adb8dda450145eba27c92046a81f6a04086db1bf4a1195c64925e16c9e8d4
4
- data.tar.gz: 18c3a2d469a159045bcefa850e4f10a9073b6e7f3ba354f25cb57440bc5f0834
3
+ metadata.gz: b6c4553d850626f4b64e91749b34a72dcaf52b6475707b166db49fc55a5e9c41
4
+ data.tar.gz: 4feaae482982f6618cdd92571cee1d22bcd10e66073c814b954e55c9aec846b6
5
5
  SHA512:
6
- metadata.gz: ee37a4e8b422fb213bd4988a99b79da1fda15a98ef3ab40eaad418b8b380e3f07a8c56185395ddeaa8fe58dbdab3b2499ff0f018aba8dce41b9f053779095776
7
- data.tar.gz: f2a4cf1ac3cf4643eba6b920a4f263a8d4952fb193bdc979301ae08d5937cecb3c44aa406c0d448acbdfee81845545e13eb660b4400de7894c2cb6150a45d105
6
+ metadata.gz: 64a6c8a162788307fd6cc116600b4c4ca8821c65f0b1c63b6d3e476b00f5aefdf3420f038e870251a1c6ca5a2814359513fc0e1068c4b822e3332c1a1235442d
7
+ data.tar.gz: 6b9efb621d16d94daca89f798fe0da9b6d1b4677993615bf349cd26feef0de0a3ed6f5e9aaff5e68fee23763f3c760d809a7c866c3ca457c9e611c375e2530f1
@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
2
2
 
3
3
  ### sortIcon
4
4
 
5
- An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.
5
+ An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.
@@ -1,7 +1,6 @@
1
1
  import React from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import { TrixEditor } from 'react-trix'
4
- // eslint-disable-next-line no-unused-vars
5
4
  import Trix from 'trix'
6
5
 
7
6
  const RichTextEditorAttributes = (props) => (
@@ -11,6 +10,7 @@ const RichTextEditorAttributes = (props) => (
11
10
  aria={{ label: 'rich textarea' }}
12
11
  data={{ key: 'value', key2: 'value2' }}
13
12
  name="name-attribute"
13
+ trixInstance={Trix}
14
14
  {...props}
15
15
  />
16
16
  </div>
@@ -1,7 +1,6 @@
1
1
  import React, { useState } from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import { TrixEditor } from 'react-trix'
4
- // eslint-disable-next-line no-unused-vars
5
4
  import Trix from 'trix'
6
5
 
7
6
  const RichTextEditorDefault = (props) => {
@@ -13,6 +12,7 @@ const RichTextEditorDefault = (props) => {
13
12
  <RichTextEditor
14
13
  TrixEditor={TrixEditor}
15
14
  onChange={handleOnChange}
15
+ trixInstance={Trix}
16
16
  value={value}
17
17
  {...props}
18
18
  />
@@ -0,0 +1 @@
1
+ **IMPORTANT**: The Trix version of the RichTextEditor is a Legacy kit and no longer being actively maintained. Please use the advanced Editor above.
@@ -1,7 +1,6 @@
1
1
  import React from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import { TrixEditor } from 'react-trix'
4
- // eslint-disable-next-line no-unused-vars
5
4
  import Trix from 'trix'
6
5
 
7
6
  const RichTextEditorFocus = (props) => (
@@ -9,12 +8,14 @@ const RichTextEditorFocus = (props) => (
9
8
  <RichTextEditor
10
9
  TrixEditor={TrixEditor}
11
10
  focus
11
+ trixInstance={Trix}
12
12
  {...props}
13
13
  />
14
14
  <br />
15
15
  <RichTextEditor
16
16
  TrixEditor={TrixEditor}
17
17
  focus
18
+ trixInstance={Trix}
18
19
  {...props}
19
20
  />
20
21
  </>
@@ -1,7 +1,6 @@
1
1
  import React from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import { TrixEditor } from 'react-trix'
4
- // eslint-disable-next-line no-unused-vars
5
4
  import Trix from 'trix'
6
5
 
7
6
  const RichTextEditorInline = (props) => (
@@ -11,6 +10,7 @@ const RichTextEditorInline = (props) => (
11
10
  id="inline"
12
11
  inline
13
12
  toolbarBottom
13
+ trixInstance={Trix}
14
14
  value="Try hovering over this text. Then try modifying it or adding more of your own text."
15
15
  {...props}
16
16
  />
@@ -1,7 +1,6 @@
1
1
  import React, { useState } from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import { TrixEditor } from 'react-trix'
4
- // eslint-disable-next-line no-unused-vars
5
4
  import Trix from 'trix'
6
5
 
7
6
  const RichTextEditorLabel = (props) => {
@@ -15,6 +14,7 @@ const RichTextEditorLabel = (props) => {
15
14
  id="example"
16
15
  label="Example Label"
17
16
  onChange={handleOnChange}
17
+ trixInstance={Trix}
18
18
  value={value}
19
19
  {...props}
20
20
  />
@@ -23,6 +23,7 @@ const RichTextEditorLabel = (props) => {
23
23
  TrixEditor={TrixEditor}
24
24
  label="Example Label No ID"
25
25
  onChange={handleOnChange}
26
+ trixInstance={Trix}
26
27
  value={value}
27
28
  {...props}
28
29
  />
@@ -1,7 +1,6 @@
1
1
  import React, { useState } from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import { TrixEditor } from 'react-trix'
4
- // eslint-disable-next-line no-unused-vars
5
4
  import Trix from 'trix'
6
5
 
7
6
  const RichTextEditorRequiredIndicator = (props) => {
@@ -16,6 +15,7 @@ const RichTextEditorRequiredIndicator = (props) => {
16
15
  label="Label"
17
16
  onChange={handleOnChange}
18
17
  requiredIndicator
18
+ trixInstance={Trix}
19
19
  value={value}
20
20
  {...props}
21
21
  />
@@ -1,7 +1,6 @@
1
1
  import React from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import { TrixEditor } from 'react-trix'
4
- // eslint-disable-next-line no-unused-vars
5
4
  import Trix from 'trix'
6
5
 
7
6
  const RichTextEditorSimple = (props) => (
@@ -9,6 +8,7 @@ const RichTextEditorSimple = (props) => (
9
8
  <RichTextEditor
10
9
  TrixEditor={TrixEditor}
11
10
  simple
11
+ trixInstance={Trix}
12
12
  {...props}
13
13
  />
14
14
  </div>
@@ -1,7 +1,6 @@
1
1
  import React from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import { TrixEditor } from 'react-trix'
4
- // eslint-disable-next-line no-unused-vars
5
4
  import Trix from 'trix'
6
5
 
7
6
  const RichTextEditorSticky = (props) => (
@@ -10,6 +9,7 @@ const RichTextEditorSticky = (props) => (
10
9
  TrixEditor={TrixEditor}
11
10
  id="sticky"
12
11
  sticky
12
+ trixInstance={Trix}
13
13
  value="In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."
14
14
  {...props}
15
15
  />
@@ -3,7 +3,6 @@ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import Select from '../../pb_select/_select'
4
4
  import { changelog, release } from './templates.js'
5
5
  import { TrixEditor } from 'react-trix'
6
- // eslint-disable-next-line no-unused-vars
7
6
  import Trix from 'trix'
8
7
 
9
8
  const RichTextEditorTemplates = (props) => {
@@ -37,6 +36,7 @@ const RichTextEditorTemplates = (props) => {
37
36
  TrixEditor={TrixEditor}
38
37
  id="template"
39
38
  template={editorContent}
39
+ trixInstance={Trix}
40
40
  {...props}
41
41
  />
42
42
  </div>
@@ -18,15 +18,15 @@ examples:
18
18
  - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
19
19
  - rich_text_editor_advanced_preview: Advanced Preview
20
20
  - rich_text_editor_default: Legacy Default (Trix)
21
- - rich_text_editor_simple: Legacy Simple (Trix)
22
- - rich_text_editor_attributes: Legacy Attributes (Trix)
23
- - rich_text_editor_focus: Legacy Focus (Trix)
24
- - rich_text_editor_sticky: Legacy Sticky (Trix)
25
- - rich_text_editor_templates: Legacy Templates (Trix)
26
- - rich_text_editor_inline: Legacy Inline (Trix)
27
- - rich_text_editor_label: Legacy Label (Trix)
28
- - rich_text_editor_required_indicator: Legacy Required Indicator (Trix)
29
- - rich_text_editor_preview: Legacy Preview (Trix)
21
+ # - rich_text_editor_simple: Legacy Simple (Trix)
22
+ # - rich_text_editor_attributes: Legacy Attributes (Trix)
23
+ # - rich_text_editor_focus: Legacy Focus (Trix)
24
+ # - rich_text_editor_sticky: Legacy Sticky (Trix)
25
+ # - rich_text_editor_templates: Legacy Templates (Trix)
26
+ # - rich_text_editor_inline: Legacy Inline (Trix)
27
+ # - rich_text_editor_label: Legacy Label (Trix)
28
+ # - rich_text_editor_required_indicator: Legacy Required Indicator (Trix)
29
+ # - rich_text_editor_preview: Legacy Preview (Trix)
30
30
 
31
31
 
32
32
 
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.play274314102
4
+ version: 16.1.0.pre.alpha.play274314184
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-02-03 00:00:00.000000000 Z
12
+ date: 2026-02-04 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -1950,6 +1950,7 @@ files:
1950
1950
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md
1951
1951
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
1952
1952
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx
1953
+ - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.md
1953
1954
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
1954
1955
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
1955
1956
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx