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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b5c196d6af7c4233e15fb23812ee27294f573b1134ff7f80730fcabe4485e582
4
- data.tar.gz: 30aaba3540ef10aeea484b8e9b80f9eb618378ff010610ddee4a61946f6c2c19
3
+ metadata.gz: 98b39211033ac7fa157bc535d50ea49ef6cacfe5845728bc6005174e02b90f72
4
+ data.tar.gz: cc77db98a7531d0f6120f773602e3ee26115abd12e65e428bea9cfd5385d261f
5
5
  SHA512:
6
- metadata.gz: 28fd1d54512af94f7aede067fd8312fe501bd5b77e5eb756a24c7bacd8d98bef614d76d0c4072e77e0531a4eaee6e4c85708aac61a9253130d8b4f5e111bc064
7
- data.tar.gz: 469740c7ca6e3f52677cded12d8770fc1f75dbdd84be28690c57d1c8cff15c4552876e90837c3fcc33e947f123701601e8ac0f4203b32d64c6dcf877e629b194
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
- export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField }
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(_ref3) {
2303
- var name = _ref3.name, _ref3$options = _ref3.options, options = _ref3$options === void 0 ? {} : _ref3$options, effect = _ref3.effect;
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
+ }
@@ -39,7 +39,6 @@
39
39
  <% end %>
40
40
  <% end %>
41
41
  <% end %>
42
- </div>
43
42
  <% end %>
44
43
  <% end %>
45
44
  <% end %>
@@ -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
@@ -1,5 +1,5 @@
1
1
  module Polaris
2
2
  module ViewComponents
3
- VERSION = "1.0.0"
3
+ VERSION = "1.1.0"
4
4
  end
5
5
  end
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.0.0
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-06-12 00:00:00.000000000 Z
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.10
891
+ rubygems_version: 3.4.14
889
892
  signing_key:
890
893
  specification_version: 4
891
894
  summary: ViewComponents for Polaris Design System