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.
Files changed (71) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -2
  3. data/app/pb_kits/playbook/pb_currency/_currency.tsx +6 -16
  4. data/app/pb_kits/playbook/pb_currency/currency.rb +11 -38
  5. data/app/pb_kits/playbook/pb_currency/currency.test.js +0 -35
  6. data/app/pb_kits/playbook/pb_currency/docs/example.yml +1 -3
  7. data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
  8. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +7 -8
  9. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -6
  10. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +26 -30
  11. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +1 -24
  12. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +2 -25
  13. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +1 -0
  14. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +8 -46
  15. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -1
  16. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -1
  17. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +2 -2
  18. data/app/pb_kits/playbook/pb_timeline/_item.tsx +23 -59
  19. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +0 -8
  20. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +1 -2
  21. data/app/pb_kits/playbook/pb_timeline/docs/index.js +0 -1
  22. data/app/pb_kits/playbook/pb_timeline/item.html.erb +21 -17
  23. data/app/pb_kits/playbook/pb_timeline/item.rb +0 -4
  24. data/app/pb_kits/playbook/pb_timeline/timeline.test.js +0 -84
  25. data/app/pb_kits/playbook/tokens/_typography.scss +0 -35
  26. data/dist/chunks/{_typeahead-BJrdFWHc.js → _typeahead-BV_n6U5W.js} +2 -2
  27. data/dist/chunks/_weekday_stacked-Cyqgh5-q.js +45 -0
  28. data/dist/chunks/vendor.js +1 -1
  29. data/dist/menu.yml +0 -3
  30. data/dist/playbook-doc.js +1 -1
  31. data/dist/playbook-rails-react-bindings.js +1 -1
  32. data/dist/playbook-rails.js +1 -1
  33. data/dist/playbook.css +1 -1
  34. data/lib/playbook/version.rb +1 -1
  35. metadata +5 -39
  36. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb +0 -7
  37. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx +0 -18
  38. data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md +0 -3
  39. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md +0 -3
  40. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md +0 -1
  41. data/app/pb_kits/playbook/pb_link/_link.scss +0 -66
  42. data/app/pb_kits/playbook/pb_link/_link.tsx +0 -107
  43. data/app/pb_kits/playbook/pb_link/docs/_link_color.html.erb +0 -30
  44. data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +0 -40
  45. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb +0 -5
  46. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +0 -15
  47. data/app/pb_kits/playbook/pb_link/docs/_link_icon.html.erb +0 -15
  48. data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +0 -25
  49. data/app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb +0 -35
  50. data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +0 -45
  51. data/app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb +0 -5
  52. data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +0 -15
  53. data/app/pb_kits/playbook/pb_link/docs/example.yml +0 -16
  54. data/app/pb_kits/playbook/pb_link/docs/index.js +0 -5
  55. data/app/pb_kits/playbook/pb_link/link.html.erb +0 -21
  56. data/app/pb_kits/playbook/pb_link/link.rb +0 -44
  57. data/app/pb_kits/playbook/pb_link/link.test.jsx +0 -92
  58. data/app/pb_kits/playbook/pb_timeline/detail.html.erb +0 -3
  59. data/app/pb_kits/playbook/pb_timeline/detail.rb +0 -11
  60. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -43
  61. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -68
  62. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md +0 -2
  63. data/app/pb_kits/playbook/pb_timeline/label.html.erb +0 -12
  64. data/app/pb_kits/playbook/pb_timeline/label.rb +0 -13
  65. data/app/pb_kits/playbook/pb_timeline/step.html.erb +0 -14
  66. data/app/pb_kits/playbook/pb_timeline/step.rb +0 -16
  67. data/app/pb_kits/playbook/pb_timeline/subcomponents/Detail.tsx +0 -29
  68. data/app/pb_kits/playbook/pb_timeline/subcomponents/Label.tsx +0 -38
  69. data/app/pb_kits/playbook/pb_timeline/subcomponents/Step.tsx +0 -42
  70. data/app/pb_kits/playbook/pb_timeline/subcomponents/index.tsx +0 -3
  71. 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: 2150b988f879193d665933bcff4a30e8da5ce3b01d92f9b647521594520306ac
4
- data.tar.gz: 7023762038f258f24a3699ad06e2dc2f05c600de89cbce803b569aecb7da9f31
3
+ metadata.gz: '0896cae36211162e8819470663f9dedb1716254cd40cb3a59c20caafd4d23b2d'
4
+ data.tar.gz: 713356bd680806bce64921cdcdd51e74e562b79b9cee92bff6b7d2ef4602e436
5
5
  SHA512:
6
- metadata.gz: d96de439d140f402f0f7d09483ac2278133f633303c5fed4e15c00748ece77053751874cc0b28a29797e4070e34e762ee32c2aa099ff306556be184a69014044
7
- data.tar.gz: 17a2d95ea8a35b7dedb4dc48746a82a02abfb93c6211f8caa9bd6716a364c0b443590f0f3be8d1316d93d392b260375d80d0811da8ae2f6d9126b244a8527d47
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
- 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
- let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
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
- <DropdownOption key={option.id}
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 = forwardRef(Dropdown) as unknown as DropdownComponent;
284
- (Dropdown as DropdownComponent).displayName = "Dropdown";
285
- (Dropdown as DropdownComponent).Option = DropdownOption;
286
- (Dropdown as DropdownComponent).Trigger = DropdownTrigger;
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
- {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 %>
@@ -129,7 +129,7 @@ $pb_selectable_paddings: (
129
129
  }
130
130
  }
131
131
 
132
- &.display_input {
132
+ &[class*=_display_input] {
133
133
  input[type="checkbox"],
134
134
  input[type="radio"] {
135
135
  &:checked {
@@ -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) + display_input_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" ? " display_input" : ""
84
+ variant == "display_input" ? "display_input" : nil
85
85
  end
86
86
  end
87
87
  end