Merge branch 'refactor/tailwind-components' into next

cypress-io · Sep 18, 2024 · 703d5c4 · 703d5c4
2 parents f35db5a + 3236662
commit 703d5c4
Show file tree

Hide file tree

Showing 17 changed files with 530 additions and 39 deletions.
diff --git a/.changeset/major-update.md b/.changeset/major-update.md
@@ -0,0 +1,49 @@
+---
+'@cypress-design/component-tailwind-plugins': major
+'@cypress-design/constants-docmenu': major
+'@cypress-design/react-docmenu': major
+'@cypress-design/vue-docmenu': major
+'@cypress-design/css': major
+'@cypress-design/constants-accordion': major
+'@cypress-design/react-accordion': major
+'@cypress-design/vue-accordion': major
+'@cypress-design/constants-alert': major
+'@cypress-design/react-alert': major
+'@cypress-design/vue-alert': major
+'@cypress-design/constants-button': major
+'@cypress-design/react-button': major
+'@cypress-design/vue-button': major
+'@cypress-design/constants-checkbox': major
+'@cypress-design/react-checkbox': major
+'@cypress-design/vue-checkbox': major
+'@cypress-design/react-icon': major
+'@cypress-design/vue-icon': major
+'@cypress-design/react-logo': major
+'@cypress-design/vue-logo': major
+'@cypress-design/constants-menu': major
+'@cypress-design/react-menu': major
+'@cypress-design/vue-menu': major
+'@cypress-design/constants-modal': major
+'@cypress-design/react-modal': major
+'@cypress-design/vue-modal': major
+'@cypress-design/constants-spinner': major
+'@cypress-design/react-spinner': major
+'@cypress-design/vue-spinner': major
+'@cypress-design/constants-statusicon': major
+'@cypress-design/react-statusicon': major
+'@cypress-design/vue-statusicon': major
+'@cypress-design/constants-tabs': major
+'@cypress-design/react-tabs': major
+'@cypress-design/vue-tabs': major
+'@cypress-design/constants-tag': major
+'@cypress-design/react-tag': major
+'@cypress-design/vue-tag': major
+'@cypress-design/constants-testresult': major
+'@cypress-design/react-testresult': major
+'@cypress-design/vue-testresult': major
+'@cypress-design/react-tooltip': major
+'@cypress-design/vue-tooltip': major
+'@cypress-design/icon-registry': major
+---
+
+refactor: use tailwind components to manage specificity of styles
diff --git a/components/DocMenu/assertions.ts b/components/DocMenu/assertions.ts
@@ -1,6 +1,11 @@
 /// <reference types="cypress" />
 
 import type { NavGroup, NavItemLink } from './constants'
+import { colors } from '@cypress-design/css/dist/colors'
+import hexRgb from 'hex-rgb'
+
+const { red, green, blue } = hexRgb(colors.indigo[500])
+const indigoToCompare = `rgb(${red}, ${green}, ${blue})`
 
 const menuItems = [
   {
@@ -119,17 +124,16 @@ export default function assertions(
   it('expands a section where an element is activated', () => {
     mountCustomLinkStory()
     cy.findByText('Foo', { selector: 'button' }).should(
-      'have.class',
-      'text-indigo-500',
+      'have.css',
+      'color',
+      indigoToCompare,
     )
 
     cy.findByText('Set path to /kephren', { selector: 'button' }).click()
 
     cy.findByText('Kephren', { selector: 'button' })
       .should('be.visible')
-      .should('have.class', 'text-indigo-500')
-
-    cy.findByTestId('doc-menu-active-marker').should('have.css', 'top', '220px')
+      .should('have.css', 'color', indigoToCompare)
   })
 }
 

diff --git a/components/DocMenu/constants/src/index.ts b/components/DocMenu/constants/src/index.ts
@@ -22,3 +22,14 @@ export const CssClasses = {
   openListBorderLeft:
     'absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900',
 } as const
+
+export const CssLink = {
+  wrapper: 'list-none p-0 scroll-my-10',
+  static: 'group relative block w-full pl-[24px]',
+  active: 'text-indigo-500 dark:text-indigo-400',
+  inactive: 'text-gray-700 dark:text-gray-500',
+  negativeDepth: 'py-[8px] text-[16px] leading-[24px]',
+  positiveDepth: 'leading-[20px] text-[14px] py-[12px]',
+  markerStatic:
+    'left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full',
+} as const
diff --git a/components/DocMenu/react/_DocLink.tsx b/components/DocMenu/react/_DocLink.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import clsx from 'clsx'
-import { NavItemLink } from '@cypress-design/constants-docmenu'
+import { type NavItemLink, CssLink } from '@cypress-design/constants-docmenu'
 
 export interface Context {
   setMarkerIsMoving: (markerIsMoving: boolean) => void
@@ -86,30 +86,26 @@ export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
     }))
 
     return (
-      <li ref={activeLIRef} className="list-none p-0 scroll-my-10">
+      <li ref={activeLIRef} className={CssLink.wrapper}>
         <LinkComponent
           {...itemRest}
-          className={clsx('group relative block w-full pl-[24px]', {
-            'text-indigo-500 dark:text-indigo-400': active,
-            'text-gray-700 dark:text-gray-500': !active,
-            'py-[8px] text-[16px] leading-[24px]': depth < 0,
-            'leading-[20px] text-[14px] py-[12px]': depth >= 0,
+          className={clsx(CssLink.static, {
+            [CssLink.active]: active,
+            [CssLink.inactive]: !active,
+            [CssLink.negativeDepth]: depth < 0,
+            [CssLink.positiveDepth]: depth >= 0,
           })}
           style={{
             paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,
           }}
         >
           {depth >= 0 ? (
             <div
-              className={clsx(
-                'left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full',
-                {
-                  hidden: !markerIsMoving || !active,
-                  'group-hover:block bg-gray-300':
-                    !active && context.collapsible,
-                  'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
-                },
-              )}
+              className={clsx(CssLink.markerStatic, {
+                hidden: !markerIsMoving || !active,
+                'group-hover:block bg-gray-300': !active && context.collapsible,
+                'bg-indigo-500 dark:bg-indigo-400': active && markerIsMoving,
+              })}
             />
           ) : null}
           {item.label}

diff --git a/components/DocMenu/vue/_DocLink.vue b/components/DocMenu/vue/_DocLink.vue
@@ -8,7 +8,7 @@ import {
   nextTick,
   computed,
 } from 'vue'
-import type { NavItemLink } from '@cypress-design/constants-docmenu'
+import { type NavItemLink, CssLink } from '@cypress-design/constants-docmenu'
 
 const props = withDefaults(
   defineProps<{
@@ -102,29 +102,33 @@ const itemWithoutLabel = computed(() => {
 </script>
 
 <template>
-  <li ref="$container" class="list-none p-0 scroll-my-10">
+  <li ref="$container" :class="CssLink.wrapper">
     <component
       :is="linkComponent"
       v-bind="itemWithoutLabel"
-      class="group relative block w-full pl-[24px]"
-      :class="{
-        'text-indigo-500 dark:text-indigo-400': active,
-        'text-gray-700 dark:text-gray-500': !active,
-        'py-[8px] text-[16px] leading-[24px]': depth < 0,
-        'leading-[20px] text-[14px] py-[12px]': depth >= 0,
-      }"
+      :class="[
+        CssLink.static,
+        {
+          [CssLink.active]: active,
+          [CssLink.inactive]: !active,
+          [CssLink.negativeDepth]: depth < 0,
+          [CssLink.positiveDepth]: depth >= 0,
+        },
+      ]"
       :style="{
         paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,
       }"
     >
       <div
         v-if="depth >= 0"
-        class="left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full"
-        :class="{
-          hidden: !markerIsMoving || !active,
-          'group-hover:block bg-gray-300': !active && collapsible,
-          'bg-indigo-500': active && markerIsMoving,
-        }"
+        :class="[
+          CssLink.markerStatic,
+          {
+            hidden: !markerIsMoving || !active,
+            'group-hover:block bg-gray-300': !active && collapsible,
+            'bg-indigo-500': active && markerIsMoving,
+          },
+        ]"
       />
       {{ item.label }}
     </component>