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,3 +1,7 @@
1
+ .Polaris--hidden {
2
+ display: none !important;
3
+ }
4
+
1
5
  /* Add missing 1/4 section for layout */
2
6
  @media (min-width: 30.625em) {
3
7
  .Polaris-Layout__Section--oneFourth {
@@ -16,3 +20,122 @@ a.Polaris-Tag__Button {
16
20
  .Polaris-DataTable__Cell--sortable a {
17
21
  text-decoration: none;
18
22
  }
23
+
24
+ /* CardSection borders */
25
+ .Polaris-Card__Section--borderTop {
26
+ border-top: 0.1rem solid var(--p-divider);
27
+ }
28
+ .Polaris-Card__Section--borderBottom {
29
+ border-bottom: 0.1rem solid var(--p-divider);
30
+ }
31
+
32
+ /* IndexTable */
33
+
34
+ /* TestStyle sizes */
35
+ .Polaris-TextStyle--sizeSmall {
36
+ font-size: 1.25rem;
37
+ }
38
+
39
+ /* Remove box-shadow from buttons and links */
40
+ .Polaris-Button::after,
41
+ .Polaris-Button:focus::after,
42
+ .Polaris-Breadcrumbs__Breadcrumb::after {
43
+ box-shadow: none !important;
44
+ }
45
+
46
+ .Polaris-Tabs__Tab:focus > .Polaris-Tabs__Title::after {
47
+ box-shadow: none !important;
48
+ }
49
+
50
+ /* ResourceItem */
51
+ .Polaris-ResourceItem__Owned--offset {
52
+ padding-left: 2rem;
53
+ }
54
+
55
+ /* Popover */
56
+ .Polaris-Popover {
57
+ margin: 0;
58
+ }
59
+
60
+ .Polaris-Popover__PopoverOverlay--closed {
61
+ visibility: hidden;
62
+ pointer-events: none;
63
+ }
64
+
65
+ /* Filters */
66
+
67
+ .Polaris-Filters-ConnectedFilterControl__RightContainer {
68
+ .Polaris-Filters-ConnectedFilterControl__Item {
69
+ & > div > div > button {
70
+ margin-right: var(--p-button-group-item-spacing);
71
+ border-radius: 0;
72
+ }
73
+
74
+ &:first-of-type > div > div > button {
75
+ border-top-left-radius: var(--p-border-radius-base);
76
+ border-bottom-left-radius: var(--p-border-radius-base);
77
+ }
78
+ }
79
+
80
+ &.Polaris-Filters-ConnectedFilterControl--queryFieldHidden {
81
+ .Polaris-Filters-ConnectedFilterControl__Item:first-of-type > div > div > button {
82
+ border-top-left-radius: var(--p-border-radius-base);
83
+ border-bottom-left-radius: var(--p-border-radius-base);
84
+ }
85
+ }
86
+ }
87
+
88
+ .Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters {
89
+ .Polaris-Filters-ConnectedFilterControl__Item:last-child > div > div > button {
90
+ border-top-right-radius: var(--p-border-radius-base);
91
+ border-bottom-right-radius: var(--p-border-radius-base);
92
+ }
93
+ }
94
+
95
+ /* Toast */
96
+ .Polaris-Frame-ToastManager {
97
+ bottom: 0;
98
+ }
99
+
100
+ /* Autocomplete */
101
+
102
+ .Polaris-Autocomplete__EmptyState {
103
+ padding: 0.8rem 1.6rem;
104
+ }
105
+
106
+ /* DropZone */
107
+ .Polaris-DropZone {
108
+ &__Preview {
109
+ padding: 1.5rem;
110
+ display: flex;
111
+ height: 100%;
112
+
113
+ &--singleFile {
114
+ align-items: center;
115
+ text-align: center;
116
+ justify-content: center;
117
+ }
118
+
119
+ &--sizeSmall {
120
+ padding: 0;
121
+ justify-content: center;
122
+
123
+ .Polaris-Thumbnail {
124
+ border: none;
125
+
126
+ img {
127
+ width: 100%;
128
+ object-fit: cover;
129
+ }
130
+ }
131
+ }
132
+ }
133
+
134
+ &__Loader {
135
+ display: flex;
136
+ height: 100%;
137
+ align-items: center;
138
+ text-align: center;
139
+ justify-content: center;
140
+ }
141
+ }
@@ -106,10 +106,6 @@
106
106
  border-bottom: .3rem solid var(--p-action-primary)
107
107
  }
108
108
 
109
- .shp-Navigation_Link:focus {
110
- box-shadow: inset 0 0 2px 0 rgba(92, 106, 196, .8), 0 0 2px 0 rgba(92, 106, 196, .8)
111
- }
112
-
113
109
  .shp-Navigation_Link:focus .shp-Navigation_LinkText {
114
110
  font-weight: 400;
115
111
  color: var(--p-text)