Merge pull request #1329 from vtex/feat/design-qa

Design QA
vtex · Dec 4, 2023 · 4b7c7a8 · 4b7c7a8
2 parents ab087e5 + 960095d
commit 4b7c7a8
Show file tree

Hide file tree

Showing 17 changed files with 4,128 additions and 11,802 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -64,6 +64,7 @@
     "@vtex/shoreline-icons": "^0.2.2",
     "@vtex/shoreline-utils": "^0.5.1",
     "react-hot-toast": "2.4.1",
-    "react-virtual": "^2.10.4"
+    "react-virtual": "^2.10.4",
+    "tiny-invariant": "1.3.1"
   }
 }
diff --git a/packages/components/src/button/button.css b/packages/components/src/button/button.css
@@ -90,7 +90,7 @@
       &:focus-visible {
         box-shadow: var(--sl-focus-ring);
         background: var(--sl-bg-muted-plain-hover);
-        color: var(--sl-fg-muted-hover)
+        color: var(--sl-fg-muted-hover);
       }
       &:disabled {
         background: var(--sl-bg-disabled);

diff --git a/packages/components/src/link/link.css b/packages/components/src/link/link.css
@@ -12,16 +12,24 @@
       border-radius: var(--sl-border-radius-small);
     }
 
-    &:visited {
-      color: var(--sl-fg-accent-pressed);
-    }
-
     &:hover {
       color: var(--sl-fg-accent-hover);
     }
 
     &:focus {
       color: var(--sl-fg-accent-hover);
     }
+
+    &:visited {
+      color: var(--sl-fg-accent-pressed);
+
+      &:hover {
+        color: var(--sl-fg-accent-pressed);
+      }
+
+      &:focus {
+        color: var(--sl-fg-accent-pressed);
+      }
+    }
   }
 }
diff --git a/packages/components/src/menu/menu-item.css b/packages/components/src/menu/menu-item.css
@@ -23,7 +23,7 @@
     }
 
     &:focus-visible {
-      box-shadow: var(--sl-focus-ring-accent);
+      box-shadow: var(--sl-focus-ring);
     }
 
     &[data-critical='true'] {

diff --git a/packages/components/src/menu/menu-separator.css b/packages/components/src/menu/menu-separator.css
@@ -4,7 +4,7 @@
     border-bottom: var(--sl-border);
     margin-left: calc(var(--sl-space-4) * -1);
     margin-right: calc(var(--sl-space-4) * -1);
-    margin-top: var(--sl-space-1);
-    margin-bottom: var(--sl-space-1);
+    margin-top: var(--sl-space-2);
+    margin-bottom: var(--sl-space-2);
   }
 }
diff --git a/packages/components/src/menu/menu-trigger.css b/packages/components/src/menu/menu-trigger.css
@@ -0,0 +1,23 @@
+@layer sl-components {
+  [data-sl-menu-trigger] {
+    &[data-variant='critical'][data-active='true'] {
+      background: var(--sl-bg-critical-strong-pressed);
+    }
+
+    &[data-variant='criticalTertiary'][data-active='true'] {
+      background: var(--sl-bg-critical-plain-pressed);
+    }
+
+    &[data-variant='primary'][data-active='true'] {
+      background: var(--sl-bg-accent-strong-pressed);
+    }
+
+    &[data-variant='secondary'][data-active='true'] {
+      background: var(--sl-bg-muted-pressed);
+    }
+
+    &[data-variant='tertiary'][data-active='true'] {
+      background: var(--sl-bg-muted-plain-pressed);
+    }
+  }
+}
diff --git a/packages/components/src/menu/menu-trigger.tsx b/packages/components/src/menu/menu-trigger.tsx
@@ -1,16 +1,26 @@
 import type { ComponentPropsWithoutRef } from 'react'
 import React, { forwardRef } from 'react'
-import { MenuButton } from '@ariakit/react'
+import { MenuButton, useMenuContext } from '@ariakit/react'
+import invariant from 'tiny-invariant'
+
+import './menu-trigger.css'
 
 export const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(
   function MenuTrigger(props, ref) {
     const { children, asChild = false, ...otherProps } = props
 
+    const store = useMenuContext()
+
+    invariant(store, 'You must use MenuTrigger under the MenuProvider context.')
+
+    const open = store.useState('open')
+
     return (
       <MenuButton
         ref={ref}
         data-sl-menu-trigger
         render={asChild && (children as any)}
+        data-active={open}
         {...otherProps}
       >
         {children}

diff --git a/packages/components/src/menu/menu.css b/packages/components/src/menu/menu.css
@@ -7,13 +7,13 @@
     border-radius: var(--sl-border-radius-medium);
     display: flex;
     flex-direction: column;
-    padding: var(--sl-space-2) var(--sl-space-4);
+    padding: var(--sl-space-3) var(--sl-space-4);
     z-index: var(--sl-z-10);
     box-shadow: var(--sl-shadow-2);
     min-width: 9.5rem;
 
     &:focus-visible {
-      box-shadow: var(--sl-focus-ring-accent);
+      box-shadow: var(--sl-focus-ring);
     }
   }
 }
diff --git a/packages/components/src/menu/stories/menu.stories.tsx b/packages/components/src/menu/stories/menu.stories.tsx
@@ -1,11 +1,11 @@
 import './style.css'
 import React from 'react'
 import {
-  IconCaretDown,
   IconDotsThreeVertical,
   IconPencil,
   IconTrash,
   IconArchive,
+  IconCaretDownSmall,
 } from '@vtex/shoreline-icons'
 
 import {
@@ -45,7 +45,7 @@ export function Composition() {
       <MenuProvider placement="bottom-end">
         <MenuTrigger asChild>
           <Button>
-            Open <IconCaretDown />
+            Open <IconCaretDownSmall />
           </Button>
         </MenuTrigger>
         <Menu asChild>
@@ -213,7 +213,7 @@ export function CustomLabel() {
       <MenuProvider>
         <MenuTrigger asChild>
           <Button variant="primary">
-            Create promotion <IconCaretDown />
+            Create promotion <IconCaretDownSmall />
           </Button>
         </MenuTrigger>
         <Menu>
@@ -226,7 +226,33 @@ export function CustomLabel() {
       <MenuProvider>
         <MenuTrigger asChild>
           <Button variant="tertiary">
-            Create promotion <IconCaretDown />
+            Create promotion <IconCaretDownSmall />
+          </Button>
+        </MenuTrigger>
+        <Menu>
+          <MenuItem>Regular</MenuItem>
+          <MenuItem>Buy together</MenuItem>
+          <MenuItem>More for less</MenuItem>
+          <MenuItem>Progressive discount</MenuItem>
+        </Menu>
+      </MenuProvider>
+      <MenuProvider>
+        <MenuTrigger asChild>
+          <Button size="large" variant="primary">
+            Create promotion <IconCaretDownSmall />
+          </Button>
+        </MenuTrigger>
+        <Menu>
+          <MenuItem>Regular</MenuItem>
+          <MenuItem>Buy together</MenuItem>
+          <MenuItem>More for less</MenuItem>
+          <MenuItem>Progressive discount</MenuItem>
+        </Menu>
+      </MenuProvider>
+      <MenuProvider>
+        <MenuTrigger asChild>
+          <Button variant="tertiary" size="large">
+            Create promotion <IconCaretDownSmall />
           </Button>
         </MenuTrigger>
         <Menu>
@@ -246,7 +272,7 @@ export function ItemVariants() {
       <MenuProvider>
         <MenuTrigger asChild>
           <Button variant="primary">
-            Create promotion <IconCaretDown />
+            Create promotion <IconCaretDownSmall />
           </Button>
         </MenuTrigger>
         <Menu>
@@ -259,7 +285,7 @@ export function ItemVariants() {
       <MenuProvider>
         <MenuTrigger asChild>
           <Button variant="tertiary">
-            Create promotion <IconCaretDown />
+            Create promotion <IconCaretDownSmall />
           </Button>
         </MenuTrigger>
         <Menu>

diff --git a/packages/components/src/text-input/text-input.css b/packages/components/src/text-input/text-input.css
@@ -18,6 +18,7 @@
     }
     &:focus-within {
       box-shadow: var(--sl-focus-ring);
+      border: var(--sl-border-strong-hover);
     }
 
     &[data-error='true'] {
@@ -28,6 +29,7 @@
       }
       &:focus-within {
         box-shadow: var(--sl-focus-ring-critical);
+        border: var(--sl-border-critical-strong-hover);
       }
     }
     &[data-disabled='true'] {

diff --git a/packages/components/src/toast/toast.css b/packages/components/src/toast/toast.css
@@ -4,15 +4,16 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
-    gap: var(--sl-space-2);
+    gap: var(--sl-space-0) var(--sl-space-3);
     color: var(--sl-fg);
     padding: var(--sl-space-4) var(--sl-space-5);
     width: 22.5rem;
-
     border-radius: var(--sl-border-radius-medium);
 
     & [data-sl-toast-icon-container] {
       flex-shrink: 0;
+      font: var(--sl-text-emphasis-font);
+      letter-spacing: var(--sl-text-emphasis-letter-spacing);
     }
 
     & [data-sl-toast-container] {
@@ -21,7 +22,7 @@
       flex-direction: column;
       align-items: flex-start;
       justify-content: flex-start;
-      gap: var(--sl-space-3);
+      gap: var(--sl-space-2);
     }
 
     & [data-sl-toast-actions] {

diff --git a/packages/components/src/toast/toast.tsx b/packages/components/src/toast/toast.tsx
@@ -48,7 +48,7 @@ export function Toast(props: ToastProps) {
 function renderChildren(children: ReactNode) {
   return Children.map(children, (child) => {
     if (typeof child === 'string') {
-      return <Text>{child}</Text>
+      return <Text variant="emphasis">{child}</Text>
     }
 
     if (isValidElement(child) && child.type === Action) {

diff --git a/packages/icons/src/caret-down/index.ts b/packages/icons/src/caret-down/index.ts
@@ -1 +1,3 @@
+/* PLOP_INJECT_EXPORT */
+export * from './caret-down-small'
 export * from './caret-down'
diff --git a/packages/icons/src/caret-left/index.ts b/packages/icons/src/caret-left/index.ts
@@ -1 +1,3 @@
+/* PLOP_INJECT_EXPORT */
+export * from './caret-left-small'
 export * from './caret-left'
diff --git a/packages/icons/src/caret-right/index.ts b/packages/icons/src/caret-right/index.ts
@@ -1 +1,3 @@
+/* PLOP_INJECT_EXPORT */
+export * from './caret-right-small'
 export * from './caret-right'
diff --git a/packages/icons/src/caret-up/index.ts b/packages/icons/src/caret-up/index.ts
@@ -1 +1,3 @@
+/* PLOP_INJECT_EXPORT */
+export * from './caret-up-small'
 export * from './caret-up'