polaris_view_components 1.0.0 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
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