refactor: remove link box pattern (#2554)

* refactor: link box * chore: update
chakra-ui · May 1, 2024 · df2546a · df2546a
1 parent 221c9a2
commit df2546a
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 150 deletions.
diff --git a/.changeset/chilled-masks-explain.md b/.changeset/chilled-masks-explain.md
@@ -0,0 +1,44 @@
+---
+'@pandacss/preset-base': minor
+'@pandacss/generator': minor
+'@pandacss/parser': minor
+---
+
+**BREAKING 💥**
+
+Remove `linkBox` pattern in favor of using adding `position: relative` when using the `linkOverlay` pattern.
+
+**Before**
+
+```jsx
+import { linkBox, linkOverlay } from 'styled-system/patterns'
+
+const App = () => {
+  return (
+    <div className={linkBox()}>
+      <img src="https://via.placeholder.com/150" alt="placeholder" />
+      <a href="#" className={linkOverlay()}>
+        Link
+      </a>
+    </div>
+  )
+}
+```
+
+**After**
+
+```jsx
+import { css } from 'styled-system/css'
+import { linkOverlay } from 'styled-system/patterns'
+
+const App = () => {
+  return (
+    <div className={css({ pos: 'relative' })}>
+      <img src="https://via.placeholder.com/150" alt="placeholder" />
+      <a href="#" className={linkOverlay()}>
+        Link
+      </a>
+    </div>
+  )
+}
+```
diff --git a/packages/generator/__tests__/generate-pattern.test.ts b/packages/generator/__tests__/generate-pattern.test.ts
@@ -450,52 +450,6 @@ test('should generate pattern', () => {
     import type { DistributiveOmit } from '../types/system-types';
     import type { Tokens } from '../tokens/index';
 
-    export interface LinkBoxProperties {
-       
-    }
-
-
-    interface LinkBoxStyles extends LinkBoxProperties, DistributiveOmit<SystemStyleObject, keyof LinkBoxProperties > {}
-
-    interface LinkBoxPatternFn {
-      (styles?: LinkBoxStyles): string
-      raw: (styles?: LinkBoxStyles) => SystemStyleObject
-    }
-
-
-    export declare const linkBox: LinkBoxPatternFn;
-    ",
-        "js": "import { getPatternStyles, patternFns } from '../helpers.mjs';
-    import { css } from '../css/index.mjs';
-
-    const linkBoxConfig = {
-    transform(props) {
-      return {
-        position: "relative",
-        "& :where(a, abbr)": {
-          position: "relative",
-          zIndex: "1"
-        },
-        ...props
-      };
-    }}
-
-    export const getLinkBoxStyle = (styles = {}) => {
-      const _styles = getPatternStyles(linkBoxConfig, styles)
-      return linkBoxConfig.transform(_styles, patternFns)
-    }
-
-    export const linkBox = (styles) => css(getLinkBoxStyle(styles))
-    linkBox.raw = getLinkBoxStyle",
-        "name": "link-box",
-      },
-      {
-        "dts": "import type { SystemStyleObject, ConditionalValue } from '../types/index';
-    import type { Properties } from '../types/csstype';
-    import type { SystemProperties } from '../types/style-props';
-    import type { DistributiveOmit } from '../types/system-types';
-    import type { Tokens } from '../tokens/index';
-
     export interface LinkOverlayProperties {
        
     }
@@ -517,12 +471,9 @@ test('should generate pattern', () => {
     const linkOverlayConfig = {
     transform(props) {
       return {
-        position: "static",
         _before: {
           content: '""',
-          display: "block",
           position: "absolute",
-          cursor: "inherit",
           inset: "0",
           zIndex: "0",
           ...props["_before"]

diff --git a/packages/generator/__tests__/setup-artifacts.test.ts b/packages/generator/__tests__/setup-artifacts.test.ts
@@ -89,8 +89,6 @@ describe('setup-artifacts', () => {
           "patterns/circle.d.ts",
           "patterns/center.mjs",
           "patterns/center.d.ts",
-          "patterns/link-box.mjs",
-          "patterns/link-box.d.ts",
           "patterns/link-overlay.mjs",
           "patterns/link-overlay.d.ts",
           "patterns/aspect-ratio.mjs",
@@ -227,8 +225,6 @@ describe('setup-artifacts', () => {
           "patterns/circle.d.ts",
           "patterns/center.mjs",
           "patterns/center.d.ts",
-          "patterns/link-box.mjs",
-          "patterns/link-box.d.ts",
           "patterns/link-overlay.mjs",
           "patterns/link-overlay.d.ts",
           "patterns/aspect-ratio.mjs",
@@ -282,8 +278,6 @@ describe('setup-artifacts', () => {
           "jsx/circle.d.ts",
           "jsx/center.mjs",
           "jsx/center.d.ts",
-          "jsx/link-box.mjs",
-          "jsx/link-box.d.ts",
           "jsx/link-overlay.mjs",
           "jsx/link-overlay.d.ts",
           "jsx/aspect-ratio.mjs",

diff --git a/packages/parser/__tests__/preset-patterns.test.ts b/packages/parser/__tests__/preset-patterns.test.ts
@@ -477,13 +477,14 @@ describe('preset patterns', () => {
     `)
   })
 
-  test('linkOverlay, linkBox', () => {
+  test('linkOverlay', () => {
     const code = `
-      import { linkOverlay, linkBox } from "styled-system/patterns"
+      import { css } from "styled-system/css"
+      import { linkOverlay } from "styled-system/patterns"
 
       function Button() {
         return (
-          <div className={linkBox()}>
+          <div className={css({ pos: 'relative' })}>
               <a className={linkOverlay()}>Click me</a>
           </div>
         )
@@ -494,10 +495,12 @@ describe('preset patterns', () => {
       [
         {
           "data": [
-            {},
+            {
+              "pos": "relative",
+            },
           ],
-          "name": "linkBox",
-          "type": "pattern",
+          "name": "css",
+          "type": "css",
         },
         {
           "data": [
@@ -515,30 +518,10 @@ describe('preset patterns', () => {
           position: relative;
       }
 
-        .pos_static {
-          position: static;
-      }
-
-        .\\[\\&_\\:where\\(a\\,_abbr\\)\\]\\:pos_relative :where(a, abbr) {
-          position: relative;
-      }
-
-        .\\[\\&_\\:where\\(a\\,_abbr\\)\\]\\:z_1 :where(a, abbr) {
-          z-index: 1;
-      }
-
-        .before\\:d_block::before {
-          display: block;
-      }
-
         .before\\:pos_absolute::before {
           position: absolute;
       }
 
-        .before\\:cursor_inherit::before {
-          cursor: inherit;
-      }
-
         .before\\:inset_0::before {
           inset: var(--spacing-0);
       }
@@ -554,15 +537,15 @@ describe('preset patterns', () => {
     `)
   })
 
-  test('jsx linkOverlay, linkBox', () => {
+  test('jsx linkOverlay', () => {
     const code = `
-      import { LinkBox, LinkOverlay } from "styled-system/jsx"
+      import { Box, LinkOverlay } from "styled-system/jsx"
 
       function Button() {
         return (
-          <LinkBox>
+          <Box pos="relative">
               <LinkOverlay>Click me</LinkOverlay>
-          </LinkBox>
+          </Box>
         )
       }
      `
@@ -571,9 +554,11 @@ describe('preset patterns', () => {
       [
         {
           "data": [
-            {},
+            {
+              "pos": "relative",
+            },
           ],
-          "name": "LinkBox",
+          "name": "Box",
           "type": "jsx-pattern",
         },
         {
@@ -592,30 +577,10 @@ describe('preset patterns', () => {
           position: relative;
       }
 
-        .pos_static {
-          position: static;
-      }
-
-        .\\[\\&_\\:where\\(a\\,_abbr\\)\\]\\:pos_relative :where(a, abbr) {
-          position: relative;
-      }
-
-        .\\[\\&_\\:where\\(a\\,_abbr\\)\\]\\:z_1 :where(a, abbr) {
-          z-index: 1;
-      }
-
-        .before\\:d_block::before {
-          display: block;
-      }
-
         .before\\:pos_absolute::before {
           position: absolute;
       }
 
-        .before\\:cursor_inherit::before {
-          cursor: inherit;
-      }
-
         .before\\:inset_0::before {
           inset: var(--spacing-0);
       }

diff --git a/packages/preset-base/src/patterns.ts b/packages/preset-base/src/patterns.ts
@@ -317,29 +317,13 @@ const divider = definePattern({
   },
 })
 
-const linkBox = definePattern({
-  transform(props) {
-    return {
-      position: 'relative',
-      '& :where(a, abbr)': {
-        position: 'relative',
-        zIndex: '1',
-      },
-      ...props,
-    }
-  },
-})
-
 const linkOverlay = definePattern({
   jsxElement: 'a',
   transform(props) {
     return {
-      position: 'static',
       _before: {
         content: '""',
-        display: 'block',
         position: 'absolute',
-        cursor: 'inherit',
         inset: '0',
         zIndex: '0',
         ...props['_before'],
@@ -472,7 +456,6 @@ export const patterns = {
   square,
   circle,
   center,
-  linkBox,
   linkOverlay,
   aspectRatio,
   grid,

diff --git a/packages/studio/styled-system/jsx/index.d.ts b/packages/studio/styled-system/jsx/index.d.ts
@@ -10,7 +10,6 @@ export * from './spacer';
 export * from './square';
 export * from './circle';
 export * from './center';
-export * from './link-box';
 export * from './link-overlay';
 export * from './aspect-ratio';
 export * from './grid';

diff --git a/packages/studio/styled-system/jsx/index.mjs b/packages/studio/styled-system/jsx/index.mjs
@@ -9,7 +9,6 @@ export * from './spacer.mjs';
 export * from './square.mjs';
 export * from './circle.mjs';
 export * from './center.mjs';
-export * from './link-box.mjs';
 export * from './link-overlay.mjs';
 export * from './aspect-ratio.mjs';
 export * from './grid.mjs';

diff --git a/packages/studio/styled-system/patterns/index.d.ts b/packages/studio/styled-system/patterns/index.d.ts
@@ -8,7 +8,6 @@ export * from './spacer';
 export * from './square';
 export * from './circle';
 export * from './center';
-export * from './link-box';
 export * from './link-overlay';
 export * from './aspect-ratio';
 export * from './grid';

diff --git a/packages/studio/styled-system/patterns/index.mjs b/packages/studio/styled-system/patterns/index.mjs
@@ -7,7 +7,6 @@ export * from './spacer.mjs';
 export * from './square.mjs';
 export * from './circle.mjs';
 export * from './center.mjs';
-export * from './link-box.mjs';
 export * from './link-overlay.mjs';
 export * from './aspect-ratio.mjs';
 export * from './grid.mjs';

diff --git a/packages/studio/styled-system/patterns/link-overlay.mjs b/packages/studio/styled-system/patterns/link-overlay.mjs
@@ -4,12 +4,9 @@ import { css } from '../css/index.mjs';
 const linkOverlayConfig = {
 transform(props) {
   return {
-    position: "static",
     _before: {
       content: '""',
-      display: "block",
       position: "absolute",
-      cursor: "inherit",
       inset: "0",
       zIndex: "0",
       ...props["_before"]