playbook_ui_docs 16.4.0.pre.alpha.play2838formcustomvalidationsconsistency15153 → 16.4.0.pre.alpha.play2838formcustomvalidationsconsistency15196
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_button/docs/_button_full_width_rails.md +19 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_full_width_react.md +23 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.html.erb +109 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.jsx +127 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +20 -8
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.md +3 -0
- metadata +8 -3
- data/app/pb_kits/playbook/pb_button/docs/_button_full_width.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: 64c13f0b962cfbcb3deac62a60b79b768f0e4a24aec960f1074f7e1b0150d3de
|
|
4
|
+
data.tar.gz: 1f23cbf181136325178fcd72846da24423004bbf5afbeec4f16f1f8146088ef3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 95af824eac2fc01dd90f71a1f82728ee7ad2e75e465ce157540d7b967465af0e8717c6c70d9e556b1fdf466ccbd7b51bf99497c16a70ab77f944e7708424dfae
|
|
7
|
+
data.tar.gz: bfcf03bec178ff873b974944e647fd0689c1542a0ddf1d47775d78f059bc66c1319a7d6104248955bdaaae3b1867fc199920cbe5d7cf5ddec8f98e0892927d0e
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
This button is used many times for mobile or other things like cards and sidebars.
|
|
2
|
+
|
|
3
|
+
### Responsive `display` and `full_width`
|
|
4
|
+
|
|
5
|
+
`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
|
|
6
|
+
|
|
7
|
+
Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
|
|
8
|
+
|
|
9
|
+
**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `full_width` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
|
|
10
|
+
|
|
11
|
+
```erb
|
|
12
|
+
<%= pb_rails("flex", props: {
|
|
13
|
+
display: { xs: "flex", default: "none" },
|
|
14
|
+
orientation: "column",
|
|
15
|
+
width: "100%",
|
|
16
|
+
}) do %>
|
|
17
|
+
<%= pb_rails("button", props: { full_width: true, text: "Add" }) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
```
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
This button is used many times for mobile or other things like cards and sidebars.
|
|
2
|
+
|
|
3
|
+
### Responsive `display` and `full_width`
|
|
4
|
+
|
|
5
|
+
`full_width` applies block styling that includes `display: flex` on the **same element** as the button. The **`display` global prop** also sets `display` (via utility classes, often with `!important`).
|
|
6
|
+
|
|
7
|
+
Putting **both** on one button means **two systems control `display` on one node**, which can cause wrong visibility (e.g. both a header and a full-width mobile button showing) or confusing cascade behavior.
|
|
8
|
+
|
|
9
|
+
**Recommended:** Put responsive `display` on a **parent** (e.g. `Flex`, `Card`, or a plain wrapper) and keep `fullWidth` only on the `Button` inside. The wrapper handles show/hide by breakpoint; the button only handles full-width layout.
|
|
10
|
+
|
|
11
|
+
```jsx
|
|
12
|
+
import { Flex, Button } from "playbook-ui"
|
|
13
|
+
|
|
14
|
+
const Example = () => (
|
|
15
|
+
<Flex
|
|
16
|
+
display={{ xs: "flex", default: "none" }}
|
|
17
|
+
orientation="column"
|
|
18
|
+
width="100%"
|
|
19
|
+
>
|
|
20
|
+
<Button fullWidth text="Add" />
|
|
21
|
+
</Flex>
|
|
22
|
+
)
|
|
23
|
+
```
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
<%
|
|
2
|
+
tree_base = [{
|
|
3
|
+
label: "Power Home Remodeling",
|
|
4
|
+
value: "powerHomeRemodeling",
|
|
5
|
+
id: "100",
|
|
6
|
+
expanded: true,
|
|
7
|
+
children: [
|
|
8
|
+
{
|
|
9
|
+
label: "People",
|
|
10
|
+
value: "people",
|
|
11
|
+
id: "101",
|
|
12
|
+
expanded: true,
|
|
13
|
+
children: [
|
|
14
|
+
{
|
|
15
|
+
label: "Talent Acquisition",
|
|
16
|
+
value: "talentAcquisition",
|
|
17
|
+
id: "102",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: "Business Affairs",
|
|
21
|
+
value: "business Affairs",
|
|
22
|
+
id: "103",
|
|
23
|
+
children: [
|
|
24
|
+
{
|
|
25
|
+
label: "Initiatives",
|
|
26
|
+
value: "initiatives",
|
|
27
|
+
id: "104",
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
label: "Learning & Development",
|
|
31
|
+
value: "learningAndDevelopment",
|
|
32
|
+
id: "105",
|
|
33
|
+
},
|
|
34
|
+
],
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: "People Experience",
|
|
38
|
+
value: "peopleExperience",
|
|
39
|
+
id: "106",
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
label: "Contact Center",
|
|
45
|
+
value: "contactCenter",
|
|
46
|
+
id: "107",
|
|
47
|
+
children: [
|
|
48
|
+
{
|
|
49
|
+
label: "Appointment Management",
|
|
50
|
+
value: "appointmentManagement",
|
|
51
|
+
id: "108",
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: "Customer Service",
|
|
55
|
+
value: "customerService",
|
|
56
|
+
id: "109",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Energy",
|
|
60
|
+
value: "energy",
|
|
61
|
+
id: "110",
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
}]
|
|
67
|
+
|
|
68
|
+
prefix_mls_ids = nil
|
|
69
|
+
prefix_mls_ids = ->(nodes, pfx) {
|
|
70
|
+
nodes.map do |n|
|
|
71
|
+
h = n.dup
|
|
72
|
+
h[:id] = "#{pfx}#{n[:id]}"
|
|
73
|
+
h[:children] = prefix_mls_ids.call(n[:children], pfx) if n[:children].present?
|
|
74
|
+
h
|
|
75
|
+
end
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
tree_multi = prefix_mls_ids.call(tree_base, "phm_")
|
|
79
|
+
tree_return_all = prefix_mls_ids.call(tree_base, "phr_")
|
|
80
|
+
tree_single = prefix_mls_ids.call(tree_base, "phs_")
|
|
81
|
+
%>
|
|
82
|
+
|
|
83
|
+
<%= pb_rails("multi_level_select", props: {
|
|
84
|
+
id: "multi-level-select-placeholder-multi-rails",
|
|
85
|
+
label: "Multi (default)",
|
|
86
|
+
margin_bottom: "sm",
|
|
87
|
+
name: "placeholder_multi",
|
|
88
|
+
tree_data: tree_multi,
|
|
89
|
+
placeholder: "Search or choose options…",
|
|
90
|
+
}) %>
|
|
91
|
+
|
|
92
|
+
<%= pb_rails("multi_level_select", props: {
|
|
93
|
+
id: "multi-level-select-placeholder-return-all-rails",
|
|
94
|
+
label: "Multi (return all selected)",
|
|
95
|
+
margin_bottom: "sm",
|
|
96
|
+
name: "placeholder_return_all",
|
|
97
|
+
placeholder: "Departments...",
|
|
98
|
+
return_all_selected: true,
|
|
99
|
+
tree_data: tree_return_all,
|
|
100
|
+
}) %>
|
|
101
|
+
|
|
102
|
+
<%= pb_rails("multi_level_select", props: {
|
|
103
|
+
id: "multi-level-select-placeholder-single-rails",
|
|
104
|
+
label: "Single",
|
|
105
|
+
name: "placeholder_single",
|
|
106
|
+
placeholder: "Select one option…",
|
|
107
|
+
tree_data: tree_single,
|
|
108
|
+
variant: "single",
|
|
109
|
+
}) %>
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
4
|
+
|
|
5
|
+
const treeTemplate = [
|
|
6
|
+
{
|
|
7
|
+
label: "Power Home Remodeling",
|
|
8
|
+
value: "powerHomeRemodeling",
|
|
9
|
+
id: "powerhome1",
|
|
10
|
+
expanded: true,
|
|
11
|
+
children: [
|
|
12
|
+
{
|
|
13
|
+
label: "People",
|
|
14
|
+
value: "people",
|
|
15
|
+
id: "people1",
|
|
16
|
+
expanded: true,
|
|
17
|
+
children: [
|
|
18
|
+
{
|
|
19
|
+
label: "Talent Acquisition",
|
|
20
|
+
value: "talentAcquisition",
|
|
21
|
+
id: "talent1",
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Business Affairs",
|
|
25
|
+
value: "businessAffairs",
|
|
26
|
+
id: "business1",
|
|
27
|
+
children: [
|
|
28
|
+
{
|
|
29
|
+
label: "Initiatives",
|
|
30
|
+
value: "initiatives",
|
|
31
|
+
id: "initiative1",
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: "Learning & Development",
|
|
35
|
+
value: "learningAndDevelopment",
|
|
36
|
+
id: "development1",
|
|
37
|
+
},
|
|
38
|
+
],
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
label: "People Experience",
|
|
42
|
+
value: "peopleExperience",
|
|
43
|
+
id: "experience1",
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: "Contact Center",
|
|
49
|
+
value: "contactCenter",
|
|
50
|
+
id: "contact1",
|
|
51
|
+
children: [
|
|
52
|
+
{
|
|
53
|
+
label: "Appointment Management",
|
|
54
|
+
value: "appointmentManagement",
|
|
55
|
+
id: "appointment1",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Customer Service",
|
|
59
|
+
value: "customerService",
|
|
60
|
+
id: "customer1",
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
label: "Energy",
|
|
64
|
+
value: "energy",
|
|
65
|
+
id: "energy1",
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
},
|
|
71
|
+
];
|
|
72
|
+
|
|
73
|
+
function prefixTreeIds(nodes, prefix) {
|
|
74
|
+
return nodes.map((node) => ({
|
|
75
|
+
...node,
|
|
76
|
+
id: `${prefix}${node.id}`,
|
|
77
|
+
children:
|
|
78
|
+
node.children && node.children.length > 0
|
|
79
|
+
? prefixTreeIds(node.children, prefix)
|
|
80
|
+
: node.children,
|
|
81
|
+
}));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
const treeDataMulti = prefixTreeIds(treeTemplate, "phm_");
|
|
85
|
+
const treeDataReturnAll = prefixTreeIds(treeTemplate, "phr_");
|
|
86
|
+
const treeDataSingle = prefixTreeIds(treeTemplate, "phs_");
|
|
87
|
+
|
|
88
|
+
const MultiLevelSelectPlaceholder = () => (
|
|
89
|
+
<>
|
|
90
|
+
<MultiLevelSelect
|
|
91
|
+
id="multi-level-select-placeholder-multi"
|
|
92
|
+
label="Multi (default)"
|
|
93
|
+
marginBottom="sm"
|
|
94
|
+
name="placeholder_multi"
|
|
95
|
+
onSelect={(selectedNodes) =>
|
|
96
|
+
console.log("Multi — default", selectedNodes)
|
|
97
|
+
}
|
|
98
|
+
placeholder="Search or choose options…"
|
|
99
|
+
treeData={treeDataMulti}
|
|
100
|
+
/>
|
|
101
|
+
<MultiLevelSelect
|
|
102
|
+
id="multi-level-select-placeholder-return-all"
|
|
103
|
+
label="Multi (return all selected)"
|
|
104
|
+
marginBottom="sm"
|
|
105
|
+
name="placeholder_return_all"
|
|
106
|
+
onSelect={(selectedNodes) =>
|
|
107
|
+
console.log("Multi — return all selected", selectedNodes)
|
|
108
|
+
}
|
|
109
|
+
placeholder="Departments..."
|
|
110
|
+
returnAllSelected
|
|
111
|
+
treeData={treeDataReturnAll}
|
|
112
|
+
/>
|
|
113
|
+
<MultiLevelSelect
|
|
114
|
+
id="multi-level-select-placeholder-single"
|
|
115
|
+
label="Single"
|
|
116
|
+
name="placeholder_single"
|
|
117
|
+
onSelect={(selectedNodes) =>
|
|
118
|
+
console.log("Single", selectedNodes)
|
|
119
|
+
}
|
|
120
|
+
placeholder="Select one option…"
|
|
121
|
+
treeData={treeDataSingle}
|
|
122
|
+
variant="single"
|
|
123
|
+
/>
|
|
124
|
+
</>
|
|
125
|
+
);
|
|
126
|
+
|
|
127
|
+
export default MultiLevelSelectPlaceholder;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the `placeholder` prop to customize the initial text shown in the input when nothing is selected. The default is `Start typing...`.
|
|
@@ -18,6 +18,7 @@ examples:
|
|
|
18
18
|
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
19
19
|
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
20
20
|
- multi_level_select_required_indicator: Required Indicator
|
|
21
|
+
- multi_level_select_placeholder: Placeholder
|
|
21
22
|
|
|
22
23
|
react:
|
|
23
24
|
- multi_level_select_default: Default
|
|
@@ -40,3 +41,4 @@ examples:
|
|
|
40
41
|
- multi_level_select_single_disabled: Disabled Options (Single Select)
|
|
41
42
|
- multi_level_select_required_indicator: Required Indicator
|
|
42
43
|
- multi_level_select_react_reset_key: Reset with Key (React)
|
|
44
|
+
- multi_level_select_placeholder: Placeholder
|
|
@@ -18,3 +18,4 @@ export { default as MultiLevelSelectLabel } from "./_multi_level_select_label.js
|
|
|
18
18
|
export { default as MultiLevelSelectSingleDisabled } from "./_multi_level_select_single_disabled.jsx"
|
|
19
19
|
export { default as MultiLevelSelectRequiredIndicator } from "./_multi_level_select_required_indicator.jsx"
|
|
20
20
|
export { default as MultiLevelSelectReactResetKey } from "./_multi_level_select_react_reset_key.jsx"
|
|
21
|
+
export { default as MultiLevelSelectPlaceholder } from "./_multi_level_select_placeholder.jsx"
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* eslint-disable react/no-danger */
|
|
2
1
|
/* eslint-disable react/no-multi-comp */
|
|
3
2
|
|
|
4
3
|
import React, { useState } from 'react'
|
|
@@ -38,14 +37,26 @@ const TypeaheadWithHighlight = (props) => {
|
|
|
38
37
|
const [selectedUser, setSelectedUser] = useState()
|
|
39
38
|
|
|
40
39
|
const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
|
|
40
|
+
const escapeRegExp = (value = "") => (
|
|
41
|
+
value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
|
|
42
|
+
)
|
|
41
43
|
|
|
42
|
-
const highlighted = (text) => {
|
|
44
|
+
const highlighted = (text = "") => {
|
|
43
45
|
if (!inputValue.length) return text
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
)
|
|
46
|
+
|
|
47
|
+
const escapedInputValue = escapeRegExp(inputValue)
|
|
48
|
+
const regex = new RegExp(`(${escapedInputValue})`, 'gi')
|
|
49
|
+
const parts = text.split(regex)
|
|
50
|
+
|
|
51
|
+
return parts.map((part, index) => {
|
|
52
|
+
if (part.toLowerCase() === inputValue.toLowerCase()) {
|
|
53
|
+
return <mark key={`${part}-${index}`}>{part}</mark>
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return <React.Fragment key={`${part}-${index}`}>{part}</React.Fragment>
|
|
57
|
+
})
|
|
48
58
|
}
|
|
59
|
+
|
|
49
60
|
return (
|
|
50
61
|
<Flex>
|
|
51
62
|
<FlexItem>
|
|
@@ -61,11 +72,12 @@ const TypeaheadWithHighlight = (props) => {
|
|
|
61
72
|
size={4}
|
|
62
73
|
{...props}
|
|
63
74
|
>
|
|
64
|
-
|
|
75
|
+
{highlighted(name)}
|
|
76
|
+
</Title>
|
|
65
77
|
<Body color="light"
|
|
66
78
|
{...props}
|
|
67
79
|
>
|
|
68
|
-
|
|
80
|
+
{highlighted(title)}{" • "}
|
|
69
81
|
{territory}
|
|
70
82
|
</Body>
|
|
71
83
|
</FlexItem>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
Use `formatOptionLabel` to customize each option row and highlight text that matches the current search input. Split each field (for example, `name` and `title`) by the typed value, then render matching parts inside `<mark>` so users can quickly see why a result matched.
|
|
2
|
+
|
|
3
|
+
See the code snippet below for more details.
|
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.4.0.pre.alpha.
|
|
4
|
+
version: 16.4.0.pre.alpha.play2838formcustomvalidationsconsistency15196
|
|
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-03-
|
|
12
|
+
date: 2026-03-24 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -309,7 +309,8 @@ files:
|
|
|
309
309
|
- app/pb_kits/playbook/pb_button/docs/_button_form.jsx
|
|
310
310
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.html.erb
|
|
311
311
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx
|
|
312
|
-
- app/pb_kits/playbook/pb_button/docs/
|
|
312
|
+
- app/pb_kits/playbook/pb_button/docs/_button_full_width_rails.md
|
|
313
|
+
- app/pb_kits/playbook/pb_button/docs/_button_full_width_react.md
|
|
313
314
|
- app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md
|
|
314
315
|
- app/pb_kits/playbook/pb_button/docs/_button_hover.html.erb
|
|
315
316
|
- app/pb_kits/playbook/pb_button/docs/_button_hover.jsx
|
|
@@ -1461,6 +1462,9 @@ files:
|
|
|
1461
1462
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
|
|
1462
1463
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
|
|
1463
1464
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md
|
|
1465
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.html.erb
|
|
1466
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.jsx
|
|
1467
|
+
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_placeholder.md
|
|
1464
1468
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
|
|
1465
1469
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md
|
|
1466
1470
|
- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_reset_key.jsx
|
|
@@ -2656,6 +2660,7 @@ files:
|
|
|
2656
2660
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
|
|
2657
2661
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
|
|
2658
2662
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx
|
|
2663
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.md
|
|
2659
2664
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
|
|
2660
2665
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
|
|
2661
2666
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
This button is used many times for mobile or other things like cards and sidebars.
|