polaris_view_components 0.9.0 → 0.10.1
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/javascripts/polaris_view_components/dropzone_controller.js +31 -4
- data/app/assets/javascripts/polaris_view_components/frame_controller.js +1 -1
- data/app/assets/javascripts/polaris_view_components/text_field_controller.js +5 -0
- data/app/assets/javascripts/polaris_view_components/{utils.js → utils/index.js} +3 -1
- data/app/assets/javascripts/polaris_view_components/utils/use-transition.js +162 -0
- data/app/assets/javascripts/polaris_view_components.js +184 -161
- data/app/assets/stylesheets/polaris_view_components/custom.css +37 -0
- data/app/assets/stylesheets/polaris_view_components.css +30 -0
- data/app/components/polaris/action_list/item_component.rb +2 -1
- data/app/components/polaris/button_component.html.erb +2 -2
- data/app/components/polaris/dropzone_component.html.erb +9 -6
- data/app/components/polaris/filters_component.rb +3 -1
- data/app/components/polaris/headless_button.html.erb +2 -2
- data/app/components/polaris/headless_button.rb +3 -1
- data/app/components/polaris/page_component.html.erb +81 -10
- data/app/components/polaris/page_component.rb +85 -28
- data/app/components/polaris/resource_item_component.rb +4 -1
- data/app/components/polaris/text_field_component.html.erb +1 -1
- data/app/components/polaris/text_field_component.rb +1 -1
- data/app/components/polaris/visually_hidden_component.rb +0 -3
- data/lib/polaris/view_components/version.rb +1 -1
- metadata +89 -4
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
<%= render Polaris::BaseComponent.new(
|
|
1
|
+
<%= render Polaris::BaseComponent.new(**system_arguments) do %>
|
|
2
2
|
<% if render_header? %>
|
|
3
|
-
<%= render Polaris::BaseComponent.new(
|
|
3
|
+
<%= render Polaris::BaseComponent.new(**header_arguments) do %>
|
|
4
4
|
<div class="Polaris-Page-Header__Row">
|
|
5
5
|
<% if @back_url.present? %>
|
|
6
6
|
<div class="Polaris-Page-Header__BreadcrumbWrapper">
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
<% end %>
|
|
18
18
|
|
|
19
19
|
<div class="Polaris-Page-Header__TitleWrapper">
|
|
20
|
-
|
|
20
|
+
<%= tag.div(class: ["Polaris-Header-Title--hasThumbnail": thumbnail.present?]) do %>
|
|
21
21
|
<% if thumbnail.present? %>
|
|
22
22
|
<div>
|
|
23
23
|
<%= thumbnail %>
|
|
@@ -38,18 +38,89 @@
|
|
|
38
38
|
<% end %>
|
|
39
39
|
|
|
40
40
|
<% if @subtitle.present? %>
|
|
41
|
-
|
|
41
|
+
<%= render Polaris::BaseComponent.new(**subtitle_arguments) do %>
|
|
42
42
|
<p><%= @subtitle %></p>
|
|
43
|
-
|
|
43
|
+
<% end %>
|
|
44
44
|
<% end %>
|
|
45
45
|
</div>
|
|
46
|
-
|
|
46
|
+
<% end %>
|
|
47
47
|
</div>
|
|
48
48
|
|
|
49
|
-
<% if primary_action.present? %>
|
|
49
|
+
<% if @secondary_actions.any? || action_group.present? || primary_action.present? || has_pagination? %>
|
|
50
50
|
<div class="Polaris-Page-Header__RightAlign">
|
|
51
|
-
<div class="Polaris-Page-
|
|
52
|
-
|
|
51
|
+
<div class="Polaris-Page-Header__Actions">
|
|
52
|
+
<% if @secondary_actions.any? || action_group.present? %>
|
|
53
|
+
<div class="Polaris-ActionMenu Polaris-ActionMenu--mobile">
|
|
54
|
+
<div class="Polaris-ActionMenu-RollupActions__RollupActivator">
|
|
55
|
+
<%= polaris_popover do |popover| %>
|
|
56
|
+
<% popover.button do |button| %>
|
|
57
|
+
<% button.icon(name: "HorizontalDotsMinor") %>
|
|
58
|
+
<% end %>
|
|
59
|
+
<%= polaris_action_list(style: "text-align: left;") do |action_list| %>
|
|
60
|
+
<% if @secondary_actions.any? %>
|
|
61
|
+
<% action_list.section do |section| %>
|
|
62
|
+
<% @secondary_actions.each do |action| %>
|
|
63
|
+
<% section.item(**action) { action[:content] } %>
|
|
64
|
+
<% end %>
|
|
65
|
+
<% end %>
|
|
66
|
+
<% end %>
|
|
67
|
+
|
|
68
|
+
<% if action_group.present? %>
|
|
69
|
+
<% action_list.section(title: action_group.title) do |section| %>
|
|
70
|
+
<% action_group.actions.each do |action| %>
|
|
71
|
+
<% section.item(**action) { action[:content] } %>
|
|
72
|
+
<% end %>
|
|
73
|
+
<% end %>
|
|
74
|
+
<% end %>
|
|
75
|
+
<% end %>
|
|
76
|
+
<% end %>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="Polaris-ActionMenu Polaris-ActionMenu--desktop">
|
|
80
|
+
<div class="Polaris-ActionMenu-Actions__ActionsLayout">
|
|
81
|
+
<%= polaris_button_group(spacing: :extra_tight) do |group| %>
|
|
82
|
+
<% @secondary_actions.each do |action| %>
|
|
83
|
+
<% group.item do %>
|
|
84
|
+
<% destructive = action.delete(:destructive) %>
|
|
85
|
+
<% tag.span(class: ["Polaris-ActionMenu-SecondaryAction", "Polaris-ActionMenu-SecondaryAction--destructive": destructive]) do %>
|
|
86
|
+
<%= polaris_button(**action) { action[:content] } %>
|
|
87
|
+
<% end %>
|
|
88
|
+
<% end %>
|
|
89
|
+
<% end %>
|
|
90
|
+
<% if action_group.present? %>
|
|
91
|
+
<% group.item do %>
|
|
92
|
+
<span class="Polaris-ActionMenu-SecondaryAction">
|
|
93
|
+
<%= action_group %>
|
|
94
|
+
</span>
|
|
95
|
+
<% end %>
|
|
96
|
+
<% end %>
|
|
97
|
+
<% end %>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
<% end %>
|
|
101
|
+
<% if primary_action.present? %>
|
|
102
|
+
<div class="Polaris-Page-Header__PrimaryActionWrapper">
|
|
103
|
+
<%= primary_action %>
|
|
104
|
+
</div>
|
|
105
|
+
<% end %>
|
|
106
|
+
<% if has_pagination? %>
|
|
107
|
+
<div class="Polaris-Page-Header__PaginationWrapper">
|
|
108
|
+
<nav aria-label="Pagination">
|
|
109
|
+
<%= polaris_button_group(segmented: true) do |group| %>
|
|
110
|
+
<% group.item do %>
|
|
111
|
+
<%= polaris_button(url: @prev_url, outline: true, disabled: @prev_url.blank?) do |button| %>
|
|
112
|
+
<% button.icon(name: "ChevronLeftMinor") %>
|
|
113
|
+
<% end %>
|
|
114
|
+
<% end %>
|
|
115
|
+
<% group.item do %>
|
|
116
|
+
<%= polaris_button(url: @next_url, outline: true, disabled: @next_url.blank?) do |button| %>
|
|
117
|
+
<% button.icon(name: "ChevronRightMinor") %>
|
|
118
|
+
<% end %>
|
|
119
|
+
<% end %>
|
|
120
|
+
<% end %>
|
|
121
|
+
</nav>
|
|
122
|
+
</div>
|
|
123
|
+
<% end %>
|
|
53
124
|
</div>
|
|
54
125
|
</div>
|
|
55
126
|
<% end %>
|
|
@@ -57,7 +128,7 @@
|
|
|
57
128
|
<% end %>
|
|
58
129
|
<% end %>
|
|
59
130
|
|
|
60
|
-
<%= render Polaris::BaseComponent.new(
|
|
131
|
+
<%= render Polaris::BaseComponent.new(**content_arguments) do %>
|
|
61
132
|
<%= content %>
|
|
62
133
|
<% end %>
|
|
63
134
|
<% end %>
|
|
@@ -2,55 +2,112 @@
|
|
|
2
2
|
|
|
3
3
|
module Polaris
|
|
4
4
|
class PageComponent < Polaris::Component
|
|
5
|
+
renders_one :title_metadata
|
|
6
|
+
renders_one :thumbnail, Polaris::ThumbnailComponent
|
|
5
7
|
renders_one :primary_action, ->(primary: true, **system_arguments) do
|
|
6
8
|
Polaris::ButtonComponent.new(primary: primary, **system_arguments)
|
|
7
9
|
end
|
|
8
|
-
|
|
9
|
-
renders_one :title_metadata
|
|
10
|
-
renders_one :thumbnail, Polaris::ThumbnailComponent
|
|
10
|
+
renders_one :action_group, "ActionGroupComponent"
|
|
11
11
|
|
|
12
12
|
def initialize(
|
|
13
13
|
title: nil,
|
|
14
14
|
subtitle: nil,
|
|
15
|
+
compact_title: false,
|
|
15
16
|
back_url: nil,
|
|
17
|
+
prev_url: nil,
|
|
18
|
+
next_url: nil,
|
|
16
19
|
narrow_width: false,
|
|
17
20
|
full_width: false,
|
|
18
21
|
divider: false,
|
|
22
|
+
secondary_actions: [],
|
|
19
23
|
**system_arguments
|
|
20
24
|
)
|
|
21
25
|
@title = title
|
|
22
26
|
@subtitle = subtitle
|
|
27
|
+
@compact_title = compact_title
|
|
23
28
|
@back_url = back_url
|
|
24
|
-
|
|
29
|
+
@prev_url = prev_url
|
|
30
|
+
@next_url = next_url
|
|
31
|
+
@narrow_width = narrow_width
|
|
32
|
+
@full_width = full_width
|
|
33
|
+
@divider = divider
|
|
34
|
+
@secondary_actions = secondary_actions
|
|
25
35
|
@system_arguments = system_arguments
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
"
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
36
|
+
end
|
|
37
|
+
|
|
38
|
+
def header_arguments
|
|
39
|
+
{
|
|
40
|
+
tag: "div",
|
|
41
|
+
classes: class_names(
|
|
42
|
+
"Polaris-Page-Header",
|
|
43
|
+
"Polaris-Page-Header--mobileView",
|
|
44
|
+
"Polaris-Page-Header--mediumTitle",
|
|
45
|
+
"Polaris-Page-Header--hasNavigation": @back_url.present?,
|
|
46
|
+
"Polaris-Page-Header--noBreadcrumbs": @back_url.blank?
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
end
|
|
50
|
+
|
|
51
|
+
def subtitle_arguments
|
|
52
|
+
{
|
|
53
|
+
tag: "div",
|
|
54
|
+
classes: class_names(
|
|
55
|
+
"Polaris-Header-Title__SubTitle",
|
|
56
|
+
"Polaris-Header-Title__SubtitleCompact": @compact_title
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
end
|
|
60
|
+
|
|
61
|
+
def content_arguments
|
|
62
|
+
{
|
|
63
|
+
tag: "div",
|
|
64
|
+
classes: class_names(
|
|
65
|
+
"Polaris-Page__Content",
|
|
66
|
+
"Polaris-Page--divider": @divider
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
end
|
|
70
|
+
|
|
71
|
+
def system_arguments
|
|
72
|
+
@system_arguments.tap do |opts|
|
|
73
|
+
opts[:tag] = "div"
|
|
74
|
+
opts[:classes] = class_names(
|
|
75
|
+
opts[:classes],
|
|
76
|
+
"Polaris-Page",
|
|
77
|
+
"Polaris-Page--narrowWidth": @narrow_width,
|
|
78
|
+
"Polaris-Page--fullWidth": @full_width
|
|
79
|
+
)
|
|
80
|
+
end
|
|
50
81
|
end
|
|
51
82
|
|
|
52
83
|
def render_header?
|
|
53
84
|
@title.present? || @subtitle.present? || @back_url.present? || primary_action.present?
|
|
54
85
|
end
|
|
86
|
+
|
|
87
|
+
def has_pagination?
|
|
88
|
+
@next_url.present? || @prev_url.present?
|
|
89
|
+
end
|
|
90
|
+
|
|
91
|
+
class ActionGroupComponent < Polaris::Component
|
|
92
|
+
attr_reader :title
|
|
93
|
+
attr_reader :actions
|
|
94
|
+
|
|
95
|
+
def initialize(title:, actions: [])
|
|
96
|
+
@title = title
|
|
97
|
+
@actions = actions
|
|
98
|
+
end
|
|
99
|
+
|
|
100
|
+
def call
|
|
101
|
+
render(Polaris::PopoverComponent.new) do |popover|
|
|
102
|
+
popover.button(disclosure: true) { @title }
|
|
103
|
+
|
|
104
|
+
polaris_action_list do |list|
|
|
105
|
+
@actions.each do |action|
|
|
106
|
+
list.item(**action) { action[:content] }
|
|
107
|
+
end
|
|
108
|
+
end
|
|
109
|
+
end
|
|
110
|
+
end
|
|
111
|
+
end
|
|
55
112
|
end
|
|
56
113
|
end
|
|
@@ -31,6 +31,7 @@ module Polaris
|
|
|
31
31
|
vertical_alignment: ALIGNMENT_DEFAULT,
|
|
32
32
|
cursor: CURSOR_DEFAULT,
|
|
33
33
|
selectable: false,
|
|
34
|
+
selected: false,
|
|
34
35
|
offset: false,
|
|
35
36
|
wrapper_arguments: {},
|
|
36
37
|
container_arguments: {},
|
|
@@ -40,6 +41,7 @@ module Polaris
|
|
|
40
41
|
@vertical_alignment = vertical_alignment
|
|
41
42
|
@cursor = fetch_or_fallback(CURSOR_OPTIONS, cursor, CURSOR_DEFAULT)
|
|
42
43
|
@selectable = selectable
|
|
44
|
+
@selected = selected
|
|
43
45
|
@offset = offset
|
|
44
46
|
@wrapper_arguments = wrapper_arguments
|
|
45
47
|
@container_arguments = container_arguments
|
|
@@ -79,7 +81,8 @@ module Polaris
|
|
|
79
81
|
args[:classes] = class_names(
|
|
80
82
|
args[:classes],
|
|
81
83
|
"Polaris-ResourceItem",
|
|
82
|
-
"Polaris-ResourceItem--selectable": @selectable
|
|
84
|
+
"Polaris-ResourceItem--selectable": @selectable,
|
|
85
|
+
"Polaris-ResourceItem--selected": @selected
|
|
83
86
|
)
|
|
84
87
|
prepend_option(args, :style, "cursor: #{@cursor};")
|
|
85
88
|
prepend_option(args[:data], :action, "click->polaris-resource-item#open")
|
|
@@ -105,7 +105,7 @@ 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-
|
|
108
|
+
polaris_text_field_clear_button_hidden_class: "Polaris-TextField__Hidden"
|
|
109
109
|
}
|
|
110
110
|
}.deep_merge(@system_arguments).tap do |opts|
|
|
111
111
|
opts[:classes] = class_names(
|
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.10.1
|
|
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: 2022-
|
|
12
|
+
date: 2022-06-04 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: rails
|
|
@@ -39,6 +39,90 @@ dependencies:
|
|
|
39
39
|
- - ">="
|
|
40
40
|
- !ruby/object:Gem::Version
|
|
41
41
|
version: 2.0.0
|
|
42
|
+
- !ruby/object:Gem::Dependency
|
|
43
|
+
name: capybara
|
|
44
|
+
requirement: !ruby/object:Gem::Requirement
|
|
45
|
+
requirements:
|
|
46
|
+
- - "~>"
|
|
47
|
+
- !ruby/object:Gem::Version
|
|
48
|
+
version: '3'
|
|
49
|
+
type: :development
|
|
50
|
+
prerelease: false
|
|
51
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
52
|
+
requirements:
|
|
53
|
+
- - "~>"
|
|
54
|
+
- !ruby/object:Gem::Version
|
|
55
|
+
version: '3'
|
|
56
|
+
- !ruby/object:Gem::Dependency
|
|
57
|
+
name: webdrivers
|
|
58
|
+
requirement: !ruby/object:Gem::Requirement
|
|
59
|
+
requirements:
|
|
60
|
+
- - "~>"
|
|
61
|
+
- !ruby/object:Gem::Version
|
|
62
|
+
version: '5.0'
|
|
63
|
+
type: :development
|
|
64
|
+
prerelease: false
|
|
65
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
66
|
+
requirements:
|
|
67
|
+
- - "~>"
|
|
68
|
+
- !ruby/object:Gem::Version
|
|
69
|
+
version: '5.0'
|
|
70
|
+
- !ruby/object:Gem::Dependency
|
|
71
|
+
name: selenium-webdriver
|
|
72
|
+
requirement: !ruby/object:Gem::Requirement
|
|
73
|
+
requirements:
|
|
74
|
+
- - "~>"
|
|
75
|
+
- !ruby/object:Gem::Version
|
|
76
|
+
version: '4.1'
|
|
77
|
+
type: :development
|
|
78
|
+
prerelease: false
|
|
79
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
80
|
+
requirements:
|
|
81
|
+
- - "~>"
|
|
82
|
+
- !ruby/object:Gem::Version
|
|
83
|
+
version: '4.1'
|
|
84
|
+
- !ruby/object:Gem::Dependency
|
|
85
|
+
name: minitest
|
|
86
|
+
requirement: !ruby/object:Gem::Requirement
|
|
87
|
+
requirements:
|
|
88
|
+
- - "~>"
|
|
89
|
+
- !ruby/object:Gem::Version
|
|
90
|
+
version: '5.0'
|
|
91
|
+
type: :development
|
|
92
|
+
prerelease: false
|
|
93
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
94
|
+
requirements:
|
|
95
|
+
- - "~>"
|
|
96
|
+
- !ruby/object:Gem::Version
|
|
97
|
+
version: '5.0'
|
|
98
|
+
- !ruby/object:Gem::Dependency
|
|
99
|
+
name: pry
|
|
100
|
+
requirement: !ruby/object:Gem::Requirement
|
|
101
|
+
requirements:
|
|
102
|
+
- - ">="
|
|
103
|
+
- !ruby/object:Gem::Version
|
|
104
|
+
version: '0'
|
|
105
|
+
type: :development
|
|
106
|
+
prerelease: false
|
|
107
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
108
|
+
requirements:
|
|
109
|
+
- - ">="
|
|
110
|
+
- !ruby/object:Gem::Version
|
|
111
|
+
version: '0'
|
|
112
|
+
- !ruby/object:Gem::Dependency
|
|
113
|
+
name: sprockets-rails
|
|
114
|
+
requirement: !ruby/object:Gem::Requirement
|
|
115
|
+
requirements:
|
|
116
|
+
- - ">="
|
|
117
|
+
- !ruby/object:Gem::Version
|
|
118
|
+
version: '0'
|
|
119
|
+
type: :development
|
|
120
|
+
prerelease: false
|
|
121
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
122
|
+
requirements:
|
|
123
|
+
- - ">="
|
|
124
|
+
- !ruby/object:Gem::Version
|
|
125
|
+
version: '0'
|
|
42
126
|
description:
|
|
43
127
|
email:
|
|
44
128
|
- dan@dangamble.co.uk
|
|
@@ -469,7 +553,8 @@ files:
|
|
|
469
553
|
- app/assets/javascripts/polaris_view_components/select_controller.js
|
|
470
554
|
- app/assets/javascripts/polaris_view_components/text_field_controller.js
|
|
471
555
|
- app/assets/javascripts/polaris_view_components/toast_controller.js
|
|
472
|
-
- app/assets/javascripts/polaris_view_components/utils.js
|
|
556
|
+
- app/assets/javascripts/polaris_view_components/utils/index.js
|
|
557
|
+
- app/assets/javascripts/polaris_view_components/utils/use-transition.js
|
|
473
558
|
- app/assets/stylesheets/polaris_view_components.css
|
|
474
559
|
- app/assets/stylesheets/polaris_view_components.postcss.css
|
|
475
560
|
- app/assets/stylesheets/polaris_view_components/custom.css
|
|
@@ -684,7 +769,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
684
769
|
- !ruby/object:Gem::Version
|
|
685
770
|
version: '0'
|
|
686
771
|
requirements: []
|
|
687
|
-
rubygems_version: 3.
|
|
772
|
+
rubygems_version: 3.3.7
|
|
688
773
|
signing_key:
|
|
689
774
|
specification_version: 4
|
|
690
775
|
summary: ViewComponents for Polaris Design System
|