Merge pull request #5439 from solidusio/elia/admin/tooltips

Admin tooltip improvements

admin/app/components/solidus_admin/products/show/component.html.erb

@@ -118,10 +118,7 @@
  checked: f.object.promotionable
  ) %>
  <span class="body-text-sm"><%= Spree::Product.human_attribute_name :promotionable %></span>
- <%= render component("ui/toggletip").new(
- text: t(".hints.promotionable_html"),
- position: :left
- ) %>
+ <%= render component("ui/toggletip").new(text: t(".hints.promotionable_html")) %>
  </label>
  <% end %>
 

admin/app/components/solidus_admin/ui/panel/component.html.erb

@@ -18,7 +18,7 @@
  <% if @title %>
  <h2 class="mt-0 px-6 w-full">
  <span class="body-title"><%= @title %></span>
- <%= render component('ui/toggletip').new(text: @title_hint, position: :left) if @title_hint %>
+ <%= render component('ui/toggletip').new(text: @title_hint) if @title_hint %>
  </h2>
  <% end %>
 

admin/app/components/solidus_admin/ui/toggletip/component.html.erb

@@ -19,20 +19,21 @@
  "
  aria-label="<%= t('.get_help') %>"
  >
- <%= icon_tag("question-fill", class: "w-[1rem] h-[1rem] #{icon_theme_classes}") %>
+ <%= icon_tag("question-fill", class: "w-[1rem] h-[1rem] fill-gray-800") %>
  </summary>
 
  <div
  class="
  absolute
  inline-block
- w-[9rem]
+ w-48
  px-[0.75rem]
  body-tiny-bold
  rounded
  z-10
- <%= bubble_position_classes %>
- <%= bubble_theme_classes %>
+ text-white
+ bg-gray-800
+ <%= POSITIONS.fetch(@position)[:bubble] %>
  "
  data-<%= stimulus_id %>-target="bubble"
  >
@@ -43,7 +44,13 @@
  block
  bg-inherit
  py-[0.5rem]
- <%= bubble_arrow_pseudo_element %>
+ before:content['']
+ before:absolute
+ before:w-[0.375rem]
+ before:h-[0.375rem]
+ before:rotate-45
+ before:bg-inherit
+ <%= POSITIONS.fetch(@position)[:arrow] %>
  "
  data-<%= stimulus_id %>-target="content"
  >

admin/app/components/solidus_admin/ui/toggletip/component.rb

@@ -1,98 +1,21 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Toggletip::Component < SolidusAdmin::BaseComponent
- # Icon size: 1rem
- # Arrow size: 0.375rem
- # Banner padding x: 0.75rem
  POSITIONS = {
- up: {
- arrow: %w[before:top-0 before:left-1/2 before:translate-y-[-50%] before:translate-x-[-50%]],
- bubble: %w[translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(0.375rem/2)]]
+ below: {
+ arrow: "before:top-0 before:left-1/2 before:translate-y-[-50%] before:translate-x-[-50%]",
+ bubble: "translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(0.375rem/2)]"
  },
- up_right: {
- arrow: %w[before:top-0 before:right-0 before:translate-y-[-50%]],
- bubble: %w[translate-x-[calc(-100%+0.75rem+(1rem/2)+(0.375rem/2))] translate-y-[calc(0.375rem/2)]]
+ above: {
+ arrow: "before:bottom-0 before:left-1/2 before:translate-y-[50%] before:translate-x-[-50%]",
+ bubble: "translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]"
  },
- right: {
- arrow: %w[before:top-1/2 before:right-0 before:translate-y-[-50%] before:translate-x-[0.93rem]],
- bubble: %w[translate-x-[calc(-100%+(-0.375rem/2))] translate-y-[calc(-50%-(1rem/2))]]
- },
- down_right: {
- arrow: %w[before:bottom-0 before:right-0 before:translate-y-[50%]],
- bubble: %w[translate-x-[calc(-100%+0.75rem+(1rem/2)+(0.376rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]]
- },
- down: {
- arrow: %w[before:bottom-0 before:left-1/2 before:translate-y-[50%] before:translate-x-[-50%]],
- bubble: %w[translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]]
- },
- down_left: {
- arrow: %w[before:bottom-0 before:left-0 before:translate-y-[50%]],
- bubble: %w[translate-x-[calc(-1rem/2)] translate-y-[calc(-100%-0.75rem-0.375rem)]]
- },
- left: {
- arrow: %w[before:top-1/2 before:left-0 before:translate-y-[-50%] before:translate-x-[-0.93rem]],
- bubble: %w[translate-x-[calc(1rem+(0.375rem/2))] translate-y-[calc(-50%-(1rem/2))]]
- },
- up_left: {
- arrow: %w[before:top-0 before:left-0 before:translate-y-[-50%]],
- bubble: %w[translate-x-[calc(-0.75rem+0.375rem)] translate-y-[calc(0.375rem/2)]]
- },
- none: {
- arrow: %w[before:hidden],
- bubble: %w[translate-x-[calc(-50%+0.75rem)]]
- }
- }.freeze
-
- THEMES = {
- light: {
- icon: %w[fill-gray-500],
- bubble: %w[text-gray-800 bg-gray-50]
- },
- dark: {
- icon: %w[fill-gray-800],
- bubble: %w[text-white bg-gray-800]
- }
  }.freeze
 
- # @param text [String] The toggletip text
- # @param position [Symbol] The position of the arrow in relation to the
- # toggletip. The latter will be positioned accordingly in relation to the
- # help icon. Defaults to `:up`. See `POSITIONS` for available options.
- # @param theme [Symbol] The theme of the toggletip. Defaults to `:light`. See
- # `THEMES` for available options.
- def initialize(text:, position: :down, theme: :light, **attributes)
+ def initialize(text:, position: :above, **attributes)
  @text = text
  @position = position
- @theme = theme
  @attributes = attributes
- @attributes[:class] = [
- "relative inline-block",
- @attributes[:class],
- ].join(" ")
- end
-
- def icon_theme_classes
- THEMES.fetch(@theme)[:icon].join(" ")
- end
-
- def bubble_theme_classes
- THEMES.fetch(@theme)[:bubble].join(" ")
- end
-
- def bubble_position_classes
- POSITIONS.fetch(@position)[:bubble].join(" ")
- end
-
- def bubble_arrow_pseudo_element
- (
- [
- "before:content['']",
- "before:absolute",
- "before:w-[0.375rem]",
- "before:h-[0.375rem]",
- "before:rotate-45",
- "before:bg-inherit",
- ] + POSITIONS.fetch(@position)[:arrow]
- ).join(" ")
+ @attributes[:class] = "relative inline-block #{@attributes[:class]}"
  end
 end

admin/spec/components/previews/solidus_admin/ui/toggletip/component_preview.rb

@@ -2,31 +2,21 @@
 
 # @component "ui/toggletip"
 class SolidusAdmin::UI::Toggletip::ComponentPreview < ViewComponent::Preview
- DUMMY_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-
  include SolidusAdmin::Preview
 
  def overview
- render_with_template(
- locals: {
- text: DUMMY_TEXT,
- positions: current_component::POSITIONS.keys,
- themes: current_component::THEMES.keys
- }
- )
+ render_with_template
  end
 
  # @param text text
  # @param position select :position_options
- # @param theme select :theme_options
  # @param open toggle
- def playground(text: DUMMY_TEXT, position: :down, theme: :light, open: false)
+ def playground(text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", position: :above, open: false)
  render current_component.new(
  text: text,
  position: position,
- theme: theme,
  open: open,
- class: "m-80"
+ class: "m-40"
  )
  end
 
@@ -35,8 +25,4 @@ def playground(text: DUMMY_TEXT, position: :down, theme: :light, open: false)
  def position_options
  current_component::POSITIONS.keys
  end
-
- def theme_options
- current_component::THEMES.keys
- end
 end

admin/spec/components/previews/solidus_admin/ui/toggletip/component_preview/overview.html.erb

@@ -1,21 +1,14 @@
-<table class="w-full">
- <legend class="body-title text-center">Click us</legend>
- <tr>
- <th class="w-[10%]"></th>
- <% themes.each do |theme| %>
- <th class="px-3 py-1 text-gray-500 text-center"><%= theme.to_s.humanize %></th>
- <% end %>
- </tr>
- <% positions.each do |position| %>
- <tr>
- <td class="font-bold px-3 py-1"><%= position.to_s.humanize %></td>
- <% themes.each do |theme| %>
- <td class="py-3">
- <div class="flex justify-center">
- <%= render current_component.new(text: text, theme: theme, position: position) %>
- </div>
- </td>
- <% end %>
- </tr>
- <% end %>
-</table>
+<% current_component::POSITIONS.keys.each do |position| %>
+ <div class="mb-8">
+ <h6 class="text-gray-500 mb-3 mt-0">
+ <%= position.to_s.humanize %>
+ </h6>
+
+ <div class="ml-80">
+ <%= render current_component.new(
+ text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+ position: position
+ ) %>
+ </div>
+ </div>
+<% end %>