polaris_view_components 0.4.0 → 0.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (169) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +12 -2
  3. data/app/assets/javascripts/polaris_view_components/autocomplete_controller.js +136 -0
  4. data/app/assets/javascripts/polaris_view_components/button_controller.js +47 -0
  5. data/app/assets/javascripts/polaris_view_components/dropzone_controller.js +495 -0
  6. data/app/assets/javascripts/polaris_view_components/frame_controller.js +41 -0
  7. data/app/assets/javascripts/polaris_view_components/index.js +21 -1
  8. data/app/assets/javascripts/polaris_view_components/modal_controller.js +25 -0
  9. data/app/assets/javascripts/polaris_view_components/option_list_controller.js +41 -0
  10. data/app/assets/javascripts/polaris_view_components/polaris_controller.js +28 -0
  11. data/app/assets/javascripts/polaris_view_components/popover_controller.js +56 -0
  12. data/app/assets/javascripts/polaris_view_components/scrollable_controller.js +60 -0
  13. data/app/assets/javascripts/polaris_view_components/select_controller.js +6 -4
  14. data/app/assets/javascripts/polaris_view_components/text_field_controller.js +4 -0
  15. data/app/assets/javascripts/polaris_view_components/toast_controller.js +68 -0
  16. data/app/assets/javascripts/polaris_view_components/utils.js +23 -0
  17. data/app/assets/javascripts/polaris_view_components.js +2406 -5
  18. data/app/assets/stylesheets/polaris_view_components/custom.css +123 -0
  19. data/app/assets/stylesheets/polaris_view_components/shopify_navigation.css +0 -4
  20. data/app/assets/stylesheets/polaris_view_components.css +2162 -2019
  21. data/app/assets/stylesheets/polaris_view_components.postcss.css +1 -1
  22. data/app/components/polaris/action.rb +3 -3
  23. data/app/components/polaris/action_list/item_component.html.erb +35 -0
  24. data/app/components/polaris/action_list/item_component.rb +41 -0
  25. data/app/components/polaris/action_list/section_component.html.erb +16 -0
  26. data/app/components/polaris/action_list/section_component.rb +26 -0
  27. data/app/components/polaris/action_list_component.html.erb +13 -0
  28. data/app/components/polaris/action_list_component.rb +25 -0
  29. data/app/components/polaris/autocomplete/action_component.rb +7 -0
  30. data/app/components/polaris/autocomplete/option_component.rb +35 -0
  31. data/app/components/polaris/autocomplete/section_component.html.erb +9 -0
  32. data/app/components/polaris/autocomplete/section_component.rb +12 -0
  33. data/app/components/polaris/autocomplete_component.html.erb +30 -0
  34. data/app/components/polaris/autocomplete_component.rb +65 -0
  35. data/app/components/polaris/avatar_component.rb +2 -2
  36. data/app/components/polaris/badge_component.rb +2 -2
  37. data/app/components/polaris/banner_component.rb +8 -8
  38. data/app/components/polaris/base_button.rb +2 -2
  39. data/app/components/polaris/base_checkbox.rb +48 -0
  40. data/app/components/polaris/base_component.rb +1 -1
  41. data/app/components/polaris/base_radio_button.rb +38 -0
  42. data/app/components/polaris/button_component.html.erb +13 -0
  43. data/app/components/polaris/button_group_component.rb +8 -8
  44. data/app/components/polaris/callout_card_component.rb +6 -6
  45. data/app/components/polaris/caption_component.rb +3 -3
  46. data/app/components/polaris/card/header_component.rb +2 -2
  47. data/app/components/polaris/card/section_component.rb +8 -4
  48. data/app/components/polaris/card_component.html.erb +4 -0
  49. data/app/components/polaris/card_component.rb +6 -5
  50. data/app/components/polaris/character_count.rb +10 -10
  51. data/app/components/polaris/checkbox_component.html.erb +1 -5
  52. data/app/components/polaris/checkbox_component.rb +20 -13
  53. data/app/components/polaris/choice_component.rb +2 -2
  54. data/app/components/polaris/choice_list_component.rb +6 -6
  55. data/app/components/polaris/component.rb +6 -1
  56. data/app/components/polaris/data_table/cell_component.rb +4 -4
  57. data/app/components/polaris/data_table/column_component.rb +1 -1
  58. data/app/components/polaris/data_table_component.rb +4 -4
  59. data/app/components/polaris/description_list_component.rb +5 -5
  60. data/app/components/polaris/display_text_component.rb +3 -3
  61. data/app/components/polaris/dropzone_component.html.erb +156 -0
  62. data/app/components/polaris/dropzone_component.rb +150 -0
  63. data/app/components/polaris/empty_state_component.rb +4 -4
  64. data/app/components/polaris/exception_list/item_component.rb +3 -3
  65. data/app/components/polaris/exception_list_component.rb +2 -2
  66. data/app/components/polaris/filters_component.html.erb +35 -0
  67. data/app/components/polaris/filters_component.rb +91 -0
  68. data/app/components/polaris/footer_help_component.rb +2 -2
  69. data/app/components/polaris/form_layout/group_component.rb +5 -5
  70. data/app/components/polaris/form_layout/item_component.rb +2 -2
  71. data/app/components/polaris/form_layout_component.rb +4 -4
  72. data/app/components/polaris/frame/save_bar_component.html.erb +23 -0
  73. data/app/components/polaris/frame/save_bar_component.rb +31 -0
  74. data/app/components/polaris/frame/top_bar_component.html.erb +30 -0
  75. data/app/components/polaris/frame/top_bar_component.rb +18 -0
  76. data/app/components/polaris/frame_component.html.erb +44 -0
  77. data/app/components/polaris/frame_component.rb +33 -0
  78. data/app/components/polaris/heading_component.rb +2 -2
  79. data/app/components/polaris/headless_button.html.erb +13 -0
  80. data/app/components/polaris/headless_button.rb +18 -6
  81. data/app/components/polaris/icon_component.rb +3 -3
  82. data/app/components/polaris/index_table/cell_component.rb +22 -0
  83. data/app/components/polaris/index_table/column_component.rb +13 -0
  84. data/app/components/polaris/index_table_component.html.erb +28 -0
  85. data/app/components/polaris/index_table_component.rb +25 -0
  86. data/app/components/polaris/inline_error_component.html.erb +2 -2
  87. data/app/components/polaris/inline_error_component.rb +8 -2
  88. data/app/components/polaris/label_component.rb +3 -3
  89. data/app/components/polaris/labelled_component.rb +3 -3
  90. data/app/components/polaris/layout/annotated_section.rb +2 -2
  91. data/app/components/polaris/layout/section.rb +2 -2
  92. data/app/components/polaris/layout_component.rb +4 -4
  93. data/app/components/polaris/link_component.rb +4 -4
  94. data/app/components/polaris/list_component.rb +5 -5
  95. data/app/components/polaris/logo.rb +13 -0
  96. data/app/components/polaris/modal/section_component.rb +19 -0
  97. data/app/components/polaris/modal_component.html.erb +79 -0
  98. data/app/components/polaris/modal_component.rb +98 -0
  99. data/app/components/polaris/navigation/item_component.html.erb +31 -0
  100. data/app/components/polaris/navigation/item_component.rb +85 -0
  101. data/app/components/polaris/navigation/section_component.html.erb +17 -0
  102. data/app/components/polaris/navigation/section_component.rb +64 -0
  103. data/app/components/polaris/navigation_component.html.erb +29 -0
  104. data/app/components/polaris/navigation_component.rb +15 -0
  105. data/app/components/polaris/option_list/checkbox_component.html.erb +14 -0
  106. data/app/components/polaris/option_list/checkbox_component.rb +37 -0
  107. data/app/components/polaris/option_list/option_component.rb +24 -0
  108. data/app/components/polaris/option_list/radio_button_component.rb +54 -0
  109. data/app/components/polaris/option_list/section_component.html.erb +14 -0
  110. data/app/components/polaris/option_list/section_component.rb +53 -0
  111. data/app/components/polaris/option_list_component.html.erb +15 -0
  112. data/app/components/polaris/option_list_component.rb +67 -0
  113. data/app/components/polaris/page_actions_component.rb +22 -7
  114. data/app/components/polaris/page_component.rb +5 -5
  115. data/app/components/polaris/pagination_component.rb +2 -6
  116. data/app/components/polaris/popover/pane_component.html.erb +25 -0
  117. data/app/components/polaris/popover/pane_component.rb +20 -0
  118. data/app/components/polaris/popover/section_component.rb +19 -0
  119. data/app/components/polaris/popover_component.html.erb +31 -0
  120. data/app/components/polaris/popover_component.rb +113 -0
  121. data/app/components/polaris/progress_bar_component.rb +6 -6
  122. data/app/components/polaris/radio_button_component.html.erb +1 -6
  123. data/app/components/polaris/radio_button_component.rb +18 -8
  124. data/app/components/polaris/resource_item_component.html.erb +16 -6
  125. data/app/components/polaris/resource_item_component.rb +43 -10
  126. data/app/components/polaris/resource_list_component.html.erb +10 -0
  127. data/app/components/polaris/resource_list_component.rb +5 -11
  128. data/app/components/polaris/scrollable_component.html.erb +5 -0
  129. data/app/components/polaris/scrollable_component.rb +48 -0
  130. data/app/components/polaris/select_component.rb +11 -6
  131. data/app/components/polaris/setting_toggle_component.html.erb +10 -0
  132. data/app/components/polaris/setting_toggle_component.rb +24 -0
  133. data/app/components/polaris/shopify_navigation_component.rb +8 -8
  134. data/app/components/polaris/skeleton_body_text_component.rb +2 -2
  135. data/app/components/polaris/spacer_component.rb +4 -4
  136. data/app/components/polaris/spinner_component.rb +3 -3
  137. data/app/components/polaris/stack/item_component.rb +15 -0
  138. data/app/components/polaris/stack_component.rb +6 -22
  139. data/app/components/polaris/subheading_component.rb +2 -2
  140. data/app/components/polaris/tabs/tab_component.html.erb +10 -0
  141. data/app/components/polaris/tabs/tab_component.rb +34 -0
  142. data/app/components/polaris/tabs_component.html.erb +7 -0
  143. data/app/components/polaris/tabs_component.rb +37 -0
  144. data/app/components/polaris/tag_component.rb +3 -2
  145. data/app/components/polaris/text_container_component.rb +3 -3
  146. data/app/components/polaris/text_field_component.rb +25 -11
  147. data/app/components/polaris/text_style_component.rb +12 -3
  148. data/app/components/polaris/thumbnail_component.rb +3 -3
  149. data/app/components/polaris/toast_component.html.erb +21 -0
  150. data/app/components/polaris/toast_component.rb +40 -0
  151. data/app/components/polaris/top_bar/user_menu_component.html.erb +19 -0
  152. data/app/components/polaris/top_bar/user_menu_component.rb +9 -0
  153. data/app/components/polaris/visually_hidden_component.rb +1 -1
  154. data/app/helpers/polaris/form_builder.rb +44 -8
  155. data/app/helpers/polaris/url_helper.rb +3 -3
  156. data/app/helpers/polaris/view_helper.rb +37 -7
  157. data/app/validators/type_validator.rb +2 -2
  158. data/lib/generators/polaris_view_components/install_generator.rb +5 -5
  159. data/lib/polaris/view_components/engine.rb +16 -2
  160. data/lib/polaris/view_components/version.rb +1 -1
  161. data/lib/polaris_view_components.rb +1 -1
  162. metadata +85 -16
  163. data/app/components/polaris/application_component.rb +0 -35
  164. data/app/components/polaris/dropzone/component.html.erb +0 -72
  165. data/app/components/polaris/dropzone/component.rb +0 -128
  166. data/app/components/polaris/dropzone/controller.js +0 -226
  167. data/app/components/polaris/dropzone/utils.js +0 -57
  168. data/app/components/polaris/new_component.rb +0 -10
  169. data/app/helpers/polaris/conditional_helper.rb +0 -11
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class SpacerComponent < Polaris::NewComponent
4
+ class SpacerComponent < Polaris::Component
5
5
  VERTICAL_SPACING_DEFAULT = :default
6
6
  VERTICAL_SPACING_MAPPINGS = {
7
7
  VERTICAL_SPACING_DEFAULT => "",
@@ -10,7 +10,7 @@ module Polaris
10
10
  :base_tight => "Polaris-Spacer--verticalSpacingBaseTight",
11
11
  :base => "Polaris-Spacer--verticalSpacingBase",
12
12
  :loose => "Polaris-Spacer--verticalSpacingLoose",
13
- :extra_loose => "Polaris-Spacer--verticalSpacingExtraLoose",
13
+ :extra_loose => "Polaris-Spacer--verticalSpacingExtraLoose"
14
14
  }
15
15
  VERTICAL_SPACING_OPTIONS = VERTICAL_SPACING_MAPPINGS.keys
16
16
 
@@ -22,7 +22,7 @@ module Polaris
22
22
  :base_tight => "Polaris-Spacer--horizontalSpacingBaseTight",
23
23
  :base => "Polaris-Spacer--horizontalSpacingBase",
24
24
  :loose => "Polaris-Spacer--horizontalSpacingLoose",
25
- :extra_loose => "Polaris-Spacer--horizontalSpacingExtraLoose",
25
+ :extra_loose => "Polaris-Spacer--horizontalSpacingExtraLoose"
26
26
  }
27
27
  HORIZONTAL_SPACING_OPTIONS = HORIZONTAL_SPACING_MAPPINGS.keys
28
28
 
@@ -37,7 +37,7 @@ module Polaris
37
37
  @system_arguments[:classes],
38
38
  "Polaris-Spacer",
39
39
  VERTICAL_SPACING_MAPPINGS[fetch_or_fallback(VERTICAL_SPACING_OPTIONS, vertical, VERTICAL_SPACING_DEFAULT)],
40
- HORIZONTAL_SPACING_MAPPINGS[fetch_or_fallback(HORIZONTAL_SPACING_OPTIONS, horizontal, HORIZONTAL_SPACING_DEFAULT)],
40
+ HORIZONTAL_SPACING_MAPPINGS[fetch_or_fallback(HORIZONTAL_SPACING_OPTIONS, horizontal, HORIZONTAL_SPACING_DEFAULT)]
41
41
  )
42
42
  end
43
43
 
@@ -1,11 +1,11 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class SpinnerComponent < Polaris::NewComponent
4
+ class SpinnerComponent < Polaris::Component
5
5
  SIZE_DEFAULT = :large
6
6
  SIZE_MAPPINGS = {
7
7
  small: "Polaris-Spinner--sizeSmall",
8
- large: "Polaris-Spinner--sizeLarge",
8
+ large: "Polaris-Spinner--sizeLarge"
9
9
  }
10
10
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
11
11
 
@@ -18,7 +18,7 @@ module Polaris
18
18
  @system_arguments[:classes] = class_names(
19
19
  @system_arguments[:classes],
20
20
  "Polaris-Spinner",
21
- SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
21
+ SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
22
22
  )
23
23
  end
24
24
  end
@@ -0,0 +1,15 @@
1
+ class Polaris::Stack::ItemComponent < Polaris::Component
2
+ def initialize(fill: false, **system_arguments)
3
+ @system_arguments = system_arguments
4
+ @system_arguments[:tag] = "div"
5
+ @system_arguments[:classes] = class_names(
6
+ @system_arguments[:classes],
7
+ "Polaris-Stack__Item",
8
+ "Polaris-Stack__Item--fill": fill
9
+ )
10
+ end
11
+
12
+ def call
13
+ render(Polaris::BaseComponent.new(**@system_arguments)) { content }
14
+ end
15
+ end
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class StackComponent < Polaris::NewComponent
4
+ class StackComponent < Polaris::Component
5
5
  ALIGNMENT_DEFAULT = :default
6
6
  ALIGNMENT_MAPPINGS = {
7
7
  ALIGNMENT_DEFAULT => "",
@@ -9,7 +9,7 @@ module Polaris
9
9
  :trailing => "Polaris-Stack--alignmentTrailing",
10
10
  :center => "Polaris-Stack--alignmentCenter",
11
11
  :fill => "Polaris-Stack--alignmentFill",
12
- :baseline => "Polaris-Stack--alignmentBaseline",
12
+ :baseline => "Polaris-Stack--alignmentBaseline"
13
13
  }
14
14
  ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
15
15
 
@@ -21,7 +21,7 @@ module Polaris
21
21
  :trailing => "Polaris-Stack--distributionTrailing",
22
22
  :center => "Polaris-Stack--distributionCenter",
23
23
  :fill => "Polaris-Stack--distributionFill",
24
- :fill_evenly => "Polaris-Stack--distributionFillEvenly",
24
+ :fill_evenly => "Polaris-Stack--distributionFillEvenly"
25
25
  }
26
26
  DISTRIBUTION_OPTIONS = DISTRIBUTION_MAPPINGS.keys
27
27
 
@@ -33,11 +33,11 @@ module Polaris
33
33
  :base_tight => "Polaris-Stack--spacingBaseTight",
34
34
  :loose => "Polaris-Stack--spacingLoose",
35
35
  :extra_loose => "Polaris-Stack--spacingExtraLoose",
36
- :none => "Polaris-Stack--spacingNone",
36
+ :none => "Polaris-Stack--spacingNone"
37
37
  }
38
38
  SPACING_OPTIONS = SPACING_MAPPINGS.keys
39
39
 
40
- renders_many :items, "StackItemComponent"
40
+ renders_many :items, Polaris::Stack::ItemComponent
41
41
 
42
42
  def initialize(
43
43
  alignment: ALIGNMENT_DEFAULT,
@@ -56,24 +56,8 @@ module Polaris
56
56
  DISTRIBUTION_MAPPINGS[fetch_or_fallback(DISTRIBUTION_OPTIONS, distribution, DISTRIBUTION_DEFAULT)],
57
57
  SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
58
58
  "Polaris-Stack--vertical": vertical,
59
- "Polaris-Stack--noWrap": !wrap,
59
+ "Polaris-Stack--noWrap": !wrap
60
60
  )
61
61
  end
62
-
63
- class StackItemComponent < Polaris::NewComponent
64
- def initialize(fill: false, **system_arguments)
65
- @system_arguments = system_arguments
66
- @system_arguments[:tag] = "div"
67
- @system_arguments[:classes] = class_names(
68
- @system_arguments[:classes],
69
- "Polaris-Stack__Item",
70
- "Polaris-Stack__Item--fill": fill,
71
- )
72
- end
73
-
74
- def call
75
- render(Polaris::BaseComponent.new(**@system_arguments)) { content }
76
- end
77
- end
78
62
  end
79
63
  end
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class SubheadingComponent < Polaris::NewComponent
4
+ class SubheadingComponent < Polaris::Component
5
5
  ELEMENT_DEFAULT = :h3
6
6
  ELEMENT_OPTIONS = %i[p h1 h2 h3 h4 h5 h6]
7
7
 
@@ -13,7 +13,7 @@ module Polaris
13
13
  @system_arguments[:tag] = element
14
14
  @system_arguments[:classes] = class_names(
15
15
  @system_arguments[:classes],
16
- 'Polaris-Subheading'
16
+ "Polaris-Subheading"
17
17
  )
18
18
  end
19
19
 
@@ -0,0 +1,10 @@
1
+ <li class="Polaris-Tabs__TabContainer" role="presentation">
2
+ <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
3
+ <span class="Polaris-Tabs__Title">
4
+ <%= @title %>
5
+ <% if badge.present? %>
6
+ <%= badge %>
7
+ <% end %>
8
+ </span>
9
+ <% end %>
10
+ </li>
@@ -0,0 +1,34 @@
1
+ class Polaris::Tabs::TabComponent < Polaris::Component
2
+ renders_one :badge, Polaris::BadgeComponent
3
+
4
+ def initialize(
5
+ title:,
6
+ url: nil,
7
+ active: false,
8
+ **system_arguments
9
+ )
10
+ @title = title
11
+ @url = url
12
+ @active = active
13
+ @system_arguments = system_arguments
14
+ end
15
+
16
+ def system_arguments
17
+ @system_arguments.tap do |opts|
18
+ opts[:rol] = "tab"
19
+ opts[:tabindex] = "0"
20
+ if @url.present?
21
+ opts[:tag] = "a"
22
+ opts[:href] = @url
23
+ else
24
+ opts[:tag] = "button"
25
+ opts[:type] = "button"
26
+ end
27
+ opts[:classes] = class_names(
28
+ @system_arguments[:classes],
29
+ "Polaris-Tabs__Tab",
30
+ "Polaris-Tabs__Tab--selected": @active
31
+ )
32
+ end
33
+ end
34
+ end
@@ -0,0 +1,7 @@
1
+ <%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
2
+ <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
3
+ <% tabs.each do |tab| %>
4
+ <%= tab %>
5
+ <% end %>
6
+ <% end %>
7
+ <% end %>
@@ -0,0 +1,37 @@
1
+ module Polaris
2
+ class TabsComponent < Polaris::Component
3
+ renders_many :tabs, Polaris::Tabs::TabComponent
4
+
5
+ def initialize(fitted: false, wrapper_arguments: {}, **system_arguments)
6
+ @fitted = fitted
7
+ @wrapper_arguments = wrapper_arguments
8
+ @system_arguments = system_arguments
9
+ end
10
+
11
+ def wrapper_arguments
12
+ @wrapper_arguments.tap do |opts|
13
+ opts[:tag] = "div"
14
+ opts[:classes] = class_names(
15
+ @wrapper_arguments[:classes],
16
+ "Polaris-Tabs__Wrapper"
17
+ )
18
+ end
19
+ end
20
+
21
+ def system_arguments
22
+ @system_arguments.tap do |opts|
23
+ opts[:tag] = "ul"
24
+ opts[:role] = "tablist"
25
+ opts[:classes] = class_names(
26
+ @system_arguments[:classes],
27
+ "Polaris-Tabs",
28
+ "Polaris-Tabs--fitted": @fitted
29
+ )
30
+ end
31
+ end
32
+
33
+ def renders?
34
+ tabs.present?
35
+ end
36
+ end
37
+ end
@@ -1,11 +1,12 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class TagComponent < Polaris::NewComponent
5
- renders_one :remove_button, -> (**system_arguments) do
4
+ class TagComponent < Polaris::Component
5
+ renders_one :remove_button, ->(type: :button, **system_arguments) do
6
6
  render Polaris::BaseButton.new(
7
7
  classes: "Polaris-Tag__Button",
8
8
  disabled: @disabled,
9
+ type: type,
9
10
  **system_arguments
10
11
  ) do |button|
11
12
  polaris_icon(name: "CancelSmallMinor")
@@ -1,12 +1,12 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class TextContainerComponent < Polaris::NewComponent
4
+ class TextContainerComponent < Polaris::Component
5
5
  SPACING_DEFAULT = :default
6
6
  SPACING_MAPPINGS = {
7
7
  SPACING_DEFAULT => "",
8
8
  :tight => "Polaris-TextContainer--spacingTight",
9
- :loose => "Polaris-TextContainer--spacingLoose",
9
+ :loose => "Polaris-TextContainer--spacingLoose"
10
10
  }
11
11
  SPACING_OPTIONS = SPACING_MAPPINGS.keys
12
12
 
@@ -19,7 +19,7 @@ module Polaris
19
19
  @system_arguments[:classes] = class_names(
20
20
  @system_arguments[:classes],
21
21
  "Polaris-TextContainer",
22
- SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
22
+ SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)]
23
23
  )
24
24
  end
25
25
 
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class TextFieldComponent < Polaris::NewComponent
4
+ class TextFieldComponent < Polaris::Component
5
5
  TYPE_DEFAULT = :text
6
6
  TYPE_OPTIONS = %i[
7
7
  text number email password search tel url date
@@ -13,14 +13,14 @@ module Polaris
13
13
  ALIGN_DEFAULT => "",
14
14
  :left => "Polaris-TextField__Input--alignLeft",
15
15
  :center => "Polaris-TextField__Input--alignCenter",
16
- :right => "Polaris-TextField__Input--alignRight",
16
+ :right => "Polaris-TextField__Input--alignRight"
17
17
  }
18
18
  ALIGN_OPTIONS = ALIGN_MAPPINGS.keys
19
19
 
20
20
  attr_reader :value
21
21
 
22
- renders_one :prefix
23
- renders_one :suffix
22
+ renders_one :prefix, "Affix"
23
+ renders_one :suffix, "Affix"
24
24
  renders_one :connected_left
25
25
  renders_one :connected_right
26
26
 
@@ -96,7 +96,7 @@ module Polaris
96
96
  label_action: @label_action,
97
97
  required: @required,
98
98
  help_text: @help_text,
99
- error: @error,
99
+ error: @error
100
100
  }.deep_merge(@wrapper_arguments)
101
101
  end
102
102
 
@@ -105,8 +105,8 @@ module Polaris
105
105
  tag: "div",
106
106
  data: {
107
107
  polaris_text_field_has_value_class: "Polaris-TextField--hasValue",
108
- polaris_text_field_clear_button_hidden_class: "Polaris-TextField__ClearButton--hidden",
109
- },
108
+ polaris_text_field_clear_button_hidden_class: "Polaris-TextField__ClearButton--hidden"
109
+ }
110
110
  }.deep_merge(@system_arguments).tap do |opts|
111
111
  opts[:classes] = class_names(
112
112
  opts[:classes],
@@ -114,7 +114,7 @@ module Polaris
114
114
  "Polaris-TextField--disabled": @disabled,
115
115
  "Polaris-TextField--error": @error,
116
116
  "Polaris-TextField--hasValue": @value.present?,
117
- "Polaris-TextField--multiline": @multiline,
117
+ "Polaris-TextField--multiline": @multiline
118
118
  )
119
119
  prepend_option(opts[:data], :controller, "polaris-text-field")
120
120
  if @show_character_count
@@ -132,13 +132,13 @@ module Polaris
132
132
  placeholder: @placeholder,
133
133
  maxlength: @maxlength,
134
134
  minlength: @minlength,
135
- data: { polaris_text_field_target: "input" },
135
+ data: {polaris_text_field_target: "input"}
136
136
  }
137
137
  if @type == :number
138
138
  default_options.merge!({
139
139
  step: @step,
140
140
  min: @min,
141
- max: @max,
141
+ max: @max
142
142
  })
143
143
  end
144
144
  if @multiline
@@ -151,7 +151,7 @@ module Polaris
151
151
  "Polaris-TextField__Input",
152
152
  @align_class,
153
153
  "Polaris-TextField--monospaced": @monospaced,
154
- "Polaris-TextField__Input--suffixed": @suffix.present?,
154
+ "Polaris-TextField__Input--suffixed": @suffix.present?
155
155
  )
156
156
  prepend_option(opts[:data], :action, "polaris-text-field#syncValue")
157
157
  end
@@ -179,5 +179,19 @@ module Polaris
179
179
  def render_number_buttons?
180
180
  @type == :number && !@disabled
181
181
  end
182
+
183
+ class Affix < Polaris::Component
184
+ def initialize(icon: nil)
185
+ @icon = icon
186
+ end
187
+
188
+ def call
189
+ if @icon.present?
190
+ render Polaris::IconComponent.new(name: @icon)
191
+ else
192
+ content
193
+ end
194
+ end
195
+ end
182
196
  end
183
197
  end
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class TextStyleComponent < Polaris::NewComponent
4
+ class TextStyleComponent < Polaris::Component
5
5
  VARIATION_DEFAULT = :default
6
6
  VARIATION_MAPPINGS = {
7
7
  VARIATION_DEFAULT => "",
@@ -9,19 +9,28 @@ module Polaris
9
9
  :negative => "Polaris-TextStyle--variationNegative",
10
10
  :strong => "Polaris-TextStyle--variationStrong",
11
11
  :subdued => "Polaris-TextStyle--variationSubdued",
12
- :code => "Polaris-TextStyle--variationCode",
12
+ :code => "Polaris-TextStyle--variationCode"
13
13
  }
14
14
  VARIATION_OPTIONS = VARIATION_MAPPINGS.keys
15
15
 
16
+ SIZE_DEFAULT = :default
17
+ SIZE_MAPPINGS = {
18
+ SIZE_DEFAULT => "",
19
+ :small => "Polaris-TextStyle--sizeSmall"
20
+ }
21
+ SIZE_OPTIONS = SIZE_MAPPINGS.keys
22
+
16
23
  def initialize(
17
24
  variation: VARIATION_DEFAULT,
25
+ size: SIZE_DEFAULT,
18
26
  **system_arguments
19
27
  )
20
28
  @system_arguments = system_arguments
21
- @system_arguments[:tag] = 'span'
29
+ @system_arguments[:tag] = "span"
22
30
  @system_arguments[:classes] = class_names(
23
31
  @system_arguments[:classes],
24
32
  VARIATION_MAPPINGS[fetch_or_fallback(VARIATION_OPTIONS, variation, VARIATION_DEFAULT)],
33
+ SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
25
34
  )
26
35
  end
27
36
 
@@ -1,12 +1,12 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class ThumbnailComponent < Polaris::NewComponent
4
+ class ThumbnailComponent < Polaris::Component
5
5
  SIZE_DEFAULT = :medium
6
6
  SIZE_MAPPINGS = {
7
7
  small: "Polaris-Thumbnail--sizeSmall",
8
8
  medium: "Polaris-Thumbnail--sizeMedium",
9
- large: "Polaris-Thumbnail--sizeLarge",
9
+ large: "Polaris-Thumbnail--sizeLarge"
10
10
  }
11
11
  SIZE_OPTIONS = SIZE_MAPPINGS.keys
12
12
 
@@ -26,7 +26,7 @@ module Polaris
26
26
  @system_arguments[:classes] = class_names(
27
27
  @system_arguments[:classes],
28
28
  "Polaris-Thumbnail",
29
- SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
29
+ SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
30
30
  )
31
31
  end
32
32
 
@@ -0,0 +1,21 @@
1
+ <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
2
+ <div style="<%= polaris_inversed_colors %>">
3
+ <div class="<%= toast_classes %>">
4
+ <%= content %>
5
+
6
+ <% if action.present? %>
7
+ <div class="Polaris-Frame-Toast__Action">
8
+ <%= action %>
9
+ </div>
10
+ <% end %>
11
+
12
+ <button
13
+ data-action="polaris-toast#close"
14
+ type="button"
15
+ class="Polaris-Frame-Toast__CloseButton"
16
+ >
17
+ <%= polaris_icon(name: "MobileCancelMajor") %>
18
+ </button>
19
+ </div>
20
+ </div>
21
+ <% end %>
@@ -0,0 +1,40 @@
1
+ class Polaris::ToastComponent < Polaris::Component
2
+ renders_one :action, ->(**system_arguments) do
3
+ Polaris::ButtonComponent.new(plain: true, monochrome: true, **system_arguments)
4
+ end
5
+
6
+ def initialize(
7
+ hidden: false,
8
+ duration: nil,
9
+ error: false,
10
+ **system_arguments
11
+ )
12
+ @hidden = hidden
13
+ @duration = duration
14
+ @error = error
15
+ @system_arguments = system_arguments
16
+ end
17
+
18
+ def system_arguments
19
+ @system_arguments.tap do |opts|
20
+ opts[:tag] = "div"
21
+ opts[:data] ||= {}
22
+ prepend_option(opts[:data], :controller, "polaris-toast")
23
+ opts[:data][:polaris_toast_hidden_value] = @hidden
24
+ opts[:data][:polaris_toast_duration_value] = @duration
25
+ opts[:data][:polaris_toast_has_action_value] = action.present?
26
+ opts[:classes] = class_names(
27
+ opts[:classes],
28
+ "Polaris-Frame-ToastManager__ToastWrapper",
29
+ "Polaris-Frame-ToastManager--toastWrapperEnterDone": !@hidden
30
+ )
31
+ end
32
+ end
33
+
34
+ def toast_classes
35
+ class_names(
36
+ "Polaris-Frame-Toast",
37
+ "Polaris-Frame-Toast--error": @error
38
+ )
39
+ end
40
+ end
@@ -0,0 +1,19 @@
1
+ <%= polaris_popover(alignment: :left) do |popover| %>
2
+ <% popover.activator do %>
3
+ <button
4
+ type="button"
5
+ class="Polaris-TopBar-Menu__Activator"
6
+ data-action="polaris-popover#toggle click@window->polaris-popover#hide"
7
+ >
8
+ <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
9
+ <%= avatar %>
10
+ </div>
11
+ <span class="Polaris-TopBar-UserMenu__Details">
12
+ <p class="Polaris-TopBar-UserMenu__Name"><%= @name %></p>
13
+ <p class="Polaris-TopBar-UserMenu__Detail"><%= @detail %></p>
14
+ </span>
15
+ </button>
16
+ <% end %>
17
+
18
+ <%= content %>
19
+ <% end %>
@@ -0,0 +1,9 @@
1
+ class Polaris::TopBar::UserMenuComponent < Polaris::Component
2
+ renders_one :avatar, Polaris::AvatarComponent
3
+
4
+ def initialize(name:, detail:, **system_arguments)
5
+ @name = name
6
+ @detail = detail
7
+ @system_arguments = system_arguments
8
+ end
9
+ end
@@ -1,7 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Polaris
4
- class VisuallyHiddenComponent < Polaris::NewComponent
4
+ class VisuallyHiddenComponent < Polaris::Component
5
5
  def initialize
6
6
  end
7
7
 
@@ -1,5 +1,7 @@
1
1
  module Polaris
2
2
  class FormBuilder < ActionView::Helpers::FormBuilder
3
+ include ActionView::Helpers::OutputSafetyHelper
4
+
3
5
  attr_reader :template
4
6
 
5
7
  delegate :render, :pluralize, to: :template
@@ -8,15 +10,16 @@ module Polaris
8
10
  return if object.blank?
9
11
  return unless object.errors.any?
10
12
 
11
- model_name = object.class.model_name.human.downcase
13
+ title = I18n.t(
14
+ "polaris.form_builder.errors_summary",
15
+ count: object.errors.count,
16
+ model: object.class.model_name.human.downcase
17
+ )
12
18
 
13
- render Polaris::BannerComponent.new(
14
- title: "There's #{pluralize(object.errors.count, "error")} with this #{model_name}:",
15
- status: :critical,
16
- ) do
19
+ render Polaris::BannerComponent.new(title: title, status: :critical) do
17
20
  render(Polaris::ListComponent.new) do |list|
18
- object.errors.each do |error|
19
- list.item { error.full_message }
21
+ object.errors.full_messages.each do |error|
22
+ list.item { error.html_safe }
20
23
  end
21
24
  end
22
25
  end
@@ -26,7 +29,16 @@ module Polaris
26
29
  return if object.blank?
27
30
  return unless object.errors.key?(method)
28
31
 
29
- object.errors.full_messages_for(method)&.first
32
+ raw object.errors.full_messages_for(method)&.first
33
+ end
34
+
35
+ def polaris_inline_error_for(method, **options, &block)
36
+ error_message = error_for(method)
37
+ return unless error_message
38
+
39
+ render(Polaris::InlineErrorComponent.new(**options, &block)) do
40
+ error_message
41
+ end
30
42
  end
31
43
 
32
44
  def polaris_text_field(method, **options, &block)
@@ -48,5 +60,29 @@ module Polaris
48
60
  end
49
61
  render Polaris::SelectComponent.new(form: self, attribute: method, **options, &block)
50
62
  end
63
+
64
+ def polaris_check_box(method, **options, &block)
65
+ options[:error] ||= error_for(method)
66
+ if options[:error_hidden] && options[:error]
67
+ options[:error] = !!options[:error]
68
+ end
69
+ render Polaris::CheckboxComponent.new(form: self, attribute: method, **options, &block)
70
+ end
71
+
72
+ def polaris_radio_button(method, **options, &block)
73
+ options[:error] ||= error_for(method)
74
+ if options[:error_hidden] && options[:error]
75
+ options[:error] = !!options[:error]
76
+ end
77
+ render Polaris::RadioButtonComponent.new(form: self, attribute: method, **options, &block)
78
+ end
79
+
80
+ def polaris_dropzone(method, **options, &block)
81
+ options[:error] ||= error_for(method)
82
+ if options[:error_hidden] && options[:error]
83
+ options[:error] = !!options[:error]
84
+ end
85
+ render Polaris::DropzoneComponent.new(form: self, attribute: method, **options, &block)
86
+ end
51
87
  end
52
88
  end
@@ -1,14 +1,14 @@
1
1
  module Polaris
2
2
  module UrlHelper
3
3
  def polaris_button_to(name = nil, options = nil, html_options = nil, &block)
4
- html_options, options = options, name if block_given?
5
- options ||= {}
4
+ html_options, options = options, name if block
5
+ options ||= {}
6
6
  html_options ||= {}
7
7
  html_options[:classes] = html_options[:class]
8
8
  html_options.delete(:class)
9
9
 
10
10
  button = Polaris::HeadlessButton.new(submit: true, **html_options)
11
- button = button.with_content(name) unless block_given?
11
+ button = button.with_content(name) unless block
12
12
  content = render(button, &block)
13
13
 
14
14
  button_to(options, button.html_options) do