playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380 → 14.6.2.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4247
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/_playbook.scss +1 -2
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +6 -16
- data/app/pb_kits/playbook/pb_currency/currency.rb +11 -38
- data/app/pb_kits/playbook/pb_currency/currency.test.js +0 -35
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +7 -8
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -6
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +26 -30
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +1 -24
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +2 -25
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +8 -46
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +2 -2
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +0 -8
- data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
- data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
- data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
- data/app/pb_kits/playbook/tokens/_typography.scss +0 -35
- data/dist/chunks/{_typeahead-BJrdFWHc.js → _typeahead-BV_n6U5W.js} +2 -2
- data/dist/chunks/_weekday_stacked-Cyqgh5-q.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -3
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -39
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +0 -7
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +0 -18
- data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md +0 -3
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +0 -3
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +0 -1
- data/app/pb_kits/playbook/pb_link/_link.scss +0 -66
- data/app/pb_kits/playbook/pb_link/_link.tsx +0 -107
- data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb +0 -30
- data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +0 -40
- data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb +0 -5
- data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +0 -15
- data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb +0 -15
- data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +0 -25
- data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb +0 -35
- data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +0 -45
- data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb +0 -5
- data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +0 -15
- data/app/pb_kits/playbook/pb_link/docs/example.yml +0 -16
- data/app/pb_kits/playbook/pb_link/docs/index.js +0 -5
- data/app/pb_kits/playbook/pb_link/link.html.erb +0 -21
- data/app/pb_kits/playbook/pb_link/link.rb +0 -44
- data/app/pb_kits/playbook/pb_link/link.test.jsx +0 -92
- data/app/pb_kits/playbook/pb_timeline/detail.html.erb +0 -3
- data/app/pb_kits/playbook/pb_timeline/detail.rb +0 -11
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -68
- data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -2
- data/app/pb_kits/playbook/pb_timeline/label.html.erb +0 -12
- data/app/pb_kits/playbook/pb_timeline/label.rb +0 -13
- data/app/pb_kits/playbook/pb_timeline/step.html.erb +0 -14
- data/app/pb_kits/playbook/pb_timeline/step.rb +0 -16
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx +0 -29
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +0 -38
- data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx +0 -42
- data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx +0 -3
- data/dist/chunks/_weekday_stacked-DJWwxF-6.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: '0896cae36211162e8819470663f9dedb1716254cd40cb3a59c20caafd4d23b2d'
|
4
|
+
data.tar.gz: 713356bd680806bce64921cdcdd51e74e562b79b9cee92bff6b7d2ef4602e436
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 41b0df84cd4c1c54944f10026c6fb846bf9cff9016a376750c904321c40b0f7f16a4bf7372078f5d8a8d1f2048766c0726aabf89da3c0db5e79a2f41ecdb62b9
|
7
|
+
data.tar.gz: 92d6d3a078efc32f7de1cff32648381ac14d1bf74ff33ea749ca9fd50d61f5991a2a5a4a9661fb2c50688c6df4880ee34f78dd631882e973abec6b43d805d7a4
|
@@ -30,7 +30,6 @@
|
|
30
30
|
@import 'pb_dialog/dialog';
|
31
31
|
@import 'pb_distribution_bar/distribution_bar';
|
32
32
|
@import 'pb_draggable/draggable';
|
33
|
-
@import 'pb_drawer/drawer';
|
34
33
|
@import 'pb_dropdown/dropdown';
|
35
34
|
@import 'pb_file_upload/file_upload';
|
36
35
|
@import 'pb_filter/filter';
|
@@ -55,7 +54,6 @@
|
|
55
54
|
@import 'pb_legend/legend';
|
56
55
|
@import 'pb_lightbox/lightbox';
|
57
56
|
@import 'pb_line_graph/line_graph';
|
58
|
-
@import 'pb_link/link';
|
59
57
|
@import 'pb_list/list';
|
60
58
|
@import 'pb_loading_inline/loading_inline';
|
61
59
|
@import 'pb_map/map';
|
@@ -108,6 +106,7 @@
|
|
108
106
|
@import 'pb_user_badge/user_badge';
|
109
107
|
@import 'pb_walkthrough/walkthrough';
|
110
108
|
@import 'pb_weekday_stacked/weekday_stacked';
|
109
|
+
@import 'pb_drawer/drawer';
|
111
110
|
@import 'utilities/mixins';
|
112
111
|
@import 'utilities/spacing';
|
113
112
|
@import 'utilities/cursor';
|
@@ -26,7 +26,6 @@ type CurrencyProps = {
|
|
26
26
|
variant?: 'default' | 'light' | 'bold',
|
27
27
|
unit?: string,
|
28
28
|
unstyled?: boolean,
|
29
|
-
commaSeparator?: boolean,
|
30
29
|
}
|
31
30
|
|
32
31
|
const sizes: {lg: 1, md: 3, sm: 4} = {
|
@@ -54,7 +53,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
54
53
|
variant = 'default',
|
55
54
|
dark = false,
|
56
55
|
unstyled = false,
|
57
|
-
commaSeparator = false,
|
58
56
|
} = props
|
59
57
|
|
60
58
|
const emphasizedClass = emphasized ? '' : '_deemphasized'
|
@@ -76,7 +74,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
76
74
|
className
|
77
75
|
)
|
78
76
|
|
79
|
-
const getFormattedNumber = (input: number | any) => new Intl.NumberFormat('en-US', {
|
77
|
+
const getFormattedNumber = (input: number | any ) => new Intl.NumberFormat('en-US', {
|
80
78
|
notation: 'compact',
|
81
79
|
maximumFractionDigits: 1,
|
82
80
|
}).format(input)
|
@@ -90,20 +88,12 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
90
88
|
return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
|
91
89
|
}
|
92
90
|
|
93
|
-
const getMatchingDecimalAmount = decimals === "matching" ? amount : whole
|
94
|
-
|
91
|
+
const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
|
92
|
+
getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
|
95
93
|
|
96
|
-
const
|
97
|
-
|
98
|
-
|
99
|
-
const [wholePart, decimalPart] = amount.split('.');
|
100
|
-
const formattedWhole = new Intl.NumberFormat('en-US').format(parseInt(wholePart));
|
101
|
-
return decimalPart ? `${formattedWhole}.${decimalPart}` : formattedWhole;
|
102
|
-
}
|
103
|
-
|
104
|
-
const getAmount = abbreviate ? getAbbreviatedValue('amount') : formatAmount(getMatchingDecimalAmount)
|
105
|
-
const getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null
|
106
|
-
const getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
|
94
|
+
const getAmount = abbreviate ? getAbbreviatedValue('amount') : getMatchingDecimalAmount,
|
95
|
+
getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
|
96
|
+
getDecimalValue = abbreviate ? '' : getMatchingDecimalValue
|
107
97
|
|
108
98
|
return (
|
109
99
|
<div
|
@@ -43,9 +43,6 @@ module Playbook
|
|
43
43
|
prop :unstyled, type: Playbook::Props::Boolean,
|
44
44
|
default: false
|
45
45
|
|
46
|
-
prop :comma_separator, type: Playbook::Props::Boolean,
|
47
|
-
default: false
|
48
|
-
|
49
46
|
def classname
|
50
47
|
generate_classname("pb_currency_kit", align, size, dark_class)
|
51
48
|
end
|
@@ -68,7 +65,7 @@ module Playbook
|
|
68
65
|
def title_props
|
69
66
|
{
|
70
67
|
size: size_value,
|
71
|
-
text: abbreviate ? abbreviated_value :
|
68
|
+
text: abbreviate ? abbreviated_value : whole_value,
|
72
69
|
classname: "pb_currency_value",
|
73
70
|
dark: dark,
|
74
71
|
}
|
@@ -99,38 +96,28 @@ module Playbook
|
|
99
96
|
private
|
100
97
|
|
101
98
|
def whole_value
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
else
|
106
|
-
value
|
107
|
-
end
|
99
|
+
return amount if decimals == "matching"
|
100
|
+
|
101
|
+
amount.split(".").first.to_s
|
108
102
|
end
|
109
103
|
|
110
|
-
def
|
111
|
-
amount.split(".")
|
104
|
+
def abbreviated_value(index = 0..-2)
|
105
|
+
value = amount.split(".").first.split(",").join("")
|
106
|
+
abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
|
107
|
+
abbreviated_num[index]
|
112
108
|
end
|
113
109
|
|
114
110
|
def units_element
|
115
111
|
return "" if decimals == "matching" && !abbreviate && !unit
|
116
112
|
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
else
|
121
|
-
".#{decimal_value}"
|
122
|
-
end
|
113
|
+
_, decimal_part = amount.split(".")
|
114
|
+
if unit.nil? && abbreviate == false
|
115
|
+
decimal_part.nil? ? ".00" : ".#{decimal_part}"
|
123
116
|
else
|
124
117
|
abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
|
125
118
|
end
|
126
119
|
end
|
127
120
|
|
128
|
-
def abbreviated_value(index = 0..-2)
|
129
|
-
value = amount.split(".").first.gsub(",", "").to_i
|
130
|
-
abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "")
|
131
|
-
abbreviated_num[index]
|
132
|
-
end
|
133
|
-
|
134
121
|
def size_value
|
135
122
|
case size
|
136
123
|
when "lg"
|
@@ -145,20 +132,6 @@ module Playbook
|
|
145
132
|
def dark_class
|
146
133
|
dark ? "dark" : nil
|
147
134
|
end
|
148
|
-
|
149
|
-
def formatted_amount
|
150
|
-
return abbreviated_value if abbreviate
|
151
|
-
|
152
|
-
if decimals == "matching"
|
153
|
-
if comma_separator
|
154
|
-
number_with_delimiter(amount.gsub(",", ""))
|
155
|
-
else
|
156
|
-
amount
|
157
|
-
end
|
158
|
-
else
|
159
|
-
whole_value
|
160
|
-
end
|
161
|
-
end
|
162
135
|
end
|
163
136
|
end
|
164
137
|
end
|
@@ -61,38 +61,3 @@ test('decimals default prop returns decimals as body text', () => {
|
|
61
61
|
expect(currencyKit.querySelector('.pb_currency_value')).toHaveTextContent('320')
|
62
62
|
expect(currencyKit.querySelector('.unit')).toHaveTextContent('.20')
|
63
63
|
})
|
64
|
-
|
65
|
-
|
66
|
-
test('commaSeparator prop returns comma separated amount', () => {
|
67
|
-
render(
|
68
|
-
<Currency
|
69
|
-
amount="1234567890"
|
70
|
-
commaSeparator
|
71
|
-
data={{ testid: 'comma-test' }}
|
72
|
-
/>
|
73
|
-
)
|
74
|
-
expect(screen.getByTestId('comma-test')).toHaveTextContent('1,234,567,890')
|
75
|
-
})
|
76
|
-
|
77
|
-
test('commaSeparator prop returns comma separated amount with decimals', () => {
|
78
|
-
render(
|
79
|
-
<Currency
|
80
|
-
amount="1234567890.12"
|
81
|
-
commaSeparator
|
82
|
-
data={{ testid: 'comma-test-decimals' }}
|
83
|
-
/>
|
84
|
-
)
|
85
|
-
expect(screen.getByTestId('comma-test-decimals')).toHaveTextContent('1,234,567,890.12')
|
86
|
-
})
|
87
|
-
|
88
|
-
test('commaSeparator prop returns comma separated amount with decimals="matching"', () => {
|
89
|
-
render(
|
90
|
-
<Currency
|
91
|
-
amount="1234567890.12"
|
92
|
-
commaSeparator
|
93
|
-
data={{ testid: 'comma-test-decimals-matching' }}
|
94
|
-
decimals="matching"
|
95
|
-
/>
|
96
|
-
)
|
97
|
-
expect(screen.getByTestId('comma-test-decimals-matching')).toHaveTextContent('1,234,567,890.12')
|
98
|
-
})
|
@@ -8,8 +8,7 @@ examples:
|
|
8
8
|
- currency_abbreviated: Abbreviate Larger Amounts
|
9
9
|
- currency_matching_decimals: Matching Decimals
|
10
10
|
- currency_unstyled: Unstyled
|
11
|
-
|
12
|
-
|
11
|
+
|
13
12
|
react:
|
14
13
|
- currency_variants: Variants
|
15
14
|
- currency_size: Size
|
@@ -18,7 +17,6 @@ examples:
|
|
18
17
|
- currency_abbreviated: Abbreviate Larger Amounts
|
19
18
|
- currency_matching_decimals: Matching Decimals
|
20
19
|
- currency_unstyled: Unstyled
|
21
|
-
- currency_comma_separator: Comma Separator
|
22
20
|
|
23
21
|
swift:
|
24
22
|
- currency_size_swift: Size
|
@@ -5,4 +5,3 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
|
|
5
5
|
export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
|
6
6
|
export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
|
7
7
|
export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
|
8
|
-
export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
|
@@ -47,7 +47,7 @@ interface DropdownComponent
|
|
47
47
|
Container: typeof DropdownContainer;
|
48
48
|
}
|
49
49
|
|
50
|
-
|
50
|
+
const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
|
51
51
|
const {
|
52
52
|
aria = {},
|
53
53
|
autocomplete = false,
|
@@ -260,7 +260,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
260
260
|
<DropdownContainer>
|
261
261
|
{optionsWithBlankSelection &&
|
262
262
|
optionsWithBlankSelection?.map((option: GenericObject) => (
|
263
|
-
<
|
263
|
+
<Dropdown.Option key={option.id}
|
264
264
|
option={option}
|
265
265
|
/>
|
266
266
|
))}
|
@@ -278,12 +278,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
278
278
|
</DropdownContext.Provider>
|
279
279
|
</div>
|
280
280
|
)
|
281
|
-
}
|
281
|
+
}) as DropdownComponent
|
282
282
|
|
283
|
-
Dropdown =
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
(Dropdown as DropdownComponent).Container = DropdownContainer;
|
283
|
+
Dropdown.displayName = "Dropdown";
|
284
|
+
Dropdown.Option = DropdownOption;
|
285
|
+
Dropdown.Trigger = DropdownTrigger;
|
286
|
+
Dropdown.Container = DropdownContainer;
|
288
287
|
|
289
288
|
export default Dropdown;
|
@@ -142,9 +142,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
|
|
142
142
|
height: 12px !important;
|
143
143
|
width: 12px !important;
|
144
144
|
padding-right: $space_xs;
|
145
|
-
+ .pb_form_pill_text, + .pb_form_pill_tag
|
146
|
-
+ .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
|
147
|
-
+ div .pb_form_pill_text, + div .pb_form_pill_tag {
|
145
|
+
+ .pb_form_pill_text, + .pb_form_pill_tag {
|
148
146
|
padding-left: 0;
|
149
147
|
}
|
150
148
|
}
|
@@ -171,9 +169,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
|
|
171
169
|
}
|
172
170
|
.pb_form_pill_icon {
|
173
171
|
padding-right: $space_xxs;
|
174
|
-
+ .pb_form_pill_text, + .pb_form_pill_tag
|
175
|
-
+ .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
|
176
|
-
+ div .pb_form_pill_text, + div .pb_form_pill_tag {
|
172
|
+
+ .pb_form_pill_text, + .pb_form_pill_tag {
|
177
173
|
padding-left: 0;
|
178
174
|
}
|
179
175
|
}
|
@@ -3,7 +3,6 @@ import classnames from 'classnames'
|
|
3
3
|
import Title from '../pb_title/_title'
|
4
4
|
import Icon from '../pb_icon/_icon'
|
5
5
|
import Avatar from '../pb_avatar/_avatar'
|
6
|
-
import Tooltip from '../pb_tooltip/_tooltip'
|
7
6
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
8
7
|
import { buildDataProps, buildHtmlProps } from '../utilities/props'
|
9
8
|
|
@@ -63,30 +62,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
63
62
|
const dataProps = buildDataProps(data)
|
64
63
|
const htmlProps = buildHtmlProps(htmlOptions)
|
65
64
|
|
66
|
-
const renderTitle = (content: string, className: string) => {
|
67
|
-
const titleComponent = (
|
68
|
-
<Title
|
69
|
-
className={className}
|
70
|
-
size={4}
|
71
|
-
text={content}
|
72
|
-
truncate={props.truncate}
|
73
|
-
/>
|
74
|
-
)
|
75
|
-
if (props.truncate) {
|
76
|
-
return (
|
77
|
-
<Tooltip
|
78
|
-
interaction
|
79
|
-
placement="top"
|
80
|
-
position="fixed"
|
81
|
-
text={content}
|
82
|
-
>
|
83
|
-
{titleComponent}
|
84
|
-
</Tooltip>
|
85
|
-
)
|
86
|
-
}
|
87
|
-
return titleComponent
|
88
|
-
}
|
89
|
-
|
90
65
|
return (
|
91
66
|
<div className={css}
|
92
67
|
id={id}
|
@@ -102,7 +77,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
102
77
|
size="xxs"
|
103
78
|
status={null}
|
104
79
|
/>
|
105
|
-
|
80
|
+
<Title
|
81
|
+
className="pb_form_pill_text"
|
82
|
+
size={4}
|
83
|
+
text={name}
|
84
|
+
truncate={props.truncate}
|
85
|
+
/>
|
106
86
|
</>
|
107
87
|
)}
|
108
88
|
{((name && icon && !text) || (name && icon && text)) && (
|
@@ -113,7 +93,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
113
93
|
size="xxs"
|
114
94
|
status={null}
|
115
95
|
/>
|
116
|
-
|
96
|
+
<Title
|
97
|
+
className="pb_form_pill_text"
|
98
|
+
size={4}
|
99
|
+
text={name}
|
100
|
+
truncate={props.truncate}
|
101
|
+
/>
|
117
102
|
<Icon
|
118
103
|
className="pb_form_pill_icon"
|
119
104
|
color={color}
|
@@ -128,10 +113,22 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
128
113
|
color={color}
|
129
114
|
icon={icon}
|
130
115
|
/>
|
131
|
-
|
116
|
+
<Title
|
117
|
+
className="pb_form_pill_tag"
|
118
|
+
size={4}
|
119
|
+
text={text}
|
120
|
+
truncate={props.truncate}
|
121
|
+
/>
|
132
122
|
</>
|
133
123
|
)}
|
134
|
-
{(!name && !icon && text) &&
|
124
|
+
{(!name && !icon && text) && (
|
125
|
+
<Title
|
126
|
+
className="pb_form_pill_tag"
|
127
|
+
size={4}
|
128
|
+
text={text}
|
129
|
+
truncate={props.truncate}
|
130
|
+
/>
|
131
|
+
)}
|
135
132
|
<div
|
136
133
|
className="pb_form_pill_close"
|
137
134
|
onClick={onClick}
|
@@ -146,5 +143,4 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
146
143
|
</div>
|
147
144
|
)
|
148
145
|
}
|
149
|
-
|
150
146
|
export default FormPill
|
@@ -13,30 +13,7 @@
|
|
13
13
|
id: "typeahead-form-pill",
|
14
14
|
is_multi: true,
|
15
15
|
options: names,
|
16
|
-
label: "
|
16
|
+
label: "Names",
|
17
17
|
pills: true,
|
18
18
|
truncate: 1,
|
19
19
|
}) %>
|
20
|
-
|
21
|
-
<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
|
22
|
-
<%= pb_rails("card", props: { max_width: "xs" }) do %>
|
23
|
-
<%= pb_rails("form_pill", props: {
|
24
|
-
name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
|
25
|
-
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
|
26
|
-
tabindex: 0,
|
27
|
-
truncate: 1,
|
28
|
-
id: "truncation-1"
|
29
|
-
}) %>
|
30
|
-
<%= pb_rails("form_pill", props: {
|
31
|
-
icon: "badge-check",
|
32
|
-
text: "icon and a very long tag to show truncation",
|
33
|
-
tabindex: 0,
|
34
|
-
truncate: 1,
|
35
|
-
id: "truncation-2"
|
36
|
-
}) %>
|
37
|
-
<%= pb_rails("form_pill", props: {
|
38
|
-
text: "form pill long tag no tooltip show truncation",
|
39
|
-
tabindex: 0,
|
40
|
-
truncate: 1,
|
41
|
-
}) %>
|
42
|
-
<% end %>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import
|
2
|
+
import Typeahead from '../../pb_typeahead/_typeahead'
|
3
3
|
|
4
4
|
const names = [
|
5
5
|
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
|
@@ -15,34 +15,11 @@ const FormPillTruncatedText = (props) => {
|
|
15
15
|
<Typeahead
|
16
16
|
htmlOptions={{ style: { maxWidth: "240px" }}}
|
17
17
|
isMulti
|
18
|
-
label="
|
18
|
+
label="Names"
|
19
19
|
options={names}
|
20
20
|
truncate={1}
|
21
21
|
{...props}
|
22
22
|
/>
|
23
|
-
<Caption text="Form Pill Truncation"/>
|
24
|
-
<Card maxWidth="xs">
|
25
|
-
<FormPill
|
26
|
-
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
27
|
-
name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
|
28
|
-
onClick={() => alert('Click!')}
|
29
|
-
tabIndex={0}
|
30
|
-
truncate={1}
|
31
|
-
/>
|
32
|
-
<FormPill
|
33
|
-
icon="badge-check"
|
34
|
-
onClick={() => {alert('Click!')}}
|
35
|
-
tabIndex={0}
|
36
|
-
text="icon and a very long tag to show truncation"
|
37
|
-
truncate={1}
|
38
|
-
/>
|
39
|
-
<FormPill
|
40
|
-
onClick={() => {alert('Click!')}}
|
41
|
-
tabIndex={0}
|
42
|
-
text="form pill with a very long tag to show truncation"
|
43
|
-
truncate={1}
|
44
|
-
/>
|
45
|
-
</Card>
|
46
23
|
</>
|
47
24
|
)
|
48
25
|
}
|
@@ -0,0 +1 @@
|
|
1
|
+
For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
|
@@ -1,57 +1,19 @@
|
|
1
1
|
<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
|
2
2
|
<% if object.name.present? %>
|
3
3
|
<%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
|
4
|
-
|
5
|
-
<div>
|
6
|
-
<%= pb_rails("title", props: {
|
7
|
-
classname: "pb_form_pill_text truncate_#{object.truncate}",
|
8
|
-
id: object.id,
|
9
|
-
size: 4,
|
10
|
-
text: object.name,
|
11
|
-
}) %>
|
12
|
-
<% if object.id.present? %>
|
13
|
-
<%= pb_rails("tooltip", props: {
|
14
|
-
position: "top",
|
15
|
-
tooltip_id: "tooltip-#{object.id}",
|
16
|
-
trigger_element_selector: "##{object.id}"
|
17
|
-
}) do %>
|
18
|
-
<%= object.name %>
|
19
|
-
<% end %>
|
20
|
-
<% end %>
|
21
|
-
</div>
|
22
|
-
<% else %>
|
23
|
-
<%= pb_rails("title", props: { classname: "pb_form_pill_text", id: object.id, size: 4, text: object.name }) %>
|
24
|
-
<% end %>
|
4
|
+
<%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
|
25
5
|
<% if object.icon.present? %>
|
26
6
|
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
|
27
7
|
<% end %>
|
28
8
|
<% elsif object.text.present? %>
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
classname: "pb_form_pill_tag truncate_#{object.truncate}",
|
36
|
-
id: object.id,
|
37
|
-
size: 4,
|
38
|
-
text: object.text,
|
39
|
-
}) %>
|
40
|
-
<% if object.id.present? %>
|
41
|
-
<%= pb_rails("tooltip", props: {
|
42
|
-
position: "top",
|
43
|
-
tooltip_id: "tooltip-#{object.id}",
|
44
|
-
trigger_element_selector: "##{object.id}"
|
45
|
-
}) do %>
|
46
|
-
<%= object.text %>
|
47
|
-
<% end %>
|
48
|
-
<% end %>
|
49
|
-
</div>
|
50
|
-
<% else %>
|
51
|
-
<%= pb_rails("title", props: { classname: "pb_form_pill_tag", id: object.id, size: 4, text: object.text, }) %>
|
52
|
-
<% end %>
|
9
|
+
<% if object.icon.present? %>
|
10
|
+
<%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
|
11
|
+
<% end %>
|
12
|
+
<% if object.text.present? %>
|
13
|
+
<%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
|
14
|
+
<% end %>
|
53
15
|
<% end %>
|
54
16
|
<%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
|
55
17
|
<%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
|
56
18
|
<% end %>
|
57
|
-
<% end %>
|
19
|
+
<% end %>
|
@@ -66,8 +66,8 @@ const SelectableCard = (props: SelectableCardProps) => {
|
|
66
66
|
'checked': checked,
|
67
67
|
'disabled': disabled,
|
68
68
|
'enabled': !disabled,
|
69
|
+
'display_input': variant === 'displayInput',
|
69
70
|
}),
|
70
|
-
variant === 'displayInput' ? 'display_input' : '',
|
71
71
|
{ error },
|
72
72
|
dark ? 'dark' : '',
|
73
73
|
className
|
@@ -25,7 +25,7 @@ module Playbook
|
|
25
25
|
|
26
26
|
def classname
|
27
27
|
[
|
28
|
-
generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class
|
28
|
+
generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class, display_input_class),
|
29
29
|
error_class,
|
30
30
|
dark_props,
|
31
31
|
].compact.join(" ")
|
@@ -81,7 +81,7 @@ module Playbook
|
|
81
81
|
end
|
82
82
|
|
83
83
|
def display_input_class
|
84
|
-
variant == "display_input" ? "
|
84
|
+
variant == "display_input" ? "display_input" : nil
|
85
85
|
end
|
86
86
|
end
|
87
87
|
end
|