wilday_ui 0.7.0 → 0.8.0

data/app/assets/stylesheets/wilday_ui/components/button/features/tooltip.css

@@ -0,0 +1,258 @@
+.w-tooltip {
+  position: absolute;
+  z-index: 1000;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-radius: 0.375rem;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
+  max-width: 20rem; /* 320px */
+  word-wrap: break-word;
+  white-space: normal;
+}
+
+/* Position and Alignment transforms */
+/* Bottom position */
+.w-tooltip[data-position="bottom"][data-align="start"] {
+  transform-origin: top left;
+  transform: scale(0.95); /* Reset transform */
+}
+
+.w-tooltip[data-position="bottom"][data-align="center"] {
+  transform-origin: top center;
+  transform: translateX(-50%) scale(0.95);
+}
+
+.w-tooltip[data-position="bottom"][data-align="end"] {
+  transform-origin: top right;
+  transform: translateX(-100%) scale(0.95);
+}
+
+/* Top position */
+.w-tooltip[data-position="top"][data-align="start"] {
+  transform-origin: bottom left;
+  transform: scale(0.95); /* Reset transform */
+}
+
+.w-tooltip[data-position="top"][data-align="center"] {
+  transform-origin: bottom center;
+  transform: translateX(-50%) scale(0.95);
+}
+
+.w-tooltip[data-position="top"][data-align="end"] {
+  transform-origin: bottom right;
+  transform: translateX(-100%) scale(0.95);
+}
+
+/* Left position */
+.w-tooltip[data-position="left"][data-align="start"] {
+  transform-origin: right top;
+  transform: scale(0.95); /* Reset transform */
+}
+
+.w-tooltip[data-position="left"][data-align="center"] {
+  transform-origin: right center;
+  transform: translateY(-50%) scale(0.95);
+}
+
+.w-tooltip[data-position="left"][data-align="end"] {
+  transform-origin: right bottom;
+  transform: translateY(-100%) scale(0.95);
+}
+
+/* Right position */
+.w-tooltip[data-position="right"][data-align="start"] {
+  transform-origin: left top;
+  transform: scale(0.95); /* Reset transform */
+}
+
+.w-tooltip[data-position="right"][data-align="center"] {
+  transform-origin: left center;
+  transform: translateY(-50%) scale(0.95);
+}
+
+.w-tooltip[data-position="right"][data-align="end"] {
+  transform-origin: left bottom;
+  transform: translateY(-100%) scale(0.95);
+}
+
+/* Visible state transforms */
+.w-tooltip-visible[data-position="bottom"][data-align="start"],
+.w-tooltip-visible[data-position="top"][data-align="start"],
+.w-tooltip-visible[data-position="left"][data-align="start"],
+.w-tooltip-visible[data-position="right"][data-align="start"] {
+  transform: scale(1);
+}
+
+.w-tooltip-visible[data-position="bottom"][data-align="center"],
+.w-tooltip-visible[data-position="top"][data-align="center"] {
+  transform: translateX(-50%) scale(1);
+}
+
+.w-tooltip-visible[data-position="bottom"][data-align="end"],
+.w-tooltip-visible[data-position="top"][data-align="end"] {
+  transform: translateX(-100%) scale(1);
+}
+
+.w-tooltip-visible[data-position="left"][data-align="center"],
+.w-tooltip-visible[data-position="right"][data-align="center"] {
+  transform: translateY(-50%) scale(1);
+}
+
+.w-tooltip-visible[data-position="left"][data-align="end"],
+.w-tooltip-visible[data-position="right"][data-align="end"] {
+  transform: translateY(-100%) scale(1);
+}
+
+.w-tooltip-visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Themes */
+.w-tooltip-light {
+  background-color: white;
+  color: #1f2937;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  border: 1px solid #e5e7eb;
+}
+
+.w-tooltip-dark {
+  background-color: #1f2937;
+  color: white;
+}
+
+.w-tooltip-transparent {
+  background-color: rgba(0, 0, 0, 0.75);
+  color: white;
+}
+
+/* Add size variants */
+.w-tooltip-size-sm {
+  max-width: 12rem; /* 192px */
+}
+
+.w-tooltip-size-md {
+  max-width: 20rem; /* 320px - default */
+}
+
+.w-tooltip-size-lg {
+  max-width: 24rem; /* 384px */
+}
+
+/* Arrow base styles */
+.w-tooltip-arrow {
+  --arrow-size: 8px;
+  padding: calc(
+    var(--arrow-size) + 4px
+  ) !important; /* Add padding to accommodate arrow */
+}
+
+.w-tooltip-arrow::before {
+  content: "";
+  position: absolute;
+  width: var(--arrow-size);
+  height: var(--arrow-size);
+  background: inherit;
+  border: 1px solid;
+  border-color: inherit;
+  transform: rotate(45deg);
+  z-index: -1;
+}
+
+/* Arrow positions */
+.w-tooltip-arrow[data-position="top"]::before {
+  bottom: calc(var(--arrow-size) / -2);
+  border-top: 0;
+  border-left: 0;
+}
+
+.w-tooltip-arrow[data-position="bottom"]::before {
+  top: calc(var(--arrow-size) / -2);
+  border-bottom: 0;
+  border-right: 0;
+}
+
+.w-tooltip-arrow[data-position="left"]::before {
+  right: calc(var(--arrow-size) / -2);
+  border-left: 0;
+  border-bottom: 0;
+}
+
+.w-tooltip-arrow[data-position="right"]::before {
+  left: calc(var(--arrow-size) / -2);
+  border-right: 0;
+  border-top: 0;
+}
+
+/* Arrow alignment */
+.w-tooltip-arrow[data-position="top"][data-align="start"]::before,
+.w-tooltip-arrow[data-position="bottom"][data-align="start"]::before {
+  left: var(--arrow-size);
+}
+
+.w-tooltip-arrow[data-position="top"][data-align="center"]::before,
+.w-tooltip-arrow[data-position="bottom"][data-align="center"]::before {
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.w-tooltip-arrow[data-position="top"][data-align="end"]::before,
+.w-tooltip-arrow[data-position="bottom"][data-align="end"]::before {
+  right: var(--arrow-size);
+  left: auto;
+}
+
+.w-tooltip-arrow[data-position="left"][data-align="start"]::before,
+.w-tooltip-arrow[data-position="right"][data-align="start"]::before {
+  top: var(--arrow-size);
+}
+
+.w-tooltip-arrow[data-position="left"][data-align="center"]::before,
+.w-tooltip-arrow[data-position="right"][data-align="center"]::before {
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.w-tooltip-arrow[data-position="left"][data-align="end"]::before,
+.w-tooltip-arrow[data-position="right"][data-align="end"]::before {
+  bottom: var(--arrow-size);
+  top: auto;
+}
+
+/* Theme-specific arrow styles */
+.w-tooltip-arrow.w-tooltip-light::before {
+  background-color: white;
+  border-color: #e5e7eb;
+}
+
+.w-tooltip-arrow.w-tooltip-dark::before {
+  background-color: #1f2937;
+  border-color: #1f2937;
+}
+
+.w-tooltip-arrow.w-tooltip-transparent::before {
+  background-color: rgba(0, 0, 0, 0.75);
+  border-color: transparent;
+}
+
+/* Add custom theme support */
+.w-tooltip-custom {
+  background-color: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+}
+
+.w-tooltip-arrow.w-tooltip-custom::before {
+  background-color: var(--tooltip-bg-color);
+  border-color: var(--tooltip-bg-color);
+}
+
+/* Optional: Add different max-widths for different screen sizes */
+@media (max-width: 640px) {
+  .w-tooltip {
+    max-width: 16rem; /* 256px */
+  }
+}

data/app/assets/stylesheets/wilday_ui/components/button/index.css

@@ -10,6 +10,7 @@
  *= require ./features/gradients
  *= require ./features/clipboard
  *= require ./features/confirmation
+ *= require ./features/tooltip
  *= require ../../tokens/colors
 */
 

data/app/helpers/wilday_ui/application_helper.rb

@@ -2,6 +2,5 @@ module WildayUi
   module ApplicationHelper
     include WildayUi::Components::ButtonHelper
     include WildayUi::JavascriptHelper
-    include WildayUi::ThemeHelper
   end
 end

data/app/helpers/wilday_ui/components/button_helper.rb

@@ -21,6 +21,14 @@ module WildayUi
           wrapper_required: true,
           stimulus_controller: "confirmation",
           default_stimulus_action: "click->confirmation#showDialog"
+        },
+        tooltip: {
+          wrapper_required: true,
+          stimulus_controller: "tooltip",
+          default_stimulus_action: {
+            hover: "mouseenter->tooltip#show mouseleave->tooltip#hide focusin->tooltip#show focusout->tooltip#hide",
+            click: "click->tooltip#toggle"
+          }
         }
         # Add more features here as needed
         # tooltip: {
@@ -54,6 +62,7 @@ module WildayUi
         theme: nil,
         copy_to_clipboard: nil,
         confirm: nil,
+        tooltip: nil,
         **options
       )
         content_for(:head) { stylesheet_link_tag "wilday_ui/components/button/index", media: "all" }
@@ -80,7 +89,7 @@ module WildayUi
         gradient_class = get_gradient_class(gradient)
 
         # Setup features that require Stimulus controllers
-        active_features = determine_active_features(loading, dropdown, loading_text, copy_to_clipboard, confirm, use_default_controller)
+        active_features = determine_active_features(loading, dropdown, loading_text, copy_to_clipboard, confirm, tooltip, use_default_controller)
 
         setup_features(active_features, options, use_default_controller, loading_text)
 
@@ -114,6 +123,15 @@ module WildayUi
           )
         end
 
+        if tooltip
+          setup_tooltip_options(
+            options,
+            additional_classes,
+            tooltip,
+            wrapper_data
+          )
+        end
+
         # Setup wrapper options if any feature requires it
         wrapper_options = setup_wrapper_options(
           active_features,
@@ -297,12 +315,13 @@ module WildayUi
         styles.map { |k, v| "#{k}: #{v}" }.join(";")
       end
 
-      def determine_active_features(loading, dropdown, loading_text = nil, copy_to_clipboard = nil, confirm = nil, use_default_controller = true)
+      def determine_active_features(loading, dropdown, loading_text = nil, copy_to_clipboard = nil, confirm = nil, tooltip = nil, use_default_controller = true)
         features = {}
         features[:loading] = true if (loading || loading_text.present?) && use_default_controller
         features[:dropdown] = true if dropdown && use_default_controller
         features[:copy_to_clipboard] = true if copy_to_clipboard.present? && use_default_controller
         features[:confirm] = true if confirm.present? && use_default_controller
+        features[:tooltip] = true if tooltip.present? && use_default_controller
         features
       end
 
@@ -507,6 +526,120 @@ module WildayUi
         end
       end
 
+      def setup_tooltip_options(options, additional_classes, tooltip, wrapper_data)
+        tooltip_config = normalize_tooltip_options(tooltip)
+
+        # Check if dropdown is present
+        has_dropdown = wrapper_data[:controller]&.include?("dropdown")
+        has_clipboard = wrapper_data[:controller]&.include?("clipboard")
+
+        # Get the appropriate action based on trigger type
+        # Force hover behavior if dropdown is present
+        trigger_type = (has_dropdown || has_clipboard) ? :hover : tooltip_config[:trigger].to_sym
+        tooltip_action = BUTTON_FEATURES[:tooltip][:default_stimulus_action][trigger_type]
+
+        # Merge controllers
+        existing_controller = wrapper_data[:controller]
+        wrapper_data[:controller] = [
+          existing_controller,
+          "tooltip"
+        ].compact.join(" ")
+
+        # Merge actions
+        existing_action = wrapper_data[:action]
+        if has_dropdown
+          # Keep the dropdown toggle action and add tooltip hover actions
+          wrapper_data[:action] = [
+            "click->dropdown#toggle",  # Ensure dropdown action comes first
+            tooltip_action
+          ].compact.join(" ")
+        elsif has_clipboard
+          # Keep the clipboard copy action and add tooltip hover actions
+          wrapper_data[:action] = [
+            "click->clipboard#copy click->button#toggleLoading",
+            tooltip_action
+          ].compact.join(" ")
+        else
+          wrapper_data[:action] = [
+            existing_action,
+            tooltip_action
+          ].compact.join(" ")
+        end
+
+        # Handle theme data
+        theme = tooltip_config[:theme]
+        theme_name = theme.is_a?(Hash) ? theme[:name] : theme
+
+        wrapper_data.merge!(
+          tooltip_content_value: tooltip_config[:content],
+          tooltip_position_value: tooltip_config[:position],
+          tooltip_align_value: tooltip_config[:align],
+          tooltip_trigger_value: trigger_type,
+          tooltip_show_delay_value: tooltip_config[:delay][:show],
+          tooltip_hide_delay_value: tooltip_config[:delay][:hide],
+          tooltip_offset_value: tooltip_config[:offset],
+          tooltip_theme_value: theme_name,
+          tooltip_size_value: tooltip_config[:size],
+          tooltip_arrow_value: tooltip_config[:arrow]
+        )
+
+        # Add custom theme styles if present
+        if theme.is_a?(Hash) && theme[:custom]
+          custom_styles = []
+          custom_styles << "--tooltip-text-color: #{theme[:custom][:color]}" if theme[:custom][:color]
+          custom_styles << "--tooltip-bg-color: #{theme[:custom][:background]}" if theme[:custom][:background]
+          wrapper_data[:tooltip_custom_style_value] = custom_styles.join(";")
+        end
+
+        options[:data][:tooltip_target] = "trigger"
+        options[:aria] ||= {}
+        options[:aria][:describedby] = "tooltip-#{SecureRandom.hex(4)}"
+      end
+
+      def normalize_tooltip_options(options)
+        if options.is_a?(String)
+          {
+            content: options,
+            position: "top",
+            align: "center",
+            trigger: "hover",
+            delay: { show: 0, hide: 0 },
+            offset: 8,
+            theme: "light",
+            size: "md",
+            arrow: false
+          }
+        else
+          theme = options[:theme]
+          theme_data = if theme.is_a?(Hash) && theme[:custom]
+            {
+              name: "custom",
+              custom: {
+                color: theme.dig(:custom, :color),
+                background: theme.dig(:custom, :background)
+              }
+            }
+          else
+            { name: theme || "light" }
+          end
+
+          {
+            content: options[:content],
+            position: options[:position] || "top",
+            align: options[:align] || "center",
+            trigger: options[:trigger] || "hover",
+            delay: {
+              show: options.dig(:delay, :show) || 0,
+              hide: options.dig(:delay, :hide) || 0
+            },
+            offset: options[:offset] || 8,
+            theme: theme_data,
+            size: options[:size] || "md",
+            arrow: options[:arrow] || false
+          }
+        end
+      end
+
       def render_button(content, variant_class, size_class, radius_class, gradient_class, icon, icon_position, icon_only,
                        loading, loading_text, additional_classes, disabled, options, href, underline,
                        dropdown, dropdown_items, dropdown_icon, wrapper_options)

data/app/javascript/wilday_ui/controllers/index.js

@@ -3,6 +3,7 @@ import ButtonController from "./button_controller";
 import DropdownController from "./dropdown_controller";
 import ClipboardController from "./clipboard_controller";
 import ConfirmationController from "./confirmation_controller";
+import TooltipController from "./tooltip_controller";
 // Initialize Stimulus
 const application = Application.start();
 window.Stimulus = application;
@@ -12,6 +13,7 @@ application.register("button", ButtonController);
 application.register("dropdown", DropdownController);
 application.register("clipboard", ClipboardController);
 application.register("confirmation", ConfirmationController);
+application.register("tooltip", TooltipController);
 // Debug check to ensure Stimulus is loaded
 // if (window.Stimulus) {
 //   console.log("✅ Stimulus is loaded and initialized.");