playbook_ui 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605 → 14.1.0.pre.alpha.PBNTR455ganttchartPOC3569

Sign up to get free protection for your applications and to get access to all the features.
Files changed (80) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_badge/_badge.scss +0 -9
  6. data/app/pb_kits/playbook/pb_badge/_badge.tsx +3 -8
  7. data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
  8. data/app/pb_kits/playbook/pb_badge/badge.test.js +11 -17
  9. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +0 -13
  10. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +12 -31
  11. data/app/pb_kits/playbook/pb_button/_button.tsx +1 -4
  12. data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_button/button.rb +0 -4
  14. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
  15. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
  16. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -3
  17. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +1 -20
  18. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +0 -4
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +5 -1
  21. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -1
  22. data/app/pb_kits/playbook/pb_dialog/docs/index.js +0 -1
  23. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
  24. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +0 -1
  25. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +25 -43
  26. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +2 -6
  27. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
  28. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
  29. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +0 -4
  30. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  31. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +2 -0
  32. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +13 -49
  33. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +1 -3
  34. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +7 -0
  35. data/app/pb_kits/playbook/pb_popover/_popover.tsx +5 -10
  36. data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +13 -49
  37. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +12 -0
  38. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +23 -23
  39. data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss +27 -19
  40. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +11 -21
  41. data/app/pb_kits/playbook/pb_star_rating/index.js +41 -78
  42. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -4
  43. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +0 -17
  44. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +2 -0
  45. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +1 -0
  46. data/app/pb_kits/playbook/pb_time/_time.tsx +8 -12
  47. data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
  48. data/app/pb_kits/playbook/pb_time/time.rb +0 -4
  49. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
  50. data/app/pb_kits/playbook/utilities/globalProps.ts +3 -20
  51. data/dist/chunks/_typeahead-B6CmTH6o.js +22 -0
  52. data/dist/chunks/_weekday_stacked-CNZpeoOR.js +45 -0
  53. data/dist/chunks/{lib-DErGXNy3.js → lib-XlOB2yGW.js} +2 -2
  54. data/dist/chunks/{pb_form_validation-BC6kh7Hu.js → pb_form_validation-mwEv7D-z.js} +1 -1
  55. data/dist/chunks/vendor.js +1 -1
  56. data/dist/playbook-doc.js +1 -1
  57. data/dist/playbook-rails-react-bindings.js +1 -1
  58. data/dist/playbook-rails.js +1 -1
  59. data/dist/playbook.css +1 -1
  60. data/lib/playbook/classnames.rb +0 -1
  61. data/lib/playbook/spacing.rb +2 -31
  62. data/lib/playbook/version.rb +1 -1
  63. metadata +9 -23
  64. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +0 -46
  65. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +0 -164
  66. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +0 -19
  67. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +0 -1
  68. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +0 -62
  69. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +0 -1
  70. data/app/pb_kits/playbook/pb_pagination/docs/data.js +0 -23
  71. data/app/pb_kits/playbook/pb_pagination/docs/index.js +0 -2
  72. data/app/pb_kits/playbook/tokens/_container.scss +0 -21
  73. data/app/pb_kits/playbook/utilities/_min_width.scss +0 -45
  74. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +0 -59
  75. data/app/pb_kits/playbook/utilities/icons/clock.svg +0 -9
  76. data/app/pb_kits/playbook/utilities/icons/spinner.svg +0 -3
  77. data/app/pb_kits/playbook/utilities/icons/times.svg +0 -3
  78. data/dist/chunks/_typeahead-Cq7RLPBA.js +0 -22
  79. data/dist/chunks/_weekday_stacked-Cykj5kLZ.js +0 -45
  80. /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default_rails.md → _pagination_default.md} +0 -0
@@ -1,156 +1,119 @@
1
- import PbEnhancedElement from "../pb_enhanced_element"
1
+ import PbEnhancedElement from "../pb_enhanced_element";
2
2
 
3
- const STAR_RATING_WRAPPER_SELECTOR = "[data-pb-star-rating-wrapper]"
4
- const STAR_RATING_SELECTOR = "[data-pb-star-rating]"
5
- const STAR_RATING_INPUT_DATA_SELECTOR = "[data-pb-star-rating-input]"
3
+ const STAR_RATING_SELECTOR = "[data-pb-star-rating]";
4
+ const STAR_RATING_INPUT_ID = "star-rating-input";
6
5
 
7
6
  export default class PbStarRating extends PbEnhancedElement {
8
7
  static get selector() {
9
- return STAR_RATING_WRAPPER_SELECTOR
8
+ return STAR_RATING_SELECTOR;
10
9
  }
11
10
 
12
11
  connect() {
13
- this.addEventListeners()
14
- this.handleFormReset()
15
- }
16
-
17
- addEventListeners() {
18
- this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
19
- star.addEventListener("click", (event) => {
20
- const clickedStarId = event.currentTarget.id
21
- this.updateStarColors(clickedStarId)
22
- this.updateHiddenInputValue(clickedStarId)
23
- this.clearFormValidation()
24
- })
12
+ this.element.addEventListener("click", (event) => {
13
+ const clickedStarId = event.currentTarget.id;
14
+ this.updateStarColors(clickedStarId);
15
+ this.updateHiddenInputValue(clickedStarId);
16
+ });
25
17
 
18
+ document.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
26
19
  star.addEventListener("mouseenter", (event) => {
27
20
  const hoveredStarId = event.currentTarget.id
28
- this.updateStarHoverColors(hoveredStarId)
21
+ this.updateStarHoverColors(hoveredStarId);
29
22
  })
30
23
 
31
24
  star.addEventListener("mouseleave", () => {
32
- this.removeStarHoverColors()
25
+ this.removeStarHoverColors();
33
26
  })
34
27
 
35
28
  star.addEventListener("keydown", (event) => {
36
29
  if (event.key === 'Enter' || event.key === ' ') {
37
- event.preventDefault()
38
- this.handleStarClick(star.id)
30
+ event.preventDefault();
31
+ this.handleStarClick(star.id);
39
32
  }
40
33
  })
41
34
  })
42
35
  }
43
36
 
44
37
  handleStarClick(starId) {
45
- this.updateStarColors(starId)
46
- this.updateHiddenInputValue(starId)
38
+ this.updateStarColors(starId);
39
+ this.updateHiddenInputValue(starId);
47
40
  }
48
41
 
49
42
  updateStarColors(clickedStarId) {
50
- const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
43
+ const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
51
44
 
52
45
  allStars.forEach(star => {
53
- const starId = star.id
54
- const icon = star.querySelector(".interactive-star-icon")
46
+ const starId = star.id;
47
+ const icon = star.querySelector(".interactive-star-icon");
55
48
 
56
49
  if (icon) {
57
50
  if (starId <= clickedStarId) {
58
51
  if (star.classList.contains("yellow_star")) {
59
- icon.classList.add("yellow-star-selected")
52
+ icon.classList.add("yellow-star-selected");
60
53
  } else if (star.classList.contains("primary_star_light")) {
61
- icon.classList.add("primary-star-selected")
54
+ icon.classList.add("primary-star-selected");
62
55
  } else if (star.classList.contains("primary_star_dark")) {
63
- icon.classList.add("primary-star-selected")
56
+ icon.classList.add("primary-star-selected");
64
57
  } else if (star.classList.contains("subtle_star_light")) {
65
- icon.classList.add("subtle-star-selected")
58
+ icon.classList.add("subtle-star-selected");
66
59
  } else if (star.classList.contains("subtle_star_dark")) {
67
- icon.classList.add("subtle-star-selected")
60
+ icon.classList.add("subtle-star-selected");
68
61
  } else {
69
- icon.classList.add("yellow-star-selected")
62
+ icon.classList.add("yellow-star-selected");
70
63
  }
71
64
  } else {
72
- icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
65
+ icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected");
73
66
  }
74
- icon.classList.remove("star-hovered")
67
+ icon.classList.remove("star-hovered");
75
68
  }
76
- })
69
+ });
77
70
  }
78
71
 
79
72
  updateHiddenInputValue(value) {
80
- const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
73
+ const hiddenInput = document.getElementById(STAR_RATING_INPUT_ID);
81
74
  if (hiddenInput) {
82
- hiddenInput.value = value
75
+ hiddenInput.value = value;
83
76
  }
84
77
  }
85
78
 
86
79
  updateStarHoverColors(hoveredStarId) {
87
- const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
80
+ const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
88
81
 
89
82
  allStars.forEach(star => {
90
- const starId = star.id
91
- const icon = star.querySelector(".interactive-star-icon")
83
+ const starId = star.id;
84
+ const icon = star.querySelector(".interactive-star-icon");
92
85
 
93
86
  if (icon) {
94
87
  if (starId <= hoveredStarId) {
95
88
  if (!icon.classList.contains("yellow-star-selected") &&
96
89
  !icon.classList.contains("primary-star-selected") &&
97
90
  !icon.classList.contains("subtle-star-selected")) {
98
- icon.classList.add("star-hovered")
91
+ icon.classList.add("star-hovered");
99
92
  }
100
93
  } else {
101
- icon.classList.remove("star-hovered")
94
+ icon.classList.remove("star-hovered");
102
95
  }
103
96
  }
104
- })
97
+ });
105
98
  }
106
99
 
107
100
 
108
101
  removeStarHoverColors() {
109
- const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
102
+ const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
110
103
 
111
104
  allStars.forEach(star => {
112
- const icon = star.querySelector(".interactive-star-icon")
105
+ const icon = star.querySelector(".interactive-star-icon");
113
106
  if (icon) {
114
107
  if (!icon.classList.contains("yellow-star-selected") &&
115
108
  !icon.classList.contains("primary-star-selected") &&
116
109
  !icon.classList.contains("subtle-star-selected")) {
117
- icon.classList.remove("star-hovered")
110
+ icon.classList.remove("star-hovered");
118
111
  }
119
112
  }
120
- })
113
+ });
121
114
  }
122
115
 
123
116
  isStarSelected() {
124
- return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0
125
- }
126
-
127
- handleFormReset() {
128
- const form = this.element.closest("form")
129
- if (form) {
130
- form.addEventListener("reset", () => {
131
- this.updateHiddenInputValue("")
132
- this.resetStarRatingValues()
133
- })
134
- }
135
- }
136
-
137
- resetStarRatingValues() {
138
- const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
139
- allStars.forEach(star => {
140
- const icon = star.querySelector(".interactive-star-icon")
141
- if (icon) {
142
- icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
143
- }
144
- })
145
- }
146
-
147
- clearFormValidation() {
148
- const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
149
- if (hiddenInput.checkValidity()) {
150
- const errorLabelElement = this.element.querySelector(".pb_body_kit_negative")
151
- if (errorLabelElement) {
152
- errorLabelElement.remove()
153
- }
154
- }
117
+ return document.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0;
155
118
  }
156
119
  }
@@ -39,13 +39,11 @@
39
39
  <% end %>
40
40
 
41
41
  <% else %>
42
- <%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, orientation: "column" }) do %>
42
+ <%= pb_rails("flex", props: { orientation: "column" }) do %>
43
43
  <% if object.label.present? %>
44
44
  <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
45
45
  <% end %>
46
-
47
- <%= hidden_input_tag %>
48
-
46
+ <input type="hidden" id="star-rating-input" value="" name="<%= object.name %>"/>
49
47
  <%= pb_rails("flex", props: { orientation: "row" }) do %>
50
48
  <% object.denominator.times do |index| %>
51
49
  <div data-pb-star-rating id="<%= index + 1 %>" class="<%= star_color %>">
@@ -30,10 +30,6 @@ module Playbook
30
30
  default: "display"
31
31
  prop :label, type: Playbook::Props::String
32
32
  prop :name, type: Playbook::Props::String
33
- prop :required, type: Playbook::Props::Boolean,
34
- default: false
35
- prop :input_options, type: Playbook::Props::HashProp,
36
- default: {}
37
33
 
38
34
  def one_decimal_rating
39
35
  rating.to_f.round(1)
@@ -110,19 +106,6 @@ module Playbook
110
106
  def classname
111
107
  generate_classname("pb_star_rating_kit")
112
108
  end
113
-
114
- def hidden_input_tag
115
- tag(:input, all_input_options)
116
- end
117
-
118
- def all_input_options
119
- input_options.merge(
120
- data: { "pb-star-rating-input": true },
121
- name: name,
122
- required: required,
123
- style: "display: none"
124
- )
125
- end
126
109
  end
127
110
  end
128
111
  end
@@ -36,6 +36,7 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
36
36
  <Icon
37
37
  className={starIcon[colorOption].className}
38
38
  customIcon={starIcon[colorOption].icon as unknown as { [key: string]: SVGElement }}
39
+ icon=""
39
40
  />
40
41
  </React.Fragment>
41
42
  ))}
@@ -44,6 +45,7 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
44
45
  <Icon
45
46
  className={starIcon[backgroundType].className}
46
47
  customIcon={starIcon[backgroundType].icon as unknown as { [key: string]: SVGElement }}
48
+ icon=""
47
49
  />
48
50
  </React.Fragment>
49
51
  ))}
@@ -80,6 +80,7 @@ const StarRatingInteractive = (props: StarRatingInteractiveProps) => {
80
80
  onMouseEnter: () => handleMouseEnter(starIndex),
81
81
  onMouseLeave: () => handleMouseLeave(),
82
82
  }}
83
+ icon=""
83
84
  tabIndex={0}
84
85
  />
85
86
  </div>
@@ -1,7 +1,6 @@
1
1
  import React from "react";
2
2
  import classnames from "classnames";
3
3
 
4
- import { getAllIcons } from "../utilities/icons/allicons"
5
4
  import { buildCss, buildHtmlProps } from "../utilities/props";
6
5
  import { globalProps, GlobalProps } from "../utilities/globalProps";
7
6
  import DateTime from '../pb_kit/dateTime';
@@ -43,7 +42,7 @@ const Time = (props: TimeProps): React.ReactElement => {
43
42
  globalProps(props),
44
43
  className
45
44
  );
46
- const clockIcon = getAllIcons()["clock"]
45
+
47
46
  const htmlProps = buildHtmlProps(htmlOptions);
48
47
 
49
48
  return (
@@ -55,10 +54,9 @@ const Time = (props: TimeProps): React.ReactElement => {
55
54
  unstyled
56
55
  ? (
57
56
  <span>
58
- <Icon
59
- className="svg-inline--fa clock"
60
- customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
61
- />
57
+ <Icon fixedWidth
58
+ icon="clock"
59
+ />
62
60
  {" "}
63
61
  </span>
64
62
  )
@@ -67,12 +65,10 @@ const Time = (props: TimeProps): React.ReactElement => {
67
65
  <Body color="light"
68
66
  tag="span"
69
67
  >
70
- <Icon
71
- className="svg-inline--fa clock"
72
- customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
73
- fixedWidth
74
- size={size === "md" ? "" : "sm"}
75
- />
68
+ <Icon fixedWidth
69
+ icon="clock"
70
+ size={size === "md" ? "" : "sm"}
71
+ />
76
72
  {" "}
77
73
  </Body>
78
74
  </>
@@ -13,7 +13,7 @@
13
13
  <% if object.unstyled %>
14
14
  <% if object.show_icon %>
15
15
  <span>
16
- <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
16
+ <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
17
17
  </span>
18
18
  <% end %>
19
19
 
@@ -27,7 +27,7 @@
27
27
  <% elsif size == "md" %>
28
28
  <% if object.show_icon %>
29
29
  <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
30
- <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
30
+ <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
31
31
  <% end %>
32
32
  <% end %>
33
33
 
@@ -41,7 +41,7 @@
41
41
  <% else %>
42
42
  <% if object.show_icon %>
43
43
  <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
44
- <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true, size: "sm" }) %>
44
+ <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
45
45
  <% end %>
46
46
  <% end %>
47
47
 
@@ -38,10 +38,6 @@ module Playbook
38
38
  def pb_date_time
39
39
  Playbook::PbKit::PbDateTime.new(time, timezone)
40
40
  end
41
-
42
- def clock_icon
43
- "app/pb_kits/playbook/utilities/icons/clock.svg"
44
- end
45
41
  end
46
42
  end
47
43
  end
@@ -25,7 +25,6 @@ export default [
25
25
  "order",
26
26
  "numberSpacing",
27
27
  "maxWidth",
28
- "minWidth",
29
28
  "marginRight",
30
29
  "marginLeft",
31
30
  "marginTop",
@@ -94,10 +94,6 @@ type MaxWidth = {
94
94
  maxWidth?: Sizes,
95
95
  }
96
96
 
97
- type MinWidth = {
98
- minWidth?: Sizes,
99
- }
100
-
101
97
  type NumberSpacing = {
102
98
  numberSpacing?: "tabular",
103
99
  }
@@ -174,7 +170,7 @@ type ZIndex = {
174
170
  export type GlobalProps = AlignContent & AlignItems & AlignSelf &
175
171
  BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
176
172
  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
177
- LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
173
+ LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
178
174
  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
179
175
 
180
176
  const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -198,14 +194,6 @@ const getPositioningPropsClasses = (position: string, value: Sizes | {value: str
198
194
  return css;
199
195
  };
200
196
 
201
- const filterClassName = (value: string): string => {
202
- if (value.includes("%")) {
203
- return value.replace("%", "_percent");
204
- } else {
205
- return value;
206
- }
207
- };
208
-
209
197
  // Prop categories
210
198
  const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
211
199
 
@@ -332,15 +320,10 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
332
320
  css += numberSpacing ? `ns_${numberSpacing} ` : ''
333
321
  return css
334
322
  },
335
- minWidthProps: ({ minWidth }: MinWidth) => {
336
- let css = ''
337
- css += minWidth ? `min_width_${filterClassName(minWidth)} ` : ''
338
- return css.trimEnd()
339
- },
340
323
  maxWidthProps: ({ maxWidth }: MaxWidth) => {
341
324
  let css = ''
342
- css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
343
- return css.trimEnd()
325
+ css += maxWidth ? `max_width_${maxWidth } ` : ''
326
+ return css
344
327
  },
345
328
  zIndexProps: (zIndex: ZIndex) => {
346
329
  let css = ''