polaris_view_components 1.0.0 → 1.1.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.
- checksums.yaml +4 -4
- data/app/assets/javascripts/polaris_view_components/index.js +4 -1
- data/app/assets/javascripts/polaris_view_components/tooltip_controller.js +54 -0
- data/app/assets/javascripts/polaris_view_components.js +50 -3
- data/app/assets/stylesheets/polaris_view_components/custom.pcss +47 -0
- data/app/assets/stylesheets/polaris_view_components.css +39 -0
- data/app/components/polaris/banner_component.html.erb +0 -1
- data/app/components/polaris/tooltip_component.html.erb +9 -0
- data/app/components/polaris/tooltip_component.rb +28 -0
- data/app/helpers/polaris/view_helper.rb +1 -0
- data/lib/polaris/view_components/version.rb +1 -1
- metadata +6 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 98b39211033ac7fa157bc535d50ea49ef6cacfe5845728bc6005174e02b90f72
|
4
|
+
data.tar.gz: cc77db98a7531d0f6120f773602e3ee26115abd12e65e428bea9cfd5385d261f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 41e962d3bf4b328f49d6c367f2a8f9e72f2110f8d18e81121fc04c0a00e819b5732aeefa1e54c0c0f57aaec0f57249bdb9f3647ab850e52d598bfecefce52219
|
7
|
+
data.tar.gz: e158a6ddf7c2e8d7d1d35b104addf991a53676bc890d731f8990f38312443c0bd1e8e027ecdc74ca24d711b828af74944b0879fdfefe424139a6bc6b695ec36d
|
@@ -13,8 +13,10 @@ import Scrollable from './scrollable_controller'
|
|
13
13
|
import Select from './select_controller'
|
14
14
|
import TextField from './text_field_controller'
|
15
15
|
import Toast from './toast_controller'
|
16
|
+
import Tooltip from './tooltip_controller'
|
16
17
|
|
17
|
-
|
18
|
+
|
19
|
+
export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField, Tooltip }
|
18
20
|
|
19
21
|
export function registerPolarisControllers(application) {
|
20
22
|
application.register('polaris-autocomplete', Autocomplete)
|
@@ -32,4 +34,5 @@ export function registerPolarisControllers(application) {
|
|
32
34
|
application.register('polaris-select', Select)
|
33
35
|
application.register('polaris-text-field', TextField)
|
34
36
|
application.register('polaris-toast', Toast)
|
37
|
+
application.register('polaris-tooltip', Tooltip)
|
35
38
|
}
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
2
|
+
import { createPopper } from "@popperjs/core/dist/esm";
|
3
|
+
|
4
|
+
export default class extends Controller {
|
5
|
+
static targets = ["template"];
|
6
|
+
static values = { active: Boolean, position: String }
|
7
|
+
|
8
|
+
initialize() {
|
9
|
+
this.shownTooltip = null;
|
10
|
+
}
|
11
|
+
|
12
|
+
getOffset() {
|
13
|
+
switch (this.positionValue) {
|
14
|
+
case "top", "bottom":
|
15
|
+
return [0, 8]
|
16
|
+
case "left", "right":
|
17
|
+
return [0, 6]
|
18
|
+
default:
|
19
|
+
return [0, 8]
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
show(event) {
|
24
|
+
if (!this.activeValue) return;
|
25
|
+
|
26
|
+
const popperOptions = {
|
27
|
+
placement: this.positionValue,
|
28
|
+
modifiers: [
|
29
|
+
{
|
30
|
+
name: 'offset',
|
31
|
+
options: {
|
32
|
+
offset: this.getOffset(),
|
33
|
+
},
|
34
|
+
}
|
35
|
+
],
|
36
|
+
};
|
37
|
+
|
38
|
+
const element = event.currentTarget;
|
39
|
+
|
40
|
+
let tooltip = document.createElement("span");
|
41
|
+
tooltip.className = "Polaris-Tooltip"
|
42
|
+
tooltip.innerHTML = this.templateTarget.innerHTML;
|
43
|
+
|
44
|
+
this.shownTooltip = element.appendChild(tooltip);
|
45
|
+
|
46
|
+
this.popper = createPopper(element, this.shownTooltip, popperOptions);
|
47
|
+
}
|
48
|
+
|
49
|
+
hide() {
|
50
|
+
if (this.shownTooltip) {
|
51
|
+
this.shownTooltip.remove();
|
52
|
+
}
|
53
|
+
}
|
54
|
+
}
|
@@ -2299,8 +2299,8 @@ function popperGenerator(generatorOptions) {
|
|
2299
2299
|
}
|
2300
2300
|
}));
|
2301
2301
|
function runModifierEffects() {
|
2302
|
-
state.orderedModifiers.forEach((function(
|
2303
|
-
var name =
|
2302
|
+
state.orderedModifiers.forEach((function(_ref) {
|
2303
|
+
var name = _ref.name, _ref$options = _ref.options, options = _ref$options === void 0 ? {} : _ref$options, effect = _ref.effect;
|
2304
2304
|
if (typeof effect === "function") {
|
2305
2305
|
var cleanupFn = effect({
|
2306
2306
|
state: state,
|
@@ -2616,6 +2616,52 @@ class Toast extends Controller {
|
|
2616
2616
|
}
|
2617
2617
|
}
|
2618
2618
|
|
2619
|
+
class Tooltip extends Controller {
|
2620
|
+
static targets=[ "template" ];
|
2621
|
+
static values={
|
2622
|
+
active: Boolean,
|
2623
|
+
position: String
|
2624
|
+
};
|
2625
|
+
initialize() {
|
2626
|
+
this.shownTooltip = null;
|
2627
|
+
}
|
2628
|
+
getOffset() {
|
2629
|
+
switch (this.positionValue) {
|
2630
|
+
case "bottom":
|
2631
|
+
return [ 0, 8 ];
|
2632
|
+
|
2633
|
+
case "right":
|
2634
|
+
return [ 0, 6 ];
|
2635
|
+
|
2636
|
+
default:
|
2637
|
+
return [ 0, 8 ];
|
2638
|
+
}
|
2639
|
+
}
|
2640
|
+
show(event) {
|
2641
|
+
if (!this.activeValue) return;
|
2642
|
+
const popperOptions = {
|
2643
|
+
placement: this.positionValue,
|
2644
|
+
modifiers: [ {
|
2645
|
+
name: "offset",
|
2646
|
+
options: {
|
2647
|
+
offset: this.getOffset()
|
2648
|
+
}
|
2649
|
+
} ]
|
2650
|
+
};
|
2651
|
+
const element = event.currentTarget;
|
2652
|
+
let tooltip = document.createElement("span");
|
2653
|
+
tooltip.className = "Polaris-Tooltip";
|
2654
|
+
tooltip.innerHTML = this.templateTarget.innerHTML;
|
2655
|
+
this.shownTooltip = element.appendChild(tooltip);
|
2656
|
+
this.popper = createPopper(element, this.shownTooltip, popperOptions);
|
2657
|
+
}
|
2658
|
+
hide() {
|
2659
|
+
if (this.shownTooltip) {
|
2660
|
+
this.shownTooltip.remove();
|
2661
|
+
}
|
2662
|
+
}
|
2663
|
+
}
|
2664
|
+
|
2619
2665
|
function registerPolarisControllers(application) {
|
2620
2666
|
application.register("polaris-autocomplete", Autocomplete);
|
2621
2667
|
application.register("polaris-button", Button);
|
@@ -2632,6 +2678,7 @@ function registerPolarisControllers(application) {
|
|
2632
2678
|
application.register("polaris-select", Select);
|
2633
2679
|
application.register("polaris-text-field", TextField);
|
2634
2680
|
application.register("polaris-toast", Toast);
|
2681
|
+
application.register("polaris-tooltip", Tooltip);
|
2635
2682
|
}
|
2636
2683
|
|
2637
|
-
export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField, registerPolarisControllers };
|
2684
|
+
export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField, Tooltip, registerPolarisControllers };
|
@@ -251,3 +251,50 @@ a.Polaris-Tag__Button {
|
|
251
251
|
align-items: center;
|
252
252
|
}
|
253
253
|
}
|
254
|
+
|
255
|
+
/* Tooltip */
|
256
|
+
|
257
|
+
.Polaris-Tooltip {
|
258
|
+
position: relative;
|
259
|
+
opacity: 1;
|
260
|
+
box-shadow: var(--p-shadow-lg);
|
261
|
+
border-radius: var(--p-border-radius-2);
|
262
|
+
pointer-events: none;
|
263
|
+
-webkit-backface-visibility: hidden;
|
264
|
+
backface-visibility: hidden;
|
265
|
+
will-change: opacity, left, top;
|
266
|
+
transition: opacity 200ms cubic-bezier(0.36, 0, 1, 1) 100ms;
|
267
|
+
}
|
268
|
+
.Polaris-Tooltip-TooltipOverlay__Content {
|
269
|
+
border-radius: var(--p-border-radius-2);
|
270
|
+
padding: var(--p-space-1) var(--p-space-2);
|
271
|
+
}
|
272
|
+
|
273
|
+
.Polaris-Tooltip-Arrow,.Polaris-Tooltip-Arrow::before {
|
274
|
+
position: absolute;
|
275
|
+
width: 10px;
|
276
|
+
height: 10px;
|
277
|
+
z-index: -1;
|
278
|
+
}
|
279
|
+
|
280
|
+
.Polaris-Tooltip-Arrow::before {
|
281
|
+
content: '';
|
282
|
+
transform: rotate(45deg);
|
283
|
+
background-color: var(--p-surface);
|
284
|
+
}
|
285
|
+
|
286
|
+
.Polaris-Tooltip[data-popper-placement^='top'] > .Polaris-Tooltip-Arrow {
|
287
|
+
bottom: -4px;
|
288
|
+
}
|
289
|
+
|
290
|
+
.Polaris-Tooltip[data-popper-placement^='bottom'] > .Polaris-Tooltip-Arrow {
|
291
|
+
top: -4px;
|
292
|
+
}
|
293
|
+
|
294
|
+
.Polaris-Tooltip[data-popper-placement^='left'] > .Polaris-Tooltip-Arrow {
|
295
|
+
right: -4px;
|
296
|
+
}
|
297
|
+
|
298
|
+
.Polaris-Tooltip[data-popper-placement^='right'] > .Polaris-Tooltip-Arrow {
|
299
|
+
left: -4px;
|
300
|
+
}
|
@@ -2810,3 +2810,42 @@ a.Polaris-Tag__Button {
|
|
2810
2810
|
align-items: center;
|
2811
2811
|
}
|
2812
2812
|
}
|
2813
|
+
/* Tooltip */
|
2814
|
+
.Polaris-Tooltip {
|
2815
|
+
position: relative;
|
2816
|
+
opacity: 1;
|
2817
|
+
box-shadow: var(--p-shadow-lg);
|
2818
|
+
border-radius: var(--p-border-radius-2);
|
2819
|
+
pointer-events: none;
|
2820
|
+
-webkit-backface-visibility: hidden;
|
2821
|
+
backface-visibility: hidden;
|
2822
|
+
will-change: opacity, left, top;
|
2823
|
+
transition: opacity 200ms cubic-bezier(0.36, 0, 1, 1) 100ms;
|
2824
|
+
}
|
2825
|
+
.Polaris-Tooltip-TooltipOverlay__Content {
|
2826
|
+
border-radius: var(--p-border-radius-2);
|
2827
|
+
padding: var(--p-space-1) var(--p-space-2);
|
2828
|
+
}
|
2829
|
+
.Polaris-Tooltip-Arrow,.Polaris-Tooltip-Arrow::before {
|
2830
|
+
position: absolute;
|
2831
|
+
width: 10px;
|
2832
|
+
height: 10px;
|
2833
|
+
z-index: -1;
|
2834
|
+
}
|
2835
|
+
.Polaris-Tooltip-Arrow::before {
|
2836
|
+
content: '';
|
2837
|
+
transform: rotate(45deg);
|
2838
|
+
background-color: var(--p-surface);
|
2839
|
+
}
|
2840
|
+
.Polaris-Tooltip[data-popper-placement^='top'] > .Polaris-Tooltip-Arrow {
|
2841
|
+
bottom: -4px;
|
2842
|
+
}
|
2843
|
+
.Polaris-Tooltip[data-popper-placement^='bottom'] > .Polaris-Tooltip-Arrow {
|
2844
|
+
top: -4px;
|
2845
|
+
}
|
2846
|
+
.Polaris-Tooltip[data-popper-placement^='left'] > .Polaris-Tooltip-Arrow {
|
2847
|
+
right: -4px;
|
2848
|
+
}
|
2849
|
+
.Polaris-Tooltip[data-popper-placement^='right'] > .Polaris-Tooltip-Arrow {
|
2850
|
+
left: -4px;
|
2851
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
<%= render(Polaris::BaseComponent.new(tag: "span", **@system_arguments)) do %>
|
2
|
+
<%= content %>
|
3
|
+
<template data-polaris-tooltip-target="template">
|
4
|
+
<div class="Polaris-Tooltip-TooltipOverlay__Content Polaris-Tooltip-TooltipOverlay--default">
|
5
|
+
<%= @text %>
|
6
|
+
</div>
|
7
|
+
<div class="Polaris-Tooltip-Arrow" data-popper-arrow="true"></div>
|
8
|
+
</template>
|
9
|
+
<% end %>
|
@@ -0,0 +1,28 @@
|
|
1
|
+
module Polaris
|
2
|
+
class TooltipComponent < Polaris::Component
|
3
|
+
POSITION_OPTIONS = [:top, :bottom, :left, :right]
|
4
|
+
DEFAULT_POSITION = :bottom
|
5
|
+
|
6
|
+
def initialize(
|
7
|
+
text: nil,
|
8
|
+
position: DEFAULT_POSITION,
|
9
|
+
active: true,
|
10
|
+
**system_arguments
|
11
|
+
)
|
12
|
+
@text = text
|
13
|
+
@system_arguments = system_arguments
|
14
|
+
@position = fetch_or_fallback(POSITION_OPTIONS, position, DEFAULT_POSITION)
|
15
|
+
@active = active
|
16
|
+
|
17
|
+
system_arguments[:data] ||= {}
|
18
|
+
prepend_option(system_arguments[:data], :polaris_tooltip_active_value, @active)
|
19
|
+
prepend_option(system_arguments[:data], :polaris_tooltip_position_value, @position)
|
20
|
+
prepend_option(
|
21
|
+
system_arguments[:data],
|
22
|
+
:action,
|
23
|
+
"mouseenter->polaris-tooltip#show mouseleave->polaris-tooltip#hide"
|
24
|
+
)
|
25
|
+
prepend_option(system_arguments[:data], :controller, "polaris-tooltip")
|
26
|
+
end
|
27
|
+
end
|
28
|
+
end
|
@@ -80,6 +80,7 @@ module Polaris
|
|
80
80
|
text_style: "Polaris::TextStyleComponent",
|
81
81
|
thumbnail: "Polaris::ThumbnailComponent",
|
82
82
|
toast: "Polaris::ToastComponent",
|
83
|
+
tooltip: "Polaris::TooltipComponent",
|
83
84
|
vertical_stack: "Polaris::VerticalStackComponent",
|
84
85
|
visually_hidden: "Polaris::VisuallyHiddenComponent"
|
85
86
|
}.freeze
|
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: 1.
|
4
|
+
version: 1.1.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: 2023-
|
12
|
+
date: 2023-07-19 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rails
|
@@ -647,6 +647,7 @@ files:
|
|
647
647
|
- app/assets/javascripts/polaris_view_components/select_controller.js
|
648
648
|
- app/assets/javascripts/polaris_view_components/text_field_controller.js
|
649
649
|
- app/assets/javascripts/polaris_view_components/toast_controller.js
|
650
|
+
- app/assets/javascripts/polaris_view_components/tooltip_controller.js
|
650
651
|
- app/assets/javascripts/polaris_view_components/utils/index.js
|
651
652
|
- app/assets/javascripts/polaris_view_components/utils/use-transition.js
|
652
653
|
- app/assets/stylesheets/polaris_view_components.css
|
@@ -845,6 +846,8 @@ files:
|
|
845
846
|
- app/components/polaris/tokens/color.rb
|
846
847
|
- app/components/polaris/tokens/shadow.rb
|
847
848
|
- app/components/polaris/tokens/spacing.rb
|
849
|
+
- app/components/polaris/tooltip_component.html.erb
|
850
|
+
- app/components/polaris/tooltip_component.rb
|
848
851
|
- app/components/polaris/top_bar/user_menu_component.html.erb
|
849
852
|
- app/components/polaris/top_bar/user_menu_component.rb
|
850
853
|
- app/components/polaris/vertical_stack_component.rb
|
@@ -885,7 +888,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
885
888
|
- !ruby/object:Gem::Version
|
886
889
|
version: '0'
|
887
890
|
requirements: []
|
888
|
-
rubygems_version: 3.4.
|
891
|
+
rubygems_version: 3.4.14
|
889
892
|
signing_key:
|
890
893
|
specification_version: 4
|
891
894
|
summary: ViewComponents for Polaris Design System
|