playbook_ui 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4312 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4303
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_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 +10 -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/dist/chunks/{_typeahead-BJrdFWHc.js → _typeahead-BV_n6U5W.js} +2 -2
- data/dist/chunks/_weekday_stacked-BeZ0h2P0.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- 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 +4 -8
- 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/dist/chunks/_weekday_stacked-CjMIjOgO.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: 0e0a61942ce72178bc4995507346515c1ca4a4347152d168cc9e84061d66231f
|
4
|
+
data.tar.gz: b40339fc9adb7796cdb029c5450f3f3d9065ca3122f3659692bbfd42a94c3c67
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 0dba16c359445b2daebcfcd0f56b4cfd50a678fdf09959ed37cbda194900cabaa6da73d557fe064f1e9f9c89eda514341bf72e7db65df606cd2d96039518c3af
|
7
|
+
data.tar.gz: 2bd784894bceafb2c1fdf90aa9aea4f69d19020e2017c900e03a5f87846b7c04b32cf8c4f1fa5113db4853d4db266978c5836556f9b87af16e529cc0bbaa2dcd
|
@@ -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
|
-
const Dropdown =
|
50
|
+
const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props, ref) => {
|
51
51
|
const {
|
52
52
|
aria = {},
|
53
53
|
autocomplete = false,
|
@@ -260,7 +260,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
|
|
260
260
|
<DropdownContainer>
|
261
261
|
{optionsWithBlankSelection &&
|
262
262
|
optionsWithBlankSelection?.map((option: GenericObject) => (
|
263
|
-
|
263
|
+
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
264
|
+
<ForwardedDropdown.Option key={option.id}
|
264
265
|
option={option}
|
265
266
|
/>
|
266
267
|
))}
|
@@ -278,11 +279,12 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
|
|
278
279
|
</DropdownContext.Provider>
|
279
280
|
</div>
|
280
281
|
)
|
281
|
-
}
|
282
|
+
}
|
282
283
|
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
284
|
+
const ForwardedDropdown = forwardRef(Dropdown) as DropdownComponent;
|
285
|
+
ForwardedDropdown.displayName = "Dropdown";
|
286
|
+
ForwardedDropdown.Option = DropdownOption;
|
287
|
+
ForwardedDropdown.Trigger = DropdownTrigger;
|
288
|
+
ForwardedDropdown.Container = DropdownContainer;
|
287
289
|
|
288
|
-
export default
|
290
|
+
export default ForwardedDropdown;
|
@@ -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 %>
|