fix: different size, different color prop avail ts error

cypress-io · Jul 17, 2024 · 68fc5f5 · 68fc5f5
1 parent dca331d
commit 68fc5f5
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 10 deletions.
diff --git a/.changeset/proud-walls-doubt.md b/.changeset/proud-walls-doubt.md
@@ -0,0 +1,7 @@
+---
+'@cypress-design/react-icon': patch
+'@cypress-design/vue-icon': patch
+'@cypress-design/icon-registry': patch
+---
+
+when different colors are available by size, typescript was returning a type error
diff --git a/components/Icon/react/generate-icons.js b/components/Icon/react/generate-icons.js
@@ -28,7 +28,7 @@ const iconsComponents = Object.keys(iconsMetadata).map((name) => {
 
   return dedent`
   export const Icon${pascalCaseName}: React.FC<
-    Omit<iconsRegistry.Icon${pascalCaseName}Props, 'name'> & React.SVGProps<SVGSVGElement>
+    iconsRegistry.NamelessIcon${pascalCaseName}Props & React.SVGProps<SVGSVGElement>
   > = (props) => React.createElement('svg', useIconProps(props, ${JSON.stringify(
     iconBodies,
     null,

diff --git a/components/Icon/vue/generate-icons.js b/components/Icon/vue/generate-icons.js
@@ -31,7 +31,7 @@ const iconsComponents = Object.keys(iconsMetadata).map((name) => {
     class?: any
   }>({
     ...__iconComponentOpts__, 
-    setup(props: Omit<iconsRegistry.Icon${pascalCaseName}Props, 'name'> & {
+    setup(props: iconsRegistry.NamelessIcon${pascalCaseName}Props & {
     class?: any
   }, { attrs }: { attrs: Omit<SVGAttributes, 'name' | 'class'> }) {
       const iconPropsStep = useIconProps(props, ${JSON.stringify(

diff --git a/icon-registry/generate-icons-content.mjs b/icon-registry/generate-icons-content.mjs
@@ -214,29 +214,38 @@ async function generateIndex(iconsObjectUnique, iconsObject) {
       if (isUnique) {
         // prettier-ignore
         return dedent`
-       export interface ${icon.interfaceName}
-           extends ${['RootIconProps', ...ColorRoots.map(root =>
+       export interface Nameless${icon.interfaceName}
+           extends ${['Omit<RootIconProps, \'name\'>', ...ColorRoots.map(root =>
              icon[`has${root}`]
                ? `Has${pascalCase(`${root}`)}`
                : false
            ).filter(Boolean)].join(', ')} {
-           name: '${icon.kebabCaseName}';
            size?: '${icon.availableSizes.join('\' | \'')}';
+       }
+           
+       export interface ${icon.interfaceName}
+          extends Nameless${icon.interfaceName}
+       {
+           name: '${icon.kebabCaseName}';
        }`;
       } else {
         // if not, we need to generate the type definition for each size
 
         const sizeInterfaces = icon.availableSizes.map((size) => {
           // prettier-ignore
           return `
-         export interface ${icon.interfaceName}X${size}
-             extends ${['RootIconProps', ...ColorRoots.map(root =>
+         export interface Nameless${icon.interfaceName}X${size}
+             extends ${['Omit<RootIconProps, \'name\'>', ...ColorRoots.map(root =>
                icon[`has${root}`] && (icon[`has${root}`].indexOf(size) > -1)
                  ? `Has${pascalCase(`${root}`)}`
                  : false
              ).filter(Boolean)].join(', ')} {
-             name: '${icon.kebabCaseName}';
-             size?: '${size}';
+              size?: '${size}';
+          }
+              
+          export interface ${icon.interfaceName}X${size}
+            extends Nameless${icon.interfaceName}X${size}{
+                name: '${icon.kebabCaseName}';
          }`
         })
 
@@ -245,6 +254,7 @@ async function generateIndex(iconsObjectUnique, iconsObject) {
          ${sizeInterfaces.join('\n\n')}
 
          export type ${icon.interfaceName} = ${icon.availableSizes.map(size => `${icon.interfaceName}X${size}`).join(' | ')};
+         export type Nameless${icon.interfaceName} = ${icon.availableSizes.map(size => `Nameless${icon.interfaceName}X${size}`).join(' | ')};
        `
       }
     })

diff --git a/test/react-app/src/App.tsx b/test/react-app/src/App.tsx
@@ -1,7 +1,10 @@
 import { useState } from 'react'
 import logo from './logo.svg'
 import Checkbox from '@cypress-design/react-checkbox'
-import { IconActionQuestionMarkCircle } from '@cypress-design/react-icon'
+import {
+  IconActionQuestionMarkCircle,
+  IconObjectUntestedElement,
+} from '@cypress-design/react-icon'
 import StatusIcon from '@cypress-design/react-statusicon'
 import Spinner from '@cypress-design/react-spinner'
 import './App.css'
@@ -187,6 +190,10 @@ function App() {
       >
         <p>Other Modal content</p>
       </Modal>
+      <IconObjectUntestedElement
+        fillColor="jade-500"
+        secondaryStrokeColor="red-400"
+      />
     </div>
   )
 }