[PLAY-1604] Global Hover Visibility Prop (#3905)

**What does this PR do?** - Create a `visibility` hover prop (like background, shadow, and scale) that hides the component unless it or the group component is hovered over - Use opacity of 0 for hidden state and animate to 1 when hovered over - Add to Hover doc - Refactor Group Hover doc to use background and visibility **Screenshots:** Screenshots to visualize your addition/change <img width="1188" alt="Screenshot 2024-11-13 at 2 45 09 PM" src="https://github.com/user-attachments/assets/c38af90f-b017-4199-8493-0f39a2fd8344"> <img width="1163" alt="Screenshot 2024-11-13 at 2 45 17 PM" src="https://github.com/user-attachments/assets/06e6c430-6369-4c5e-97a2-8cd3dd7248b0"> **How to test?** Steps to confirm the desired behavior: 1. Review /visual_guidelines/hover 2. Review /visual_guidelines/group_hover 3. Make sure the Card kit's background works as normal #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review.
powerhome · Nov 15, 2024 · a5ce686 · a5ce686
1 parent caf81f4
commit a5ce686
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 42 deletions.
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/GroupHover.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/GroupHover.tsx
@@ -1,17 +1,19 @@
 /* eslint-disable flowtype/no-types-missing-file-annotation */
 
-import React from 'react'
-
 import {
   Card,
   Title,
+  User,
+  Flex,
+  Avatar,
+  Icon,
 } from 'playbook-ui'
 
 import Example from '../Templates/Example'
 
 const GroupHoverDescription = () => (
   <>
-    You can hover over a kit and its children's hover affects will be applied. Check out <a href="https://playbook.powerapp.cloud/visual_guidelines/hover">{"our hover affects here."}</a>
+    You can hover over a kit and its children's hover effects will be applied. Check out <a href="https://playbook.powerapp.cloud/visual_guidelines/hover">{"our hover effects here."}</a>
   </>
 )
 
@@ -23,25 +25,48 @@ const GroupHover = ({ example }: {example: string}) => (
       title="Group Hover"
   >
     <Card 
-      cursor="pointer"
-      groupHover
+        background="neutral_subtle"
+        cursor="pointer"
+        groupHover
+        hover={{ background: "info_subtle" }}
+        padding="sm"
     >
-      <Title
-          alignSelf="center"
-          groupHover 
-          hover={{ scale: "lg"}}
-          text="If the card is hovered, I'm hovered too!"
-      />
-      <Title
-          alignSelf="center"
-          paddingY="lg"
-          text="I don't have any hover effect on me"
-      />
-      <Title
-          alignSelf="center"
-          hover={{ scale: "lg"}}
-          text="I need to be hovered over directly"
-      />
+      <Flex align="center" justify="between">
+        <Flex align="center">
+          {/* Individual hover effects show when hovered over directly */}
+          <Avatar
+              hover={{ scale: "lg" }}
+              imageAlt="Anna Black"
+              imageUrl="https://randomuser.me/api/portraits/women/44.jpg"
+              marginRight="xs"
+              name="Anna Black"
+              size="md"
+          />
+          <User
+              align="center"
+              name="Anna Black"
+              orientation="horizontal"
+              size="md"
+              title="Remodeling Consultant"
+          />
+        </Flex>
+
+        {/* Group hover effects show when the outside card is hovered over */}
+        <Card
+            background="product_4_highlight"
+            borderRadius="rounded"
+            borderNone
+            hover={{ visibility: true }}
+            padding="xs"
+            groupHover
+        >
+          <Flex align="center">
+            <Title dark size={4} marginRight="xs">Promote</Title>
+            <Icon icon="trophy" color="text_dk_default" fixedWidth />
+            <Icon icon="chevron-right" color="text_dk_default" fixedWidth />
+          </Flex>
+        </Card>
+      </Flex>
     </Card>
   </Example>
 )

diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/Hover.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/Hover.tsx
@@ -18,6 +18,7 @@ import Example from '../Templates/Example'
 
 const shadowArr = ['deep', 'deeper', 'deepest']
 const scaleObj = { 'sm': '@1.05', 'md': '@1.10', 'lg': '@1.15' }
+const visibilityArr = ['true', 'false']
 
 const Hover = ({ example }: { example: string }) => (
   <React.Fragment>
@@ -183,6 +184,27 @@ const Hover = ({ example }: { example: string }) => (
                 })}
               </td>
             </tr>
+            <tr>
+              <td>
+                <Pill
+                  text="visibility"
+                  textTransform="none"
+                  variant="warning"
+                />
+              </td>
+              <td>
+                {visibilityArr.map((value) => {
+                  return (
+                    <Pill
+                      key={value}
+                      text={value}
+                      textTransform="none"
+                      variant="warning"
+                    />
+                  )
+                })}
+              </td>
+            </tr>
           </tbody>
         </Table>
       </Flex>

diff --git a/playbook-website/app/views/pages/code_snippets/group_hover_jsx.txt b/playbook-website/app/views/pages/code_snippets/group_hover_jsx.txt
@@ -1,21 +1,44 @@
 <Card 
-  cursor="pointer"
-  groupHover
+    background="neutral_subtle"
+    cursor="pointer"
+    groupHover
+    hover={{ background: "info_subtle" }}
+    padding="sm"
 >
-  <Title
-      alignSelf="center"
-      groupHover 
-      hover={{ scale: "lg"}}
-      text="If the card is hovered, I'm hovered too!"
-  />
-  <Title
-      alignSelf="center"
-      paddingY="lg"
-      text="I don't have any hover effect on me"
-  />
-  <Title
-      alignSelf="center"
-      hover={{ scale: "lg"}}
-      text="I need to be hovered over directly"
-  />
-</Card>
+  <Flex align="center" justify="between">
+    <Flex align="center">
+      {/* Individual hover effects show when hovered over directly */}
+      <Avatar
+          hover={{ scale: "lg" }}
+          imageAlt="Anna Black"
+          imageUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          marginRight="xs"
+          name="Anna Black"
+          size="md"
+      />
+      <User
+          align="center"
+          name="Anna Black"
+          orientation="horizontal"
+          size="md"
+          title="Remodeling Consultant"
+      />
+    </Flex>
+
+    {/* Group hover effects show when the outside card is hovered over */}
+    <Card
+        background="product_4_highlight"
+        borderRadius="rounded"
+        borderNone
+        hover={{ visibility: true }}
+        padding="xs"
+        groupHover
+    >
+      <Flex align="center">
+        <Title dark size={4} marginRight="xs">Promote</Title>
+        <Icon icon="trophy" color="text_dk_default" fixedWidth />
+        <Icon icon="chevron-right" color="text_dk_default" fixedWidth />
+      </Flex>
+    </Card>
+  </Flex>
+</Card>
diff --git a/playbook-website/app/views/pages/code_snippets/hover_jsx.txt b/playbook-website/app/views/pages/code_snippets/hover_jsx.txt
@@ -7,7 +7,7 @@
 <Button
   hover={{ scale: "lg" }}
   onClick={() => alert("button clicked!")}
-  text='Shadow Deep'
+  text='Large Scale'
 />
 
 <Message
@@ -16,6 +16,11 @@
     message='How can we assist you today?'
 />
 
+<Title
+    hover={{ visibility: true }}
+    text="Surprise!"
+/>
+
 <Body
     hover={{ color: "success" }}
     text='Hover to change color'

diff --git a/playbook/app/pb_kits/playbook/utilities/_hover.scss b/playbook/app/pb_kits/playbook/utilities/_hover.scss
@@ -50,3 +50,18 @@
   @include hover-color-classes($border_colors);
   @include hover-color-classes($text_colors);
   @include hover-color-classes($category_colors);
+
+.hover_visibility {
+  opacity: 0;
+  transition: opacity $transition-speed ease;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.group_hover:hover {
+  .group_hover.hover_visibility {
+    opacity: 1;
+  }
+}
diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
@@ -63,7 +63,8 @@ type FlexWrap = {
 type Hover = Shadow & {
   background?: string,
   color?: string,
-  scale?: "sm" | "md" | "lg"
+  scale?: "sm" | "md" | "lg",
+  visibility?: boolean,
 }
 
 type GroupHover  = {
@@ -233,6 +234,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       css += hover.background ? `hover_background-${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
       css += hover.color ? `hover_color-${hover.color } ` : '';
+      css += hover.visibility ? `hover_visibility` : '';
       return css;
   },