playbook_ui_docs 16.5.0.pre.alpha.RTEPOC15779 → 16.5.0.pre.alpha.play289915580
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_date_picker/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -1
- metadata +2 -10
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx +0 -62
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.md +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.md +0 -16
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.html.erb +0 -9
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.md +0 -12
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.html.erb +0 -29
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.md +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 29cbd523cb1bad7a1cbb4228e03bbb3a2f93e62a66ba38b98cf33f868a98b081
|
|
4
|
+
data.tar.gz: 33109356ae9f6417a9c8fa87d676ce9192d474bf1ec81d5e0c75ffe743800fd0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c89933f815c971a54956e5f074a646544e71f8772c204f174cb753a6ea33ff6e878c3cc3bc1c081b0c724495e264bc85e91371259b3f4ee25672a742cfee5b3d
|
|
7
|
+
data.tar.gz: 289b94b5d7a169503a409738cb4ba207495c48dbc01a0785b7628a1138257a9f62ee671fac75a3533d162b439e205c4747dbc7d397bd9ce6ef171b7f79b4946b
|
|
@@ -29,4 +29,3 @@ export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_
|
|
|
29
29
|
export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
|
|
30
30
|
export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
|
|
31
31
|
export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
|
|
32
|
-
export { default as DatePickerDialogSubmission } from "./_date_picker_dialog_submission.jsx";
|
|
@@ -11,7 +11,6 @@ examples:
|
|
|
11
11
|
- typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
|
|
12
12
|
- typeahead_inline: Inline
|
|
13
13
|
- typeahead_multi_kit: Multi Kit Options
|
|
14
|
-
- typeahead_createable: Createable
|
|
15
14
|
- typeahead_error_state: Error State
|
|
16
15
|
- typeahead_margin_bottom: Margin Bottom
|
|
17
16
|
- typeahead_with_pills_color: With Pills (Custom Color)
|
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.5.0.pre.alpha.
|
|
4
|
+
version: 16.5.0.pre.alpha.play289915580
|
|
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-04-
|
|
12
|
+
date: 2026-04-07 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -600,8 +600,6 @@ files:
|
|
|
600
600
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
|
|
601
601
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
|
|
602
602
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
|
|
603
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx
|
|
604
|
-
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.md
|
|
605
603
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
|
|
606
604
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
|
|
607
605
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
|
|
@@ -2002,10 +2000,6 @@ files:
|
|
|
2002
2000
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.md
|
|
2003
2001
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
|
|
2004
2002
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
|
2005
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.html.erb
|
|
2006
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.md
|
|
2007
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.html.erb
|
|
2008
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.md
|
|
2009
2003
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx
|
|
2010
2004
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md
|
|
2011
2005
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
|
|
@@ -2631,9 +2625,7 @@ files:
|
|
|
2631
2625
|
- app/pb_kits/playbook/pb_typeahead/docs/_description.md
|
|
2632
2626
|
- app/pb_kits/playbook/pb_typeahead/docs/_footer.md
|
|
2633
2627
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx
|
|
2634
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.html.erb
|
|
2635
2628
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx
|
|
2636
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.md
|
|
2637
2629
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx
|
|
2638
2630
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb
|
|
2639
2631
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { Button, Dialog, DatePicker } from "playbook-ui";
|
|
3
|
-
|
|
4
|
-
const DatePickerDialogSubmission = () => {
|
|
5
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
6
|
-
const [dateFixed, setDateFixed] = useState("");
|
|
7
|
-
const [pickerInstance, setPickerInstance] = useState(0);
|
|
8
|
-
|
|
9
|
-
const close = (clearDate = false) => {
|
|
10
|
-
if (clearDate) setDateFixed("");
|
|
11
|
-
setIsOpen(false);
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
const open = () => {
|
|
15
|
-
setPickerInstance((current) => current + 1);
|
|
16
|
-
setIsOpen(true);
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
const handleSubmit = () => {
|
|
20
|
-
if (!dateFixed.trim()) return;
|
|
21
|
-
close();
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<>
|
|
26
|
-
<Button
|
|
27
|
-
onClick={open}
|
|
28
|
-
text="Open Dialog"
|
|
29
|
-
/>
|
|
30
|
-
<Dialog
|
|
31
|
-
onClose={() => close(true)}
|
|
32
|
-
opened={isOpen}
|
|
33
|
-
size="md"
|
|
34
|
-
title="Date Picker: Dialog Submission Example"
|
|
35
|
-
>
|
|
36
|
-
<Dialog.Body>
|
|
37
|
-
<DatePicker
|
|
38
|
-
defaultDate={dateFixed || undefined}
|
|
39
|
-
key={`fixed-${pickerInstance}`}
|
|
40
|
-
label="Date"
|
|
41
|
-
onChange={(dateStr) => setDateFixed(dateStr || "")}
|
|
42
|
-
pickerId={`datePickerFixed-${pickerInstance}`}
|
|
43
|
-
staticPosition={false}
|
|
44
|
-
/>
|
|
45
|
-
</Dialog.Body>
|
|
46
|
-
<Dialog.Footer>
|
|
47
|
-
<Button
|
|
48
|
-
onClick={handleSubmit}
|
|
49
|
-
text="Submit"
|
|
50
|
-
/>
|
|
51
|
-
<Button
|
|
52
|
-
onClick={() => close(true)}
|
|
53
|
-
text="Cancel"
|
|
54
|
-
variant="link"
|
|
55
|
-
/>
|
|
56
|
-
</Dialog.Footer>
|
|
57
|
-
</Dialog>
|
|
58
|
-
</>
|
|
59
|
-
);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
export default DatePickerDialogSubmission;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Use this pattern when a DatePicker lives inside a Dialog and needs to submit a selected value before closing. A unique `key` and `pickerId` will force the datePicker to remount each time the dialog opens.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("rich_text_editor", props: { input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets." }) %>
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
The Rails rich text editor is a TipTap surface with no React. The UI (toolbar, block-style menu, formatting actions) is rendered with Playbook Rails kits (`pb_rails`). The editor document is a vanilla TipTap `Editor` instance; HTML is synced to a hidden `<input>` so standard Rails forms can submit the value.
|
|
2
|
-
|
|
3
|
-
### How TipTap is loaded (Rails)
|
|
4
|
-
|
|
5
|
-
- The kit ships an `importmap` in the ERB template that maps `@tiptap/*` and ProseMirror packages to ES module URLs on a CDN (see `rich_text_editor.html.erb`). A small `type="module"` script `import()`s `@tiptap/core`, `@tiptap/starter-kit`, `@tiptap/extension-link`, and related modules at runtime.
|
|
6
|
-
- You do not need to add TipTap to your app’s npm dependencies or Gemfile for this kit to work out of the box—the browser loads those modules from the CDN when the page runs.
|
|
7
|
-
- Your app must support import maps and ES modules in the browser (modern browsers; ensure CSP allows the CDN if you lock scripts down).
|
|
8
|
-
|
|
9
|
-
### Relation to the React implementation
|
|
10
|
-
|
|
11
|
-
- Same core: both use TipTap v2 on top of ProseMirror; styling lives in Playbook SCSS (`_tiptap_styles.scss`) so the editor chrome lines up between platforms.
|
|
12
|
-
- Different shell: Rails uses ERB + Playbook Rails components + inline module script. React uses `RichTextEditor` / `_tiptap_editor.tsx` and TipTap wired through the bundled Playbook React package—see Advanced Default for that stack and when you need TipTap installed in your JavaScript bundle.
|
|
13
|
-
|
|
14
|
-
### Simple toolbar (`simple: true`)
|
|
15
|
-
|
|
16
|
-
**Bold**, **Italic**, **Undo**, and **Redo** only (no block dropdown / Popover). See the **Rails (TipTap — Simple toolbar)** example.
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
### Simple toolbar (`simple: true`)
|
|
2
|
-
|
|
3
|
-
Pass **`simple: true`** for a compact toolbar: **Bold**, **Italic**, **Undo**, and **Redo** (same history controls as the full toolbar—plain buttons, not popovers).
|
|
4
|
-
|
|
5
|
-
- No block-style dropdown (no “Paragraph” / headings / lists in the menu).
|
|
6
|
-
- No **`pb_popover`** on the toolbar—useful in **native `<dialog>`** modals, turbo-loaded panels, or other tight layouts where the full block menu is awkward to position.
|
|
7
|
-
|
|
8
|
-
The underlying TipTap document still accepts the same HTML as the default Rails editor; `simple` only changes which **toolbar controls** are shown.
|
|
9
|
-
|
|
10
|
-
### When to use the default instead
|
|
11
|
-
|
|
12
|
-
Keep the **default** toolbar (omit `simple` or pass `simple: false`) when you need the block-style menu, strikethrough, code block, and link actions in the chrome.
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
options = [
|
|
3
|
-
{ label: 'Orange', value: '#FFA500' },
|
|
4
|
-
{ label: 'Red', value: '#FF0000' },
|
|
5
|
-
{ label: 'Green', value: '#00FF00' },
|
|
6
|
-
{ label: 'Blue', value: '#0000FF' },
|
|
7
|
-
]
|
|
8
|
-
%>
|
|
9
|
-
|
|
10
|
-
<%= pb_rails("typeahead", props: {
|
|
11
|
-
id: "typeahead-creatable",
|
|
12
|
-
placeholder: "All Colors",
|
|
13
|
-
options: options,
|
|
14
|
-
label: "Colors",
|
|
15
|
-
name: :foo,
|
|
16
|
-
createable: true,
|
|
17
|
-
pills: true,
|
|
18
|
-
})
|
|
19
|
-
%>
|
|
20
|
-
|
|
21
|
-
<%= javascript_tag defer: "defer" do %>
|
|
22
|
-
document.addEventListener("pb-typeahead-kit-typeahead-creatable-result-option-select", function(event) {
|
|
23
|
-
console.log('Single Option selected')
|
|
24
|
-
console.dir(event.detail)
|
|
25
|
-
})
|
|
26
|
-
document.addEventListener("pb-typeahead-kit-typeahead-creatable-result-clear", function() {
|
|
27
|
-
console.log('All options cleared')
|
|
28
|
-
})
|
|
29
|
-
<% end %>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
The `createable` prop allows users to create new options by typing a value that doesn't exist in the options list.
|