polaris_view_components 1.0.1 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 77fb329e1f752e7b3446dbc763e82701597ab94975ed2e2f7fd437c2ba5899a6
-  data.tar.gz: 54c7b27f3160b1112cea36040746afc9a23f78be05d4f1cbdd98413d68c9eb58
+  metadata.gz: 98b39211033ac7fa157bc535d50ea49ef6cacfe5845728bc6005174e02b90f72
+  data.tar.gz: cc77db98a7531d0f6120f773602e3ee26115abd12e65e428bea9cfd5385d261f
 SHA512:
-  metadata.gz: f9b6ba298f65acb1dd3b24414c1162d65c48b32bd68e28e4db13c94407deaba12a9b053d059df6a937d0e9c1f8a27a27e5a5d13b21eebc628829e9679eca5116
-  data.tar.gz: 2ec93abb28903a954e47987d2ebd086cd4c9c2987cdb1483e57a3b14336e50bc4a4e41b355a7862ebd148471e38aa6f5caa22bc347108a00fcb4d4b5737b77e7
+  metadata.gz: 41e962d3bf4b328f49d6c367f2a8f9e72f2110f8d18e81121fc04c0a00e819b5732aeefa1e54c0c0f57aaec0f57249bdb9f3647ab850e52d598bfecefce52219
+  data.tar.gz: e158a6ddf7c2e8d7d1d35b104addf991a53676bc890d731f8990f38312443c0bd1e8e027ecdc74ca24d711b828af74944b0879fdfefe424139a6bc6b695ec36d

data/app/assets/javascripts/polaris_view_components/index.js

@@ -13,8 +13,10 @@ import Scrollable from './scrollable_controller'
 import Select from './select_controller'
 import TextField from './text_field_controller'
 import Toast from './toast_controller'
+import Tooltip from './tooltip_controller'
 
-export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField }
+
+export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField, Tooltip }
 
 export function registerPolarisControllers(application) {
   application.register('polaris-autocomplete', Autocomplete)
@@ -32,4 +34,5 @@ export function registerPolarisControllers(application) {
   application.register('polaris-select', Select)
   application.register('polaris-text-field', TextField)
   application.register('polaris-toast', Toast)
+  application.register('polaris-tooltip', Tooltip)
 }

data/app/assets/javascripts/polaris_view_components/tooltip_controller.js

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus";
+import { createPopper } from "@popperjs/core/dist/esm";
+
+export default class extends Controller {
+  static targets = ["template"];
+  static values = { active: Boolean, position: String }
+
+  initialize() {
+    this.shownTooltip = null;
+  }
+
+  getOffset() {
+    switch (this.positionValue) {
+      case "top", "bottom":
+        return [0, 8]
+      case "left", "right":
+        return [0, 6]
+      default:
+        return [0, 8]
+    }
+  }
+
+  show(event) {
+    if (!this.activeValue) return;
+
+    const popperOptions = {
+      placement: this.positionValue,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: this.getOffset(),
+          },
+        }
+      ],
+    };
+
+    const element = event.currentTarget;
+
+    let tooltip = document.createElement("span");
+    tooltip.className = "Polaris-Tooltip"
+    tooltip.innerHTML = this.templateTarget.innerHTML;
+
+    this.shownTooltip = element.appendChild(tooltip);
+
+    this.popper = createPopper(element, this.shownTooltip, popperOptions);
+  }
+
+  hide() {
+    if (this.shownTooltip) {
+      this.shownTooltip.remove();
+    }
+  }
+}

data/app/assets/javascripts/polaris_view_components.js

@@ -2299,8 +2299,8 @@ function popperGenerator(generatorOptions) {
       }
     }));
     function runModifierEffects() {
-      state.orderedModifiers.forEach((function(_ref3) {
-        var name = _ref3.name, _ref3$options = _ref3.options, options = _ref3$options === void 0 ? {} : _ref3$options, effect = _ref3.effect;
+      state.orderedModifiers.forEach((function(_ref) {
+        var name = _ref.name, _ref$options = _ref.options, options = _ref$options === void 0 ? {} : _ref$options, effect = _ref.effect;
         if (typeof effect === "function") {
           var cleanupFn = effect({
             state: state,
@@ -2616,6 +2616,52 @@ class Toast extends Controller {
   }
 }
 
+class Tooltip extends Controller {
+  static targets=[ "template" ];
+  static values={
+    active: Boolean,
+    position: String
+  };
+  initialize() {
+    this.shownTooltip = null;
+  }
+  getOffset() {
+    switch (this.positionValue) {
+     case "bottom":
+      return [ 0, 8 ];
+
+     case "right":
+      return [ 0, 6 ];
+
+     default:
+      return [ 0, 8 ];
+    }
+  }
+  show(event) {
+    if (!this.activeValue) return;
+    const popperOptions = {
+      placement: this.positionValue,
+      modifiers: [ {
+        name: "offset",
+        options: {
+          offset: this.getOffset()
+        }
+      } ]
+    };
+    const element = event.currentTarget;
+    let tooltip = document.createElement("span");
+    tooltip.className = "Polaris-Tooltip";
+    tooltip.innerHTML = this.templateTarget.innerHTML;
+    this.shownTooltip = element.appendChild(tooltip);
+    this.popper = createPopper(element, this.shownTooltip, popperOptions);
+  }
+  hide() {
+    if (this.shownTooltip) {
+      this.shownTooltip.remove();
+    }
+  }
+}
+
 function registerPolarisControllers(application) {
   application.register("polaris-autocomplete", Autocomplete);
   application.register("polaris-button", Button);
@@ -2632,6 +2678,7 @@ function registerPolarisControllers(application) {
   application.register("polaris-select", Select);
   application.register("polaris-text-field", TextField);
   application.register("polaris-toast", Toast);
+  application.register("polaris-tooltip", Tooltip);
 }
 
-export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField, registerPolarisControllers };
+export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField, Tooltip, registerPolarisControllers };

data/app/assets/stylesheets/polaris_view_components/custom.pcss

@@ -251,3 +251,50 @@ a.Polaris-Tag__Button {
     align-items: center;
   }
 }
+
+/* Tooltip */
+
+.Polaris-Tooltip {
+  position: relative;
+  opacity: 1;
+  box-shadow: var(--p-shadow-lg);
+  border-radius: var(--p-border-radius-2);
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: opacity, left, top;
+  transition: opacity 200ms cubic-bezier(0.36, 0, 1, 1) 100ms;
+}
+.Polaris-Tooltip-TooltipOverlay__Content {
+  border-radius: var(--p-border-radius-2);
+  padding: var(--p-space-1) var(--p-space-2);
+}
+
+.Polaris-Tooltip-Arrow,.Polaris-Tooltip-Arrow::before {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  z-index: -1;
+}
+
+.Polaris-Tooltip-Arrow::before {
+  content: '';
+  transform: rotate(45deg);
+  background-color: var(--p-surface);
+}
+
+.Polaris-Tooltip[data-popper-placement^='top'] > .Polaris-Tooltip-Arrow {
+  bottom: -4px;
+}
+
+.Polaris-Tooltip[data-popper-placement^='bottom'] > .Polaris-Tooltip-Arrow {
+  top: -4px;
+}
+
+.Polaris-Tooltip[data-popper-placement^='left'] > .Polaris-Tooltip-Arrow {
+  right: -4px;
+}
+
+.Polaris-Tooltip[data-popper-placement^='right'] > .Polaris-Tooltip-Arrow {
+  left: -4px;
+}

data/app/assets/stylesheets/polaris_view_components.css

@@ -2810,3 +2810,42 @@ a.Polaris-Tag__Button {
     align-items: center;
   }
 }
+/* Tooltip */
+.Polaris-Tooltip {
+  position: relative;
+  opacity: 1;
+  box-shadow: var(--p-shadow-lg);
+  border-radius: var(--p-border-radius-2);
+  pointer-events: none;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: opacity, left, top;
+  transition: opacity 200ms cubic-bezier(0.36, 0, 1, 1) 100ms;
+}
+.Polaris-Tooltip-TooltipOverlay__Content {
+  border-radius: var(--p-border-radius-2);
+  padding: var(--p-space-1) var(--p-space-2);
+}
+.Polaris-Tooltip-Arrow,.Polaris-Tooltip-Arrow::before {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  z-index: -1;
+}
+.Polaris-Tooltip-Arrow::before {
+  content: '';
+  transform: rotate(45deg);
+  background-color: var(--p-surface);
+}
+.Polaris-Tooltip[data-popper-placement^='top'] > .Polaris-Tooltip-Arrow {
+  bottom: -4px;
+}
+.Polaris-Tooltip[data-popper-placement^='bottom'] > .Polaris-Tooltip-Arrow {
+  top: -4px;
+}
+.Polaris-Tooltip[data-popper-placement^='left'] > .Polaris-Tooltip-Arrow {
+  right: -4px;
+}
+.Polaris-Tooltip[data-popper-placement^='right'] > .Polaris-Tooltip-Arrow {
+  left: -4px;
+}

data/app/components/polaris/tooltip_component.html.erb

@@ -0,0 +1,9 @@
+<%= render(Polaris::BaseComponent.new(tag: "span", **@system_arguments)) do %>
+  <%= content %>
+  <template data-polaris-tooltip-target="template">
+    <div class="Polaris-Tooltip-TooltipOverlay__Content Polaris-Tooltip-TooltipOverlay--default">
+      <%= @text %>
+    </div>
+    <div class="Polaris-Tooltip-Arrow" data-popper-arrow="true"></div>
+  </template>
+<% end %>

data/app/components/polaris/tooltip_component.rb

@@ -0,0 +1,28 @@
+module Polaris
+  class TooltipComponent < Polaris::Component
+    POSITION_OPTIONS = [:top, :bottom, :left, :right]
+    DEFAULT_POSITION = :bottom
+
+    def initialize(
+      text: nil,
+      position: DEFAULT_POSITION,
+      active: true,
+      **system_arguments
+    )
+      @text = text
+      @system_arguments = system_arguments
+      @position = fetch_or_fallback(POSITION_OPTIONS, position, DEFAULT_POSITION)
+      @active = active
+
+      system_arguments[:data] ||= {}
+      prepend_option(system_arguments[:data], :polaris_tooltip_active_value, @active)
+      prepend_option(system_arguments[:data], :polaris_tooltip_position_value, @position)
+      prepend_option(
+        system_arguments[:data],
+        :action,
+        "mouseenter->polaris-tooltip#show mouseleave->polaris-tooltip#hide"
+      )
+      prepend_option(system_arguments[:data], :controller, "polaris-tooltip")
+    end
+  end
+end

data/app/helpers/polaris/view_helper.rb

@@ -80,6 +80,7 @@ module Polaris
       text_style:               "Polaris::TextStyleComponent",
       thumbnail:                "Polaris::ThumbnailComponent",
       toast:                    "Polaris::ToastComponent",
+      tooltip:                  "Polaris::TooltipComponent",
       vertical_stack:           "Polaris::VerticalStackComponent",
       visually_hidden:          "Polaris::VisuallyHiddenComponent"
     }.freeze

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "1.0.1"
+    VERSION = "1.1.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.1.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-28 00:00:00.000000000 Z
+date: 2023-07-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -647,6 +647,7 @@ files:
 - app/assets/javascripts/polaris_view_components/select_controller.js
 - app/assets/javascripts/polaris_view_components/text_field_controller.js
 - app/assets/javascripts/polaris_view_components/toast_controller.js
+- app/assets/javascripts/polaris_view_components/tooltip_controller.js
 - app/assets/javascripts/polaris_view_components/utils/index.js
 - app/assets/javascripts/polaris_view_components/utils/use-transition.js
 - app/assets/stylesheets/polaris_view_components.css
@@ -845,6 +846,8 @@ files:
 - app/components/polaris/tokens/color.rb
 - app/components/polaris/tokens/shadow.rb
 - app/components/polaris/tokens/spacing.rb
+- app/components/polaris/tooltip_component.html.erb
+- app/components/polaris/tooltip_component.rb
 - app/components/polaris/top_bar/user_menu_component.html.erb
 - app/components/polaris/top_bar/user_menu_component.rb
 - app/components/polaris/vertical_stack_component.rb