Group hover Global Prop

powerhome · Oct 21, 2024 · 1e03427 · 1e03427
1 parent f9a7d22
commit 1e03427
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 50 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb b/playbook/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb
@@ -1,18 +1,32 @@
-<%= pb_rails("avatar", props: {
-    name: "Terry Johnson",
-    size: "xxs",
-    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    status: "away"
-  }) %>
+<%= pb_rails("flex", props: { group_hover: true }) do %>
+
+  <% 3.times do %>
+    <%= pb_rails("avatar", props: {
+      name: "Terry Johnson",
+      size: "xxs",
+      image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+      status: "away",
+    }) %>
+  <% end %>
 
+  <%= pb_rails("avatar", props: {
+      name: "Terry Johnson",
+      size: "xxs",
+      image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+      status: "away",
+      hover: {scale: "md"},
+    }) %>
+
+<% end %>
 <br>
 
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "xs",
     image_alt: "Terry Johnson Standing",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
-    status: "online"
+    status: "online",
+    hover: {scale: "lg"},
   }) %>
 
 <br>

diff --git a/playbook/app/pb_kits/playbook/utilities/_hover.scss b/playbook/app/pb_kits/playbook/utilities/_hover.scss
@@ -1,51 +1,54 @@
 @import "../tokens/exports/scale.module";
 
 @mixin hover-color-classes($colors-list) {
-    @each $name, $color in $colors-list {
-      .hover_background_#{"" + $name}:hover {
-        background-color: $color !important;
-        transition: background-color $transition-speed ease;
-      }
-      .hover_color_#{"" + $name}:hover {
-        color: $color !important;
-        transition: color $transition-speed ease;
-      }
+  @each $name, $color in $colors-list {
+    .hover_background_#{"" + $name}:hover,
+    .group_hover:hover .hover_background_#{"" + $name} {
+      background-color: $color !important;
+      transition: background-color $transition-speed ease;
+    }
+    .hover_color_#{"" + $name}:hover,
+    .group_hover:hover .hover_color_#{"" + $name} {
+      color: $color !important;
+      transition: color $transition-speed ease;
     }
   }
-
-  @mixin hover-shadow-classes($shadows-list) {
-    @each $name, $shadow in $shadows-list {
-      .hover_#{"" + $name}:hover {
-        box-shadow: $shadow;
-        transition: box-shadow $transition-speed ease;
-      }
+}
+
+@mixin hover-shadow-classes($shadows-list) {
+  @each $name, $shadow in $shadows-list {
+    .hover_#{"" + $name}:hover,
+    .group_hover:hover .hover_#{"" + $name} {
+      box-shadow: $shadow;
+      transition: box-shadow $transition-speed ease;
     }
   }
-
-  @mixin hover-scale-classes($scales-list) {
-    @each $name, $scale in $scales-list {
-      .hover_#{"" + $name}:hover {
-        transform: $scale;
-        transition: transform $transition-speed ease;
-      }
+}
+
+@mixin hover-scale-classes($scales-list) {
+  @each $name, $scale in $scales-list {
+    .hover_#{"" + $name}:hover,
+    .group_hover:hover .hover_#{"" + $name} {
+      transform: $scale;
+      transition: transform $transition-speed ease;
     }
   }
-  
-  
-  @include hover-scale-classes($scales);
-  @include hover-shadow-classes($box_shadows);
-  @include hover-color-classes($product_colors);
-  @include hover-color-classes($status_colors);
-  @include hover-color-classes($data_colors);
-  @include hover-color-classes($shadow_colors);
-  @include hover-color-classes($colors);
-  @include hover-color-classes($interface_colors);
-  @include hover-color-classes($main_colors);
-  @include hover-color-classes($background_colors);
-  @include hover-color-classes($card_colors);
-  @include hover-color-classes($active_colors);
-  @include hover-color-classes($action_colors);
-  @include hover-color-classes($hover_colors);
-  @include hover-color-classes($border_colors);
-  @include hover-color-classes($text_colors);
-  @include hover-color-classes($category_colors);
+}
+
+@include hover-scale-classes($scales);
+@include hover-shadow-classes($box_shadows);
+@include hover-color-classes($product_colors);
+@include hover-color-classes($status_colors);
+@include hover-color-classes($data_colors);
+@include hover-color-classes($shadow_colors);
+@include hover-color-classes($colors);
+@include hover-color-classes($interface_colors);
+@include hover-color-classes($main_colors);
+@include hover-color-classes($background_colors);
+@include hover-color-classes($card_colors);
+@include hover-color-classes($active_colors);
+@include hover-color-classes($action_colors);
+@include hover-color-classes($hover_colors);
+@include hover-color-classes($border_colors);
+@include hover-color-classes($text_colors);
+@include hover-color-classes($category_colors);
diff --git a/playbook/lib/playbook/hover.rb b/playbook/lib/playbook/hover.rb
@@ -4,6 +4,7 @@ module Playbook
   module Hover
     def self.included(base)
       base.prop :hover
+      base.prop :group_hover, type: Playbook::Props::Boolean, default: false
     end
 
     def hover_options
@@ -38,7 +39,8 @@ def hover_attributes
 
     def hover_props
       selected_props = hover_options.keys.select { |sk| try(sk) }
-      return nil unless selected_props.present?
+
+      return nil if selected_props.nil? && group_hover.nil?
 
       responsive = selected_props.present? && try(selected_props.first).is_a?(::Hash)
       css = ""
@@ -58,6 +60,7 @@ def hover_props
         end
       end
 
+      css += "group_hover " if group_hover
       css.strip unless css.blank?
     end
   end