playbook_ui 12.27.0.pre.alpha.expandednotworking853 → 12.28.0.pre.alpha.20230613implementbakesupport865
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +26 -5
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +26 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +30 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md +3 -0
- 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 +2 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.html.erb +11 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.jsx +36 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.md +19 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +2 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +2 -0
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +1 -1
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +2 -0
- data/dist/playbook-rails.js +4 -4
- data/lib/playbook/version.rb +2 -2
- metadata +9 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 62eedbdec361bff235a7ebde79c752faa859b91299c6f95eaa2c3ec23e91abf2
|
|
4
|
+
data.tar.gz: 550f326d274477581aa51f988951324a83431324e67a7e08f5c46563af295b26
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3c2068cc5d7a0a63feee16c002e6e4b9b5ec441d937753f7e35bd80a2f4dc3af6946f4c05d9d74a44a3003fa8d4ff94a34b4e1767eb1ae3f1d7d8eaa2bc72435
|
|
7
|
+
data.tar.gz: 866b7ce2934c27dcec593eeb6cea2e3728f81f0ce4b7590483e2e4f17f62c09843da42b26507a5f11246df25aa2ff93692c1b5301804013f2f1d1fed2aba9a42
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { forwardRef, useEffect, useRef, useState } from 'react'
|
|
1
|
+
import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
|
|
4
4
|
import intlTelInput from 'intl-tel-input'
|
|
@@ -64,7 +64,7 @@ const containOnlyNumbers = (value: string) => {
|
|
|
64
64
|
return /^[()+\-\ .\d]*$/g.test(value)
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
67
|
+
const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
|
|
68
68
|
const {
|
|
69
69
|
aria = {},
|
|
70
70
|
className,
|
|
@@ -111,6 +111,23 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
|
111
111
|
}
|
|
112
112
|
}, [error, onValidate])
|
|
113
113
|
|
|
114
|
+
/*
|
|
115
|
+
useImperativeHandle exposes the kit's input element to a parent component via a ref.
|
|
116
|
+
See the Playbook docs for use cases.
|
|
117
|
+
Read: https://react.dev/reference/react/useImperativeHandle
|
|
118
|
+
*/
|
|
119
|
+
useImperativeHandle(ref, () => {
|
|
120
|
+
return {
|
|
121
|
+
clearField() {
|
|
122
|
+
setInputValue("")
|
|
123
|
+
setError("")
|
|
124
|
+
},
|
|
125
|
+
inputNode() {
|
|
126
|
+
return inputRef.current
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
})
|
|
130
|
+
|
|
114
131
|
const showFormattedError = (reason = '') => {
|
|
115
132
|
const countryName = itiInit.getSelectedCountryData().name
|
|
116
133
|
const reasonText = reason.length > 0 ? ` (${reason})` : ''
|
|
@@ -201,8 +218,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
|
201
218
|
allowDropdown: !disabled,
|
|
202
219
|
autoInsertDialCode: false,
|
|
203
220
|
initialCountry,
|
|
204
|
-
onlyCountries
|
|
205
|
-
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.6/js/utils.min.js"
|
|
221
|
+
onlyCountries
|
|
206
222
|
})
|
|
207
223
|
|
|
208
224
|
inputRef.current.addEventListener("countrychange", (evt: Event) => {
|
|
@@ -242,7 +258,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
|
|
|
242
258
|
return (
|
|
243
259
|
<div {...wrapperProps}>
|
|
244
260
|
<TextInput
|
|
245
|
-
ref={
|
|
261
|
+
ref={
|
|
262
|
+
inputNode => {
|
|
263
|
+
ref ? ref.current = inputNode : null
|
|
264
|
+
inputRef.current = inputNode
|
|
265
|
+
}
|
|
266
|
+
}
|
|
246
267
|
{...textInputProps}
|
|
247
268
|
/>
|
|
248
269
|
</div>
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react'
|
|
2
|
+
import { Body, PhoneNumberInput } from '../..'
|
|
3
|
+
|
|
4
|
+
const PhoneNumberInputAccessInputElement = (props) => {
|
|
5
|
+
// 1. Create a ref - this accesses the kit's input element.
|
|
6
|
+
const ref = useRef()
|
|
7
|
+
|
|
8
|
+
// 2. Add any event listener to ref.current.inputNode() inside a useEffect hook and trigger it once.
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
|
|
11
|
+
}, [])
|
|
12
|
+
|
|
13
|
+
// 3. Pass the ref to the ref prop.
|
|
14
|
+
return (
|
|
15
|
+
<>
|
|
16
|
+
<Body text="Click the input field below:" />
|
|
17
|
+
<PhoneNumberInput
|
|
18
|
+
id="access-input-element"
|
|
19
|
+
ref={ref}
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
</>
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export default PhoneNumberInputAccessInputElement
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`. Calling `useEffect` with an empty dependency array ensures your event listeners won't be added twice.
|
|
2
|
+
|
|
3
|
+
`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React, { useRef } from 'react'
|
|
2
|
+
import { Button, PhoneNumberInput } from '../..'
|
|
3
|
+
|
|
4
|
+
const PhoneNumberInputClearField = (props) => {
|
|
5
|
+
// 1. Create a ref - this accesses the kit's input element.
|
|
6
|
+
const ref = useRef()
|
|
7
|
+
|
|
8
|
+
// 2. Use clearField() to clear the field.
|
|
9
|
+
const handleClick = () => {
|
|
10
|
+
ref.current.clearField()
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// 3. Pass the ref to the ref prop.
|
|
14
|
+
return (
|
|
15
|
+
<>
|
|
16
|
+
<PhoneNumberInput
|
|
17
|
+
id="clear-field"
|
|
18
|
+
ref={ref}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
<Button
|
|
23
|
+
onClick={handleClick}
|
|
24
|
+
text="Clear the Input Field"
|
|
25
|
+
/>
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export default PhoneNumberInputClearField
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
To clear a number inside the input element, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.clearField()`.
|
|
2
|
+
|
|
3
|
+
`clearField()` is a custom function inside the kit to clear numbers and the error message while still providing validation.
|
|
@@ -6,6 +6,8 @@ examples:
|
|
|
6
6
|
- phone_number_input_initial_country: Initial Country
|
|
7
7
|
- phone_number_input_only_countries: Limited Countries
|
|
8
8
|
- phone_number_input_validation: Form Validation
|
|
9
|
+
- phone_number_input_clear_field: Clearing the Input Field
|
|
10
|
+
- phone_number_input_access_input_element: Accessing the Input Element
|
|
9
11
|
|
|
10
12
|
rails:
|
|
11
13
|
- phone_number_input_default: Default
|
|
@@ -3,3 +3,5 @@ export { default as PhoneNumberInputPreferredCountries } from './_phone_number_i
|
|
|
3
3
|
export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
|
|
4
4
|
export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
|
|
5
5
|
export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
|
|
6
|
+
export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
|
|
7
|
+
export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<div class="pb--doc-demo-row">
|
|
2
|
+
<% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("selectable_card_icon", props: {
|
|
5
|
+
custom_icon: svg_url,
|
|
6
|
+
title_text: "Customization",
|
|
7
|
+
body_text: "Personalize everything",
|
|
8
|
+
input_id: 1,
|
|
9
|
+
checked: true,
|
|
10
|
+
}) %>
|
|
11
|
+
</div>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import SelectableCardIcon from '../_selectable_card_icon'
|
|
3
|
+
|
|
4
|
+
const svg = {
|
|
5
|
+
newChat: (
|
|
6
|
+
<svg
|
|
7
|
+
ariaHidden="true"
|
|
8
|
+
focusable="false"
|
|
9
|
+
role="img"
|
|
10
|
+
viewBox="0 0 512 512"
|
|
11
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
|
|
15
|
+
fill="currentColor"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
),
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const SelectableCardIconCustom = (props) => {
|
|
22
|
+
return (
|
|
23
|
+
<div className="pb--doc-demo-row">
|
|
24
|
+
<SelectableCardIcon
|
|
25
|
+
bodyText="Talk to someone you love"
|
|
26
|
+
checked
|
|
27
|
+
customIcon={svg.newChat}
|
|
28
|
+
inputId={1}
|
|
29
|
+
titleText="New Chat"
|
|
30
|
+
{...props}
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export default SelectableCardIconCustom
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Tips for Custom Icons
|
|
2
|
+
|
|
3
|
+
When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
|
|
4
|
+
|
|
5
|
+
Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
|
|
6
|
+
|
|
7
|
+
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
|
|
8
|
+
|
|
9
|
+
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
|
|
10
|
+
|
|
11
|
+
You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
|
|
12
|
+
|
|
13
|
+
### React
|
|
14
|
+
|
|
15
|
+
So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
|
|
16
|
+
|
|
17
|
+
### Rails
|
|
18
|
+
|
|
19
|
+
Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
|
|
@@ -5,10 +5,10 @@ examples:
|
|
|
5
5
|
- selectable_card_icon_checkmark: Checkmark
|
|
6
6
|
- selectable_card_icon_single_select: Single Select
|
|
7
7
|
- selectable_card_icon_options: With Options
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
- selectable_card_icon_custom: Custom Icon
|
|
10
9
|
|
|
11
10
|
react:
|
|
12
11
|
- selectable_card_icon_default: Default
|
|
13
12
|
- selectable_card_icon_checkmark: Checkmark
|
|
14
13
|
- selectable_card_icon_single_select: Single Select
|
|
14
|
+
- selectable_card_icon_custom: Custom Icon
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
|
|
2
2
|
export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
|
|
3
3
|
export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
|
|
4
|
+
export { default as SelectableCardIconCustom } from './_selectable_card_icon_custom.jsx'
|
|
@@ -8,12 +8,14 @@
|
|
|
8
8
|
value: object.value,
|
|
9
9
|
checked: object.checked,
|
|
10
10
|
disabled: object.disabled,
|
|
11
|
+
custom_icon: object.custom_icon,
|
|
11
12
|
icon: object.checkmark,
|
|
12
13
|
multi: object.multi,
|
|
13
14
|
dark: object.dark,
|
|
14
15
|
input_options: object.input_options
|
|
15
16
|
}) do %>
|
|
16
17
|
<%= pb_rails("selectable_icon", props: {
|
|
18
|
+
custom_icon: object.custom_icon,
|
|
17
19
|
icon: object.icon,
|
|
18
20
|
inputs: "disabled",
|
|
19
21
|
text: object.title_text,
|
|
@@ -4,6 +4,8 @@ module Playbook
|
|
|
4
4
|
module PbSelectableCardIcon
|
|
5
5
|
class SelectableCardIcon < Playbook::KitBase
|
|
6
6
|
# Icon and text props
|
|
7
|
+
prop :custom_icon, type: Playbook::Props::String,
|
|
8
|
+
default: nil
|
|
7
9
|
prop :icon, type: Playbook::Props::String
|
|
8
10
|
prop :title_text, type: Playbook::Props::String
|
|
9
11
|
prop :body_text, type: Playbook::Props::String
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
<% if object.inputs == "disabled" %>
|
|
7
7
|
|
|
8
|
-
<%= pb_rails("icon", props: { icon: object.icon, size: "2x" }) %>
|
|
8
|
+
<%= pb_rails("icon", props: { custom_icon: object.custom_icon, icon: object.icon, size: "2x" }) %>
|
|
9
9
|
<%= pb_rails("title", props: { text: object.text, tag: "h4", size: 4 }) %>
|
|
10
10
|
|
|
11
11
|
<% else %>
|
|
@@ -4,6 +4,8 @@ module Playbook
|
|
|
4
4
|
module PbSelectableIcon
|
|
5
5
|
class SelectableIcon < Playbook::KitBase
|
|
6
6
|
# Icon props
|
|
7
|
+
prop :custom_icon, type: Playbook::Props::String,
|
|
8
|
+
default: nil
|
|
7
9
|
prop :icon, type: Playbook::Props::String
|
|
8
10
|
# Title text
|
|
9
11
|
prop :text, type: Playbook::Props::String
|