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.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_currency/_currency.tsx +6 -16
  3. data/app/pb_kits/playbook/pb_currency/currency.rb +11 -38
  4. data/app/pb_kits/playbook/pb_currency/currency.test.js +0 -35
  5. data/app/pb_kits/playbook/pb_currency/docs/example.yml +1 -3
  6. data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
  7. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +10 -8
  8. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -6
  9. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +26 -30
  10. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +1 -24
  11. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +2 -25
  12. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  13. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +8 -46
  14. data/dist/chunks/{_typeahead-BJrdFWHc.js → _typeahead-BV_n6U5W.js} +2 -2
  15. data/dist/chunks/_weekday_stacked-BeZ0h2P0.js +45 -0
  16. data/dist/chunks/vendor.js +1 -1
  17. data/dist/playbook-doc.js +1 -1
  18. data/dist/playbook-rails-react-bindings.js +1 -1
  19. data/dist/playbook-rails.js +1 -1
  20. data/dist/playbook.css +1 -1
  21. data/lib/playbook/version.rb +1 -1
  22. metadata +4 -8
  23. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +0 -7
  24. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +0 -18
  25. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md +0 -3
  26. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +0 -3
  27. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +0 -1
  28. data/dist/chunks/_weekday_stacked-CjMIjOgO.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 03dac86a0a0da2ba84586aec1ddf5be7d28e1c20c24be64fcff49492d0b67014
4
- data.tar.gz: 7ed399f489ac3f76d72c3b9d5d190c6bf2407ce57cddb04f15b9c60758f2b083
3
+ metadata.gz: 0e0a61942ce72178bc4995507346515c1ca4a4347152d168cc9e84061d66231f
4
+ data.tar.gz: b40339fc9adb7796cdb029c5450f3f3d9065ca3122f3659692bbfd42a94c3c67
5
5
  SHA512:
6
- metadata.gz: 1914f5d92264cccf5e4dc9e3105972ab3595c1b1376f9778e27e88b66044b4d91a78e5db3108343fc42512d81836f2f92005bde21e849d73c7eeec0cfd1efaf8
7
- data.tar.gz: 48deb7e787ea73bbc2c8ee0d37a86debe104436e144aa4b3e4134487a3d81ab956f7436ebd09b63c5692a243c7826a55bdddb900ead5b0d6fa26823579bc6068
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
- const getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
91
+ const getMatchingDecimalAmount = decimals === "matching" ? amount : whole,
92
+ getMatchingDecimalValue = decimals === "matching" ? '' : `.${decimal}`
95
93
 
96
- const formatAmount = (amount: string) => {
97
- if (!commaSeparator) return amount;
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 : formatted_amount,
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
- value = amount.split(".").first
103
- if comma_separator
104
- number_with_delimiter(value.gsub(",", ""))
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 decimal_value
111
- amount.split(".")[1] || "00"
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
- if unit.nil? && !abbreviate
118
- if decimals == "matching"
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
- - currency_comma_separator: Comma Separator
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 = forwardRef((props: DropdownProps, ref: any) => {
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
- <Dropdown.Option key={option.id}
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
- }) as DropdownComponent
282
+ }
282
283
 
283
- Dropdown.displayName = "Dropdown";
284
- Dropdown.Option = DropdownOption;
285
- Dropdown.Trigger = DropdownTrigger;
286
- Dropdown.Container = DropdownContainer;
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 Dropdown;
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
- {renderTitle(name, "pb_form_pill_text")}
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
- {renderTitle(name, "pb_form_pill_text")}
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
- {renderTitle(text, "pb_form_pill_tag")}
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) && renderTitle(text, "pb_form_pill_tag")}
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: "Truncation Within Typeahead",
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 { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
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="Truncation Within Typeahead"
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
- <% if object.truncate %>
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
- <% if object.icon.present? %>
30
- <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
31
- <% end %>
32
- <% if object.truncate %>
33
- <div>
34
- <%= pb_rails("title", props: {
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 %>