polaris_view_components 0.3.3 → 0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/app/assets/stylesheets/polaris_view_components/custom.css +18 -0
- data/app/assets/stylesheets/polaris_view_components/spacer_component.css +39 -0
- data/app/assets/stylesheets/polaris_view_components.css +53 -0
- data/app/assets/stylesheets/polaris_view_components.postcss.css +2 -0
- data/app/components/polaris/card/header_component.rb +0 -2
- data/app/components/polaris/card_component.rb +0 -2
- data/app/components/polaris/data_table/cell_component.html.erb +18 -0
- data/app/components/polaris/data_table/cell_component.rb +49 -0
- data/app/components/polaris/data_table/column_component.rb +19 -0
- data/app/components/polaris/data_table_component.html.erb +77 -0
- data/app/components/polaris/data_table_component.rb +42 -0
- data/app/components/polaris/dropzone/component.rb +0 -2
- data/app/components/polaris/empty_state_component.html.erb +16 -11
- data/app/components/polaris/empty_state_component.rb +1 -0
- data/app/components/polaris/layout/section.rb +2 -0
- data/app/components/polaris/link_component.rb +3 -1
- data/app/components/polaris/spacer_component.rb +50 -0
- data/app/components/polaris/tag_component.rb +2 -2
- data/app/helpers/polaris/view_helper.rb +2 -0
- data/lib/polaris/view_components/engine.rb +0 -1
- data/lib/polaris/view_components/version.rb +1 -1
- metadata +10 -5
- data/app/components/polaris/choice_list/component.html.erb +0 -34
- data/app/components/polaris/choice_list/component.rb +0 -65
- data/app/helpers/polaris/action_helper.rb +0 -14
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 848460847dd95a9b22891491c48d9bbf9091a0a6eda013c4a724ca5d3648b19f
|
4
|
+
data.tar.gz: 4e034a365bfccb0d6b1cda9ff3663850fdde1af80a490f768bbce2d4fffe8603
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f15c1073c23e0a785c8187f98bfa420bea87ffb89d29cf3b8123c957a375f09ef090035b94a0aba12119d31ce17ce5706683164b08bb1ac75cb7e7f63d085d14
|
7
|
+
data.tar.gz: 6381bba31617b45462489f46013300418c3a0bb4f54e2ddea75edfc7e8320927d8c0b3f715d415b7db4a262e8157ba22d949d0ed9a6a6e00a06ab19737adb098
|
data/README.md
CHANGED
@@ -85,7 +85,7 @@ In addition to the dependencies declared in the `gemspec`, Polaris ViewComponent
|
|
85
85
|
To get started:
|
86
86
|
|
87
87
|
1. Run: `bundle install`
|
88
|
-
2. Run: `
|
88
|
+
2. Run: `bin/dev`
|
89
89
|
|
90
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`.
|
91
91
|
|
@@ -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
|
+
}
|
@@ -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
|
+
}
|
@@ -2142,3 +2142,56 @@ html, body{ min-height:100%; height:100%; }
|
|
2142
2142
|
color: var(--p-action-primary);
|
2143
2143
|
border-bottom: .3rem solid var(--p-action-primary)
|
2144
2144
|
}
|
2145
|
+
/* Vertical */
|
2146
|
+
.Polaris-Spacer--verticalSpacingExtraTight {
|
2147
|
+
height: 4px;
|
2148
|
+
}
|
2149
|
+
.Polaris-Spacer--verticalSpacingTight {
|
2150
|
+
height: 8px;
|
2151
|
+
}
|
2152
|
+
.Polaris-Spacer--verticalSpacingBaseTight {
|
2153
|
+
height: 12px;
|
2154
|
+
}
|
2155
|
+
.Polaris-Spacer--verticalSpacingBase {
|
2156
|
+
height: 16px;
|
2157
|
+
}
|
2158
|
+
.Polaris-Spacer--verticalSpacingLoose {
|
2159
|
+
height: 20px;
|
2160
|
+
}
|
2161
|
+
.Polaris-Spacer--verticalSpacingExtraLoose {
|
2162
|
+
height: 32px;
|
2163
|
+
}
|
2164
|
+
/* Horizontal */
|
2165
|
+
.Polaris-Spacer--horizontalSpacingExtraTight {
|
2166
|
+
width: 4px;
|
2167
|
+
}
|
2168
|
+
.Polaris-Spacer--horizontalSpacingTight {
|
2169
|
+
width: 8px;
|
2170
|
+
}
|
2171
|
+
.Polaris-Spacer--horizontalSpacingBaseTight {
|
2172
|
+
width: 12px;
|
2173
|
+
}
|
2174
|
+
.Polaris-Spacer--horizontalSpacingBase {
|
2175
|
+
width: 16px;
|
2176
|
+
}
|
2177
|
+
.Polaris-Spacer--horizontalSpacingLoose {
|
2178
|
+
width: 20px;
|
2179
|
+
}
|
2180
|
+
.Polaris-Spacer--horizontalSpacingExtraLoose {
|
2181
|
+
width: 32px;
|
2182
|
+
}
|
2183
|
+
/* Add missing 1/4 section for layout */
|
2184
|
+
@media (min-width: 30.625em) {
|
2185
|
+
.Polaris-Layout__Section--oneFourth {
|
2186
|
+
flex: 1 1 20rem;
|
2187
|
+
min-width: 0;
|
2188
|
+
}
|
2189
|
+
}
|
2190
|
+
/* Fix Tag removal link */
|
2191
|
+
a.Polaris-Tag__Button {
|
2192
|
+
height: auto;
|
2193
|
+
}
|
2194
|
+
/* Remove underline for sort link */
|
2195
|
+
.Polaris-DataTable__Cell--sortable a {
|
2196
|
+
text-decoration: none;
|
2197
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
<% if @sort_url %>
|
2
|
+
<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
|
3
|
+
<%= link_to @sort_url, class: "Polaris-DataTable__Heading" do %>
|
4
|
+
<span class="Polaris-DataTable__Icon">
|
5
|
+
<% if @sorted == :asc %>
|
6
|
+
<%= polaris_icon(name: "CaretUpMinor") %>
|
7
|
+
<% else %>
|
8
|
+
<%= polaris_icon(name: "CaretDownMinor") %>
|
9
|
+
<% end %>
|
10
|
+
</span>
|
11
|
+
<%= content %>
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
14
|
+
<% else %>
|
15
|
+
<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
|
16
|
+
<%= content %>
|
17
|
+
<% end %>
|
18
|
+
<% end %>
|
@@ -0,0 +1,49 @@
|
|
1
|
+
class Polaris::DataTable::CellComponent < Polaris::NewComponent
|
2
|
+
ALIGNMENT_DEFAULT = :top
|
3
|
+
ALIGNMENT_MAPPINGS = {
|
4
|
+
top: "Polaris-DataTable__Cell--verticalAlignTop",
|
5
|
+
bottom: "Polaris-DataTable__Cell--verticalAlignBottom",
|
6
|
+
middle: "Polaris-DataTable__Cell--verticalAlignMiddle",
|
7
|
+
baseline: "Polaris-DataTable__Cell--verticalAlignBaseline",
|
8
|
+
}
|
9
|
+
ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
|
10
|
+
|
11
|
+
def initialize(
|
12
|
+
vertical_alignment:,
|
13
|
+
first: false,
|
14
|
+
numeric: false,
|
15
|
+
header: false,
|
16
|
+
total: false,
|
17
|
+
total_footer: false,
|
18
|
+
sorted: false,
|
19
|
+
sort_url: nil,
|
20
|
+
**system_arguments
|
21
|
+
)
|
22
|
+
@vertical_alignment = vertical_alignment
|
23
|
+
@numeric = numeric
|
24
|
+
@first = first
|
25
|
+
@header = header
|
26
|
+
@total = total
|
27
|
+
@total_footer = total_footer
|
28
|
+
@sorted = sorted
|
29
|
+
@sort_url = sort_url
|
30
|
+
@system_arguments = system_arguments
|
31
|
+
end
|
32
|
+
|
33
|
+
def system_arguments
|
34
|
+
{ tag: "td" }.deep_merge(@system_arguments).tap do |args|
|
35
|
+
args[:classes] = class_names(
|
36
|
+
args[:classes],
|
37
|
+
"Polaris-DataTable__Cell",
|
38
|
+
ALIGNMENT_MAPPINGS[@vertical_alignment],
|
39
|
+
"Polaris-DataTable__Cell--firstColumn": @first,
|
40
|
+
"Polaris-DataTable__Cell--numeric": @numeric,
|
41
|
+
"Polaris-DataTable__Cell--header": @header,
|
42
|
+
"Polaris-DataTable__Cell--total": @total,
|
43
|
+
"Polaris-DataTable__Cell--sortable": @sort_url.present?,
|
44
|
+
"Polaris-DataTable__Cell--sorted": @sorted,
|
45
|
+
"Polaris-DataTable--cellTotalFooter": @total_footer,
|
46
|
+
)
|
47
|
+
end
|
48
|
+
end
|
49
|
+
end
|
@@ -0,0 +1,19 @@
|
|
1
|
+
class Polaris::DataTable::ColumnComponent < Polaris::NewComponent
|
2
|
+
SORT_DEFAULT = false
|
3
|
+
SORT_OPTIONS = [false, :asc, :desc]
|
4
|
+
|
5
|
+
attr_reader :title, :numeric, :total, :sorted, :sort_url
|
6
|
+
|
7
|
+
def initialize(title, numeric: false, total: nil, sorted: SORT_DEFAULT, sort_url: nil, **system_arguments, &block)
|
8
|
+
@title = title
|
9
|
+
@numeric = numeric
|
10
|
+
@total = total
|
11
|
+
@sorted = fetch_or_fallback(SORT_OPTIONS, sorted, SORT_DEFAULT)
|
12
|
+
@sort_url = sort_url
|
13
|
+
@block = block
|
14
|
+
end
|
15
|
+
|
16
|
+
def call(row)
|
17
|
+
@block.call(row)
|
18
|
+
end
|
19
|
+
end
|
@@ -0,0 +1,77 @@
|
|
1
|
+
<%= render Polaris::BaseComponent.new(**system_arguments) do %>
|
2
|
+
<div class="Polaris-DataTable__ScrollContainer">
|
3
|
+
<table class="Polaris-DataTable__Table">
|
4
|
+
<thead>
|
5
|
+
<tr>
|
6
|
+
<% columns.each_with_index do |column, index| %>
|
7
|
+
<%= render_cell(
|
8
|
+
first: index.zero?,
|
9
|
+
numeric: column.numeric,
|
10
|
+
tag: "th",
|
11
|
+
scope: "col",
|
12
|
+
header: true,
|
13
|
+
sort_url: column.sort_url,
|
14
|
+
sorted: column.sorted,
|
15
|
+
) do %>
|
16
|
+
<%= column.title %>
|
17
|
+
<% end %>
|
18
|
+
<% end %>
|
19
|
+
</tr>
|
20
|
+
<% if @totals_in_header %>
|
21
|
+
<tr>
|
22
|
+
<% columns.each_with_index do |column, index| %>
|
23
|
+
<%= render_cell(
|
24
|
+
first: index.zero?,
|
25
|
+
numeric: column.numeric,
|
26
|
+
tag: (index.zero? ? "th" : "td"),
|
27
|
+
scope: ("row" if index.zero?),
|
28
|
+
total: true,
|
29
|
+
) do %>
|
30
|
+
<%= column.total %>
|
31
|
+
<% end %>
|
32
|
+
<% end %>
|
33
|
+
</tr>
|
34
|
+
<% end %>
|
35
|
+
</thead>
|
36
|
+
<tbody>
|
37
|
+
<% @data.each do |row| %>
|
38
|
+
<tr class="Polaris-DataTable__TableRow <%= "Polaris-DataTable--hoverable" if @hoverable %>">
|
39
|
+
<% columns.each_with_index do |column, index| %>
|
40
|
+
<%= render_cell(
|
41
|
+
first: index.zero?,
|
42
|
+
numeric: column.numeric,
|
43
|
+
tag: (index.zero? ? "th" : "td"),
|
44
|
+
scope: ("row" if index.zero?),
|
45
|
+
) do %>
|
46
|
+
<%= column.call(row) %>
|
47
|
+
<% end %>
|
48
|
+
<% end %>
|
49
|
+
</tr>
|
50
|
+
<% end %>
|
51
|
+
</tbody>
|
52
|
+
<% if @totals_in_footer %>
|
53
|
+
<tfoot>
|
54
|
+
<tr>
|
55
|
+
<% columns.each_with_index do |column, index| %>
|
56
|
+
<%= render_cell(
|
57
|
+
first: index.zero?,
|
58
|
+
numeric: column.numeric,
|
59
|
+
tag: (index.zero? ? "th" : "td"),
|
60
|
+
scope: ("row" if index.zero?),
|
61
|
+
total: true,
|
62
|
+
total_footer: true,
|
63
|
+
) do %>
|
64
|
+
<%= column.total %>
|
65
|
+
<% end %>
|
66
|
+
<% end %>
|
67
|
+
</tr>
|
68
|
+
</tfoot>
|
69
|
+
<% end %>
|
70
|
+
</table>
|
71
|
+
</div>
|
72
|
+
<% if footer.present? %>
|
73
|
+
<div class="Polaris-DataTable__Footer">
|
74
|
+
<%= footer %>
|
75
|
+
</div>
|
76
|
+
<% end %>
|
77
|
+
<% end %>
|
@@ -0,0 +1,42 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Polaris
|
4
|
+
class DataTableComponent < Polaris::NewComponent
|
5
|
+
ALIGNMENT_DEFAULT = :top
|
6
|
+
ALIGNMENT_OPTIONS = [:top, :bottom, :middle, :baseline]
|
7
|
+
|
8
|
+
renders_many :columns, -> (title, **system_arguments, &block) do
|
9
|
+
DataTable::ColumnComponent.new(title, **system_arguments, &block)
|
10
|
+
end
|
11
|
+
renders_one :footer
|
12
|
+
|
13
|
+
def initialize(
|
14
|
+
data,
|
15
|
+
hoverable: true,
|
16
|
+
vertical_alignment: ALIGNMENT_DEFAULT,
|
17
|
+
totals_in_header: false,
|
18
|
+
totals_in_footer: false,
|
19
|
+
**system_arguments
|
20
|
+
)
|
21
|
+
@data = data
|
22
|
+
@hoverable = hoverable
|
23
|
+
@vertical_alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, vertical_alignment, ALIGNMENT_DEFAULT)
|
24
|
+
@totals_in_header = totals_in_header
|
25
|
+
@totals_in_footer = totals_in_footer
|
26
|
+
@system_arguments = system_arguments
|
27
|
+
end
|
28
|
+
|
29
|
+
def system_arguments
|
30
|
+
{ tag: "div" }.deep_merge(@system_arguments).tap do |args|
|
31
|
+
args[:classes] = class_names(
|
32
|
+
args[:classes],
|
33
|
+
"Polaris-DataTable",
|
34
|
+
)
|
35
|
+
end
|
36
|
+
end
|
37
|
+
|
38
|
+
def render_cell(**arguments, &block)
|
39
|
+
render(DataTable::CellComponent.new(vertical_alignment: @vertical_alignment, **arguments), &block)
|
40
|
+
end
|
41
|
+
end
|
42
|
+
end
|
@@ -16,20 +16,22 @@
|
|
16
16
|
<% end %>
|
17
17
|
</div>
|
18
18
|
<% end %>
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
<%
|
23
|
-
|
19
|
+
<% if primary_action.present? || secondary_action.present? %>
|
20
|
+
<div class="Polaris-EmptyState__Actions">
|
21
|
+
<%= polaris_stack(spacing: :tight, distribution: :center, alignment: :center) do |stack| %>
|
22
|
+
<% if primary_action.present? %>
|
23
|
+
<% stack.item do %>
|
24
|
+
<%= primary_action %>
|
25
|
+
<% end %>
|
24
26
|
<% end %>
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
27
|
+
<% if secondary_action.present? %>
|
28
|
+
<% stack.item do %>
|
29
|
+
<%= secondary_action %>
|
30
|
+
<% end %>
|
29
31
|
<% end %>
|
30
32
|
<% end %>
|
31
|
-
|
32
|
-
|
33
|
+
</div>
|
34
|
+
<% end %>
|
33
35
|
<% if footer.present? %>
|
34
36
|
<div class="Polaris-EmptyState__FooterContent">
|
35
37
|
<div class="Polaris-TextContainer">
|
@@ -44,4 +46,7 @@
|
|
44
46
|
<img src="<%= @image %>" role="presentation" alt="" class="Polaris-EmptyState__Image">
|
45
47
|
</div>
|
46
48
|
</div>
|
49
|
+
<% if unsectioned_content.present? %>
|
50
|
+
<%= unsectioned_content %>
|
51
|
+
<% end %>
|
47
52
|
<% end %>
|
@@ -11,6 +11,7 @@ module Polaris
|
|
11
11
|
full_width: false,
|
12
12
|
one_half: false,
|
13
13
|
one_third: false,
|
14
|
+
one_fourth: false,
|
14
15
|
**system_arguments
|
15
16
|
)
|
16
17
|
@position = position
|
@@ -24,6 +25,7 @@ module Polaris
|
|
24
25
|
"Polaris-Layout__Section--fullWidth" => full_width,
|
25
26
|
"Polaris-Layout__Section--oneHalf" => one_half,
|
26
27
|
"Polaris-Layout__Section--oneThird" => one_third,
|
28
|
+
"Polaris-Layout__Section--oneFourth" => one_fourth,
|
27
29
|
)
|
28
30
|
end
|
29
31
|
|
@@ -6,6 +6,7 @@ module Polaris
|
|
6
6
|
url:,
|
7
7
|
external: false,
|
8
8
|
monochrome: false,
|
9
|
+
no_underline: false,
|
9
10
|
**system_arguments
|
10
11
|
)
|
11
12
|
@url = url
|
@@ -23,13 +24,14 @@ module Polaris
|
|
23
24
|
@system_arguments[:classes],
|
24
25
|
"Polaris-Link",
|
25
26
|
"Polaris-Link--monochrome" => monochrome,
|
27
|
+
"Polaris-Link--removeUnderline" => no_underline,
|
26
28
|
)
|
27
29
|
end
|
28
30
|
|
29
31
|
def call
|
30
32
|
render(Polaris::BaseComponent.new(**@system_arguments)) do
|
31
33
|
safe_join [
|
32
|
-
content.strip,
|
34
|
+
content.strip.html_safe,
|
33
35
|
(external_icon if @external),
|
34
36
|
].compact
|
35
37
|
end
|
@@ -0,0 +1,50 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Polaris
|
4
|
+
class SpacerComponent < Polaris::NewComponent
|
5
|
+
VERTICAL_SPACING_DEFAULT = :default
|
6
|
+
VERTICAL_SPACING_MAPPINGS = {
|
7
|
+
VERTICAL_SPACING_DEFAULT => "",
|
8
|
+
:extra_tight => "Polaris-Spacer--verticalSpacingExtraTight",
|
9
|
+
:tight => "Polaris-Spacer--verticalSpacingTight",
|
10
|
+
:base_tight => "Polaris-Spacer--verticalSpacingBaseTight",
|
11
|
+
:base => "Polaris-Spacer--verticalSpacingBase",
|
12
|
+
:loose => "Polaris-Spacer--verticalSpacingLoose",
|
13
|
+
:extra_loose => "Polaris-Spacer--verticalSpacingExtraLoose",
|
14
|
+
}
|
15
|
+
VERTICAL_SPACING_OPTIONS = VERTICAL_SPACING_MAPPINGS.keys
|
16
|
+
|
17
|
+
HORIZONTAL_SPACING_DEFAULT = :default
|
18
|
+
HORIZONTAL_SPACING_MAPPINGS = {
|
19
|
+
HORIZONTAL_SPACING_DEFAULT => "",
|
20
|
+
:extra_tight => "Polaris-Spacer--horizontalSpacingExtraTight",
|
21
|
+
:tight => "Polaris-Spacer--horizontalSpacingTight",
|
22
|
+
:base_tight => "Polaris-Spacer--horizontalSpacingBaseTight",
|
23
|
+
:base => "Polaris-Spacer--horizontalSpacingBase",
|
24
|
+
:loose => "Polaris-Spacer--horizontalSpacingLoose",
|
25
|
+
:extra_loose => "Polaris-Spacer--horizontalSpacingExtraLoose",
|
26
|
+
}
|
27
|
+
HORIZONTAL_SPACING_OPTIONS = HORIZONTAL_SPACING_MAPPINGS.keys
|
28
|
+
|
29
|
+
def initialize(
|
30
|
+
vertical: VERTICAL_SPACING_DEFAULT,
|
31
|
+
horizontal: HORIZONTAL_SPACING_DEFAULT,
|
32
|
+
**system_arguments
|
33
|
+
)
|
34
|
+
@system_arguments = system_arguments
|
35
|
+
@system_arguments[:tag] = "div"
|
36
|
+
@system_arguments[:classes] = class_names(
|
37
|
+
@system_arguments[:classes],
|
38
|
+
"Polaris-Spacer",
|
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)],
|
41
|
+
)
|
42
|
+
end
|
43
|
+
|
44
|
+
def call
|
45
|
+
render(Polaris::BaseComponent.new(**@system_arguments)) do
|
46
|
+
content
|
47
|
+
end
|
48
|
+
end
|
49
|
+
end
|
50
|
+
end
|
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
module Polaris
|
4
4
|
class TagComponent < Polaris::NewComponent
|
5
|
-
renders_one :remove_button,
|
5
|
+
renders_one :remove_button, -> (**system_arguments) do
|
6
6
|
render Polaris::BaseButton.new(
|
7
7
|
classes: "Polaris-Tag__Button",
|
8
8
|
disabled: @disabled,
|
@@ -10,7 +10,7 @@ module Polaris
|
|
10
10
|
) do |button|
|
11
11
|
polaris_icon(name: "CancelSmallMinor")
|
12
12
|
end
|
13
|
-
|
13
|
+
end
|
14
14
|
|
15
15
|
def initialize(clickable: false, disabled: false, **system_arguments)
|
16
16
|
@clickable = clickable
|
@@ -12,6 +12,7 @@ module Polaris
|
|
12
12
|
card: "Polaris::CardComponent",
|
13
13
|
checkbox: "Polaris::CheckboxComponent",
|
14
14
|
choice_list: "Polaris::ChoiceListComponent",
|
15
|
+
data_table: "Polaris::DataTableComponent",
|
15
16
|
description_list: "Polaris::DescriptionListComponent",
|
16
17
|
display_text: "Polaris::DisplayTextComponent",
|
17
18
|
dropzone: "Polaris::Dropzone::Component",
|
@@ -38,6 +39,7 @@ module Polaris
|
|
38
39
|
subheading: "Polaris::SubheadingComponent",
|
39
40
|
spinner: "Polaris::SpinnerComponent",
|
40
41
|
skeleton_body_text: "Polaris::SkeletonBodyTextComponent",
|
42
|
+
spacer: "Polaris::SpacerComponent",
|
41
43
|
tag: "Polaris::TagComponent",
|
42
44
|
text_container: "Polaris::TextContainerComponent",
|
43
45
|
text_field: "Polaris::TextFieldComponent",
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: polaris_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Dan Gamble
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-10-
|
12
|
+
date: 2021-10-13 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rails
|
@@ -454,7 +454,9 @@ files:
|
|
454
454
|
- app/assets/javascripts/polaris_view_components/text_field_controller.js
|
455
455
|
- app/assets/stylesheets/polaris_view_components.css
|
456
456
|
- app/assets/stylesheets/polaris_view_components.postcss.css
|
457
|
+
- app/assets/stylesheets/polaris_view_components/custom.css
|
457
458
|
- app/assets/stylesheets/polaris_view_components/shopify_navigation.css
|
459
|
+
- app/assets/stylesheets/polaris_view_components/spacer_component.css
|
458
460
|
- app/components/polaris/action.rb
|
459
461
|
- app/components/polaris/application_component.rb
|
460
462
|
- app/components/polaris/avatar_component.html.erb
|
@@ -483,11 +485,14 @@ files:
|
|
483
485
|
- app/components/polaris/checkbox_component.rb
|
484
486
|
- app/components/polaris/choice_component.html.erb
|
485
487
|
- app/components/polaris/choice_component.rb
|
486
|
-
- app/components/polaris/choice_list/component.html.erb
|
487
|
-
- app/components/polaris/choice_list/component.rb
|
488
488
|
- app/components/polaris/choice_list_component.html.erb
|
489
489
|
- app/components/polaris/choice_list_component.rb
|
490
490
|
- app/components/polaris/component.rb
|
491
|
+
- app/components/polaris/data_table/cell_component.html.erb
|
492
|
+
- app/components/polaris/data_table/cell_component.rb
|
493
|
+
- app/components/polaris/data_table/column_component.rb
|
494
|
+
- app/components/polaris/data_table_component.html.erb
|
495
|
+
- app/components/polaris/data_table_component.rb
|
491
496
|
- app/components/polaris/description_list_component.html.erb
|
492
497
|
- app/components/polaris/description_list_component.rb
|
493
498
|
- app/components/polaris/display_text_component.rb
|
@@ -547,6 +552,7 @@ files:
|
|
547
552
|
- app/components/polaris/shopify_navigation_component.rb
|
548
553
|
- app/components/polaris/skeleton_body_text_component.html.erb
|
549
554
|
- app/components/polaris/skeleton_body_text_component.rb
|
555
|
+
- app/components/polaris/spacer_component.rb
|
550
556
|
- app/components/polaris/spinner_component.html.erb
|
551
557
|
- app/components/polaris/spinner_component.rb
|
552
558
|
- app/components/polaris/stack_component.html.erb
|
@@ -561,7 +567,6 @@ files:
|
|
561
567
|
- app/components/polaris/thumbnail_component.html.erb
|
562
568
|
- app/components/polaris/thumbnail_component.rb
|
563
569
|
- app/components/polaris/visually_hidden_component.rb
|
564
|
-
- app/helpers/polaris/action_helper.rb
|
565
570
|
- app/helpers/polaris/class_name_helper.rb
|
566
571
|
- app/helpers/polaris/conditional_helper.rb
|
567
572
|
- app/helpers/polaris/fetch_or_fallback_helper.rb
|
@@ -1,34 +0,0 @@
|
|
1
|
-
<%= field_set_tag(nil, content_tag_options) do %>
|
2
|
-
<% if @title.present? %>
|
3
|
-
<%= content_tag("legend", class: "Polaris-ChoiceList__Title") do %>
|
4
|
-
<%= @title %>
|
5
|
-
<% end %>
|
6
|
-
<% end %>
|
7
|
-
|
8
|
-
<ul class="Polaris-ChoiceList__Choices">
|
9
|
-
<% choice_component = @allow_multiple ? Polaris::CheckboxComponent : Polaris::RadioButtonComponent %>
|
10
|
-
|
11
|
-
<% @choices.each do |choice| %>
|
12
|
-
<li>
|
13
|
-
<%= render choice_component.new(
|
14
|
-
form: @form,
|
15
|
-
attribute: @attribute,
|
16
|
-
name: final_name,
|
17
|
-
value: choice[:value],
|
18
|
-
label: choice[:label],
|
19
|
-
disabled: choice[:disabled] || @disabled,
|
20
|
-
checked: choice_is_selected?(choice),
|
21
|
-
help_text: choice[:help_text],
|
22
|
-
children_content: choice[:children_content],
|
23
|
-
input_attrs: @input_attrs,
|
24
|
-
) %>
|
25
|
-
</li>
|
26
|
-
<% end %>
|
27
|
-
</ul>
|
28
|
-
|
29
|
-
<% if @error.present? %>
|
30
|
-
<div class="Polaris-ChoiceList__ChoiceError">
|
31
|
-
<%= polaris_inline_error { @error } %>
|
32
|
-
</div>
|
33
|
-
<% end %>
|
34
|
-
<% end %>
|
@@ -1,65 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Polaris
|
4
|
-
module ChoiceList
|
5
|
-
class Component < Polaris::Component
|
6
|
-
def initialize(
|
7
|
-
choices:,
|
8
|
-
form: nil,
|
9
|
-
attribute: nil,
|
10
|
-
name: nil,
|
11
|
-
title: '',
|
12
|
-
title_hidden: false,
|
13
|
-
selected: [],
|
14
|
-
allow_multiple: false,
|
15
|
-
error: '',
|
16
|
-
disabled: false,
|
17
|
-
input_attrs: {},
|
18
|
-
**args
|
19
|
-
)
|
20
|
-
super
|
21
|
-
|
22
|
-
@choices = choices
|
23
|
-
@form = form
|
24
|
-
@attribute = attribute
|
25
|
-
|
26
|
-
@name = name
|
27
|
-
@title = title
|
28
|
-
@title_hidden = title_hidden
|
29
|
-
@selected = selected
|
30
|
-
@allow_multiple = allow_multiple
|
31
|
-
@error = error
|
32
|
-
@disabled = disabled
|
33
|
-
@input_attrs = input_attrs
|
34
|
-
end
|
35
|
-
|
36
|
-
def final_name
|
37
|
-
return nil if @name.nil?
|
38
|
-
|
39
|
-
@allow_multiple ? "#{@name}[]" : @name
|
40
|
-
end
|
41
|
-
|
42
|
-
def choice_is_selected?(choice)
|
43
|
-
@selected.include? choice[:value]
|
44
|
-
end
|
45
|
-
|
46
|
-
private
|
47
|
-
|
48
|
-
def classes
|
49
|
-
classes = ['Polaris-ChoiceList']
|
50
|
-
|
51
|
-
classes << 'Polaris-ChoiceList--titleHidden' if @title_hidden
|
52
|
-
|
53
|
-
classes
|
54
|
-
end
|
55
|
-
|
56
|
-
def additional_aria
|
57
|
-
super
|
58
|
-
|
59
|
-
{
|
60
|
-
invalid: @error.present?
|
61
|
-
}
|
62
|
-
end
|
63
|
-
end
|
64
|
-
end
|
65
|
-
end
|
@@ -1,14 +0,0 @@
|
|
1
|
-
module Polaris
|
2
|
-
module ActionHelper
|
3
|
-
def render_plain_action(action)
|
4
|
-
case action
|
5
|
-
when Hash
|
6
|
-
action = action(**action)
|
7
|
-
end
|
8
|
-
|
9
|
-
render Polaris::ButtonComponent.new(**action.to_h.except(:content), plain: true) do
|
10
|
-
action.content
|
11
|
-
end
|
12
|
-
end
|
13
|
-
end
|
14
|
-
end
|