polaris_view_components 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +11 -3
  3. data/app/{javascript → assets/javascripts}/polaris_view_components/index.js +0 -0
  4. data/app/{javascript → assets/javascripts}/polaris_view_components/resource_item_controller.js +0 -0
  5. data/app/{javascript → assets/javascripts}/polaris_view_components/select_controller.js +0 -0
  6. data/app/{javascript → assets/javascripts}/polaris_view_components/text_field_controller.js +0 -0
  7. data/app/assets/stylesheets/polaris_view_components/custom.css +18 -0
  8. data/app/assets/stylesheets/polaris_view_components/shopify_navigation.css +136 -0
  9. data/app/assets/stylesheets/polaris_view_components/spacer_component.css +39 -0
  10. data/app/assets/stylesheets/polaris_view_components.css +2082 -21
  11. data/app/assets/stylesheets/polaris_view_components.postcss.css +4 -0
  12. data/app/components/polaris/card/header_component.rb +0 -2
  13. data/app/components/polaris/card_component.rb +0 -2
  14. data/app/components/polaris/data_table/cell_component.html.erb +18 -0
  15. data/app/components/polaris/data_table/cell_component.rb +49 -0
  16. data/app/components/polaris/data_table/column_component.rb +19 -0
  17. data/app/components/polaris/data_table_component.html.erb +77 -0
  18. data/app/components/polaris/data_table_component.rb +42 -0
  19. data/app/components/polaris/dropzone/component.rb +0 -2
  20. data/app/components/polaris/empty_state_component.html.erb +16 -11
  21. data/app/components/polaris/empty_state_component.rb +1 -0
  22. data/app/components/polaris/layout/section.rb +2 -0
  23. data/app/components/polaris/link_component.rb +3 -1
  24. data/app/components/polaris/spacer_component.rb +50 -0
  25. data/app/components/polaris/stack_component.rb +1 -1
  26. data/app/components/polaris/tag_component.rb +2 -2
  27. data/app/helpers/polaris/view_helper.rb +2 -0
  28. data/lib/polaris/view_components/engine.rb +0 -1
  29. data/lib/polaris/view_components/version.rb +1 -1
  30. metadata +16 -9
  31. data/app/components/polaris/choice_list/component.html.erb +0 -34
  32. data/app/components/polaris/choice_list/component.rb +0 -65
  33. data/app/helpers/polaris/action_helper.rb +0 -14
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1eda78e6803a1783585a9912d600193f29bba781d019204be62bd1cab484e97a
4
- data.tar.gz: 5b9ba5de1405b1eb089991c7a2db6117d00bddc7787b6484515e35ecddd4b55e
3
+ metadata.gz: 848460847dd95a9b22891491c48d9bbf9091a0a6eda013c4a724ca5d3648b19f
4
+ data.tar.gz: 4e034a365bfccb0d6b1cda9ff3663850fdde1af80a490f768bbce2d4fffe8603
5
5
  SHA512:
6
- metadata.gz: c433aa42655eacf3e55eccb3709d25356e6219a61f9f5880d529dd2c51f41ca8fe019a1f699675f0832efabdae104e2a0e26fb4a0100b1c8e0d0005b7917f0b5
7
- data.tar.gz: 44ad24c6ff886a6bb9cb11d5fdce9936218f66337924c6474dcd78b4e68357fa08871492f38affb31dac7f19cce81ea4d7151179bba38ef656910ef49b2e0a72
6
+ metadata.gz: f15c1073c23e0a785c8187f98bfa420bea87ffb89d29cf3b8123c957a375f09ef090035b94a0aba12119d31ce17ce5706683164b08bb1ac75cb7e7f63d085d14
7
+ data.tar.gz: 6381bba31617b45462489f46013300418c3a0bb4f54e2ddea75edfc7e8320927d8c0b3f715d415b7db4a262e8157ba22d949d0ed9a6a6e00a06ab19737adb098
data/README.md CHANGED
@@ -36,7 +36,6 @@ rails generate polaris_view_components:install
36
36
  Setup Polaris styles in your layouts `<head>` tag:
37
37
 
38
38
  ```erb
39
- <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@6.6.0/dist/styles.css" />
40
39
  <%= stylesheet_link_tag 'polaris_view_components' %>
41
40
  ```
42
41
 
@@ -54,6 +53,14 @@ Add to `config/importmap.rb`:
54
53
  pin "polaris-view-components", to: "polaris_view_components.js"
55
54
  ```
56
55
 
56
+ Add to `app/javascript/controllers/index.js`:
57
+ ```javascript
58
+ // ...
59
+
60
+ import { registerPolarisControllers } from "polaris-view-components"
61
+ registerPolarisControllers(Stimulus)
62
+ ```
63
+
57
64
  ### NPM
58
65
 
59
66
  Install NPM package:
@@ -63,7 +70,8 @@ yarn add polaris-view-components
63
70
 
64
71
  Add to `app/javascript/controllers/index.js`:
65
72
  ```javascript
66
- // Polaris ViewComponents
73
+ // ...
74
+
67
75
  import { registerPolarisControllers } from "polaris-view-components"
68
76
  registerPolarisControllers(Stimulus)
69
77
  ```
@@ -77,7 +85,7 @@ In addition to the dependencies declared in the `gemspec`, Polaris ViewComponent
77
85
  To get started:
78
86
 
79
87
  1. Run: `bundle install`
80
- 2. Run: `foreman start`
88
+ 2. Run: `bin/dev`
81
89
 
82
90
  It will open demo app with component previews on `localhost:4000`. You can change components and they will be updated on page reload. Component previews located in `demo/test/components/previews`.
83
91
 
data/app/assets/stylesheets/polaris_view_components/custom.css ADDED
@@ -0,0 +1,18 @@
1
+ /* Add missing 1/4 section for layout */
2
+ @media (min-width: 30.625em) {
3
+ .Polaris-Layout__Section--oneFourth {
4
+ flex: 1 1 20rem;
5
+ min-width: 0;
6
+ }
7
+ }
8
+
9
+ /* Fix Tag removal link */
10
+ a.Polaris-Tag__Button {
11
+ height: auto;
12
+ }
13
+
14
+ /* Remove underline for sort link */
15
+
16
+ .Polaris-DataTable__Cell--sortable a {
17
+ text-decoration: none;
18
+ }
data/app/assets/stylesheets/polaris_view_components/shopify_navigation.css ADDED
@@ -0,0 +1,136 @@
1
+ .shp-Navigation {
2
+ margin: 0 auto;
3
+ padding: 0 2rem;
4
+ max-width: 99.8rem;
5
+ max-width: none;
6
+ border-bottom: .1rem solid var(--p-border-subdued)
7
+ }
8
+
9
+ @media (max-width: 48.0625em) and (min-width: 30.625em),(min-width: 45.625em) {
10
+ .shp-Navigation {
11
+ padding: 0 2rem
12
+ }
13
+ }
14
+
15
+ @media (min-width: 30.625em) {
16
+ .shp-Navigation {
17
+ padding: 0 2rem
18
+ }
19
+ }
20
+
21
+ @media (max-width: 48.0625em) and (min-width: 46.5em),(min-width: 61.5em) {
22
+ .shp-Navigation {
23
+ padding: 0 3.2rem
24
+ }
25
+ }
26
+
27
+ @media (min-width: 46.5em) {
28
+ .shp-Navigation {
29
+ padding: 0 3.2rem
30
+ }
31
+ }
32
+
33
+ @media (max-width: 30.5625em) {
34
+ .shp-Navigation {
35
+ padding: 0 1.6rem
36
+ }
37
+ }
38
+
39
+ .shp-Navigation_Items {
40
+ display: flex;
41
+ margin: 0;
42
+ padding: 0 .2rem;
43
+ list-style: none
44
+ }
45
+
46
+ .shp-Navigation_Item {
47
+ display: flex;
48
+ margin: 0;
49
+ padding: 0
50
+ }
51
+
52
+ .shp-Navigation_Link {
53
+ color: inherit;
54
+ -webkit-appearance: none;
55
+ -moz-appearance: none;
56
+ appearance: none;
57
+ margin: 0;
58
+ padding: 0;
59
+ background: none;
60
+ border: none;
61
+ font-size: inherit;
62
+ line-height: inherit;
63
+ font-size: 1.5rem;
64
+ font-weight: 400;
65
+ line-height: 2rem;
66
+ text-transform: none;
67
+ letter-spacing: normal;
68
+ color: var(--p-text-subdued);
69
+ position: relative;
70
+ z-index: 400;
71
+ justify-content: center;
72
+ width: 100%;
73
+ min-width: 100%;
74
+ margin-top: 1px;
75
+ margin-bottom: -1px;
76
+ padding: 0 1.6rem;
77
+ outline: none;
78
+ text-align: center;
79
+ white-space: nowrap;
80
+ text-decoration: none;
81
+ cursor: pointer
82
+ }
83
+
84
+ .shp-Navigation_Link:visited {
85
+ color: inherit
86
+ }
87
+
88
+ .shp-Navigation_Link:focus {
89
+ outline: none
90
+ }
91
+
92
+ @media (min-width: 40em) {
93
+ .shp-Navigation_Link {
94
+ font-size: 1.4rem
95
+ }
96
+ }
97
+
98
+ .shp-Navigation_Link:hover {
99
+ text-decoration: none
100
+ }
101
+
102
+ .shp-Navigation_Link:hover .shp-Navigation_LinkText {
103
+ font-weight: 400;
104
+ color: var(--p-text);
105
+ text-decoration: none;
106
+ border-bottom: .3rem solid var(--p-action-primary)
107
+ }
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
+ .shp-Navigation_Link:focus .shp-Navigation_LinkText {
114
+ font-weight: 400;
115
+ color: var(--p-text)
116
+ }
117
+
118
+ .shp-Navigation_LinkText {
119
+ padding: 1.6rem 0 1.3rem 0;
120
+ border-bottom: .3rem solid transparent
121
+ }
122
+
123
+ .shp-Navigation_LinkText {
124
+ display: block;
125
+ }
126
+
127
+ [aria-selected='true'],
128
+ .shp-Navigation_Link:focus .shp-Navigation_LinkText {
129
+ font-weight: 400;
130
+ color: var(--p-text)
131
+ }
132
+
133
+ [aria-selected='true'] .shp-Navigation_LinkText {
134
+ color: var(--p-action-primary);
135
+ border-bottom: .3rem solid var(--p-action-primary)
136
+ }
data/app/assets/stylesheets/polaris_view_components/spacer_component.css ADDED
@@ -0,0 +1,39 @@
1
+ /* Vertical */
2
+ .Polaris-Spacer--verticalSpacingExtraTight {
3
+ height: 4px;
4
+ }
5
+ .Polaris-Spacer--verticalSpacingTight {
6
+ height: 8px;
7
+ }
8
+ .Polaris-Spacer--verticalSpacingBaseTight {
9
+ height: 12px;
10
+ }
11
+ .Polaris-Spacer--verticalSpacingBase {
12
+ height: 16px;
13
+ }
14
+ .Polaris-Spacer--verticalSpacingLoose {
15
+ height: 20px;
16
+ }
17
+ .Polaris-Spacer--verticalSpacingExtraLoose {
18
+ height: 32px;
19
+ }
20
+
21
+ /* Horizontal */
22
+ .Polaris-Spacer--horizontalSpacingExtraTight {
23
+ width: 4px;
24
+ }
25
+ .Polaris-Spacer--horizontalSpacingTight {
26
+ width: 8px;
27
+ }
28
+ .Polaris-Spacer--horizontalSpacingBaseTight {
29
+ width: 12px;
30
+ }
31
+ .Polaris-Spacer--horizontalSpacingBase {
32
+ width: 16px;
33
+ }
34
+ .Polaris-Spacer--horizontalSpacingLoose {
35
+ width: 20px;
36
+ }
37
+ .Polaris-Spacer--horizontalSpacingExtraLoose {
38
+ width: 32px;
39
+ }