diff --git a/.changeset/chilled-masks-explain.md b/.changeset/chilled-masks-explain.md new file mode 100644 index 000000000..cac3d8277 --- /dev/null +++ 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 ( +
+ placeholder + + Link + +
+ ) +} +``` + +**After** + +```jsx +import { css } from 'styled-system/css' +import { linkOverlay } from 'styled-system/patterns' + +const App = () => { + return ( +
+ placeholder + + Link + +
+ ) +} +``` diff --git a/packages/generator/__tests__/generate-pattern.test.ts b/packages/generator/__tests__/generate-pattern.test.ts index 56b0b06e4..2592782d3 100644 --- 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 {} - - 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 index b30a317bc..ddd86580a 100644 --- 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 index fa4b3d7d6..f8bfd4e12 100644 --- 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 ( -
+
Click me
) @@ -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 ( - + Click me - + ) } ` @@ -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 index 7bede5172..9a83949d5 100644 --- 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 index 0dbc80540..3e3d5f8e6 100644 --- 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 index 33d3bc142..eb539a04e 100644 --- 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 index 6e9d4063c..111689189 100644 --- 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 index 94c88daac..6efe55b78 100644 --- 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 index bd87df076..9b904ad27 100644 --- 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"] diff --git a/website/pages/docs/concepts/patterns.mdx b/website/pages/docs/concepts/patterns.mdx index fc9eff8e9..249627138 100644 --- a/website/pages/docs/concepts/patterns.mdx +++ b/website/pages/docs/concepts/patterns.mdx @@ -43,7 +43,7 @@ By default, the container sets the following properties: - `position: relative` - `paddingX: { base: 4, md: 6, lg: 8 }` - + ```tsx @@ -91,7 +91,7 @@ The `stack` function accepts the following properties: - `align`: An alias for the css `align-items` property. - `justify`: An alias for the css `justify-content` property. - + ```tsx @@ -133,7 +133,7 @@ function App() { The HStack pattern is a wrapper around the `stack` pattern that sets the `direction` property to `horizontal`, and centers the elements vertically. - + ```tsx @@ -176,7 +176,7 @@ The VStack pattern is a wrapper around the `stack` pattern that sets the `direct the elements horizontally. - + ```tsx @@ -226,7 +226,7 @@ The `wrap` function accepts the following properties: - `align`: An alias for the css `align-items` property. - `justify`: An alias for the css `justify-content` property. - + ```tsx @@ -274,7 +274,7 @@ The `aspectRatio` function accepts the following properties: - `ratio`: The aspect ratio of the container. Can be a number or a string. - + ```tsx @@ -329,7 +329,7 @@ The `flex` function accepts the following properties: - `grow`: An alias for the css `flex-grow` property. - `shrink`: An alias for the css `flex-shrink` property. - + ```tsx @@ -374,7 +374,7 @@ The `center` function accepts the following properties: - `inline`: Whether to use `inline-flex` or `flex` for the container. The value is a boolean. - + ```tsx @@ -409,6 +409,52 @@ function App() { +### LinkOverlay + +The link overlay pattern is used to expand a link's clickable area to its nearest parent with `position: relative`. + +> We recommend using this pattern when the relative parent contains at most one clickable link. + + + + + +```tsx +import { css } from '../styled-system/css' +import { linkOverlay } from '../styled-system/patterns' + +function App() { + return ( + + ) +} +``` + + + + +```tsx +import { Box, LinkOverlay } from '../styled-system/jsx' + +function App() { + return ( + + placeholder + + View more + + + ) +} +``` + + + ### Float The Float pattern is used to anchor an element to the top, bottom, left or right of the container. @@ -423,7 +469,7 @@ The `float` function accepts the following properties: - `offsetX`: Same as `offset`, but only for the horizontal axis. - `offsetY`: Same as `offset`, but only for the vertical axis. - + ```tsx @@ -470,7 +516,7 @@ The `grid` function accepts the following properties: - `rowGap`: The gap between the elements in the stack vertically. - `minChildWidth`: The minimum width of the child elements before wrapping. - + ```tsx @@ -520,7 +566,7 @@ The `gridItem` function accepts the following properties: - `colStart`: The column the item starts at. - `colEnd`: The column the item ends at. - + ```tsx @@ -567,7 +613,7 @@ The `divider` function accepts the following properties: - `thickness`: The thickness of the divider. Can be a sizing token, or arbitrary value. - `color`: The color of the divider. Can be a color token, or arbitrary value. - + ```tsx @@ -612,7 +658,7 @@ The `circle` function accepts the following properties: - `size`: The size of the circle. Can be a sizing token, or arbitrary value. - + ```tsx @@ -645,7 +691,7 @@ The `square` function accepts the following properties: - `size`: The size of the square. Can be a sizing token, or arbitrary value. - + ```tsx @@ -698,7 +744,7 @@ The `bleed` function accepts the following properties: - `inline`: The amount of padding to negate on the horizontal axis. Should match the parent's padding. - `block`: The amount of padding to negate on the vertical axis. Should match the parent's padding. - + ```tsx diff --git a/website/src/components/sections/learn-video-item.tsx b/website/src/components/sections/learn-video-item.tsx index b7c17ada7..0ba14a14a 100644 --- a/website/src/components/sections/learn-video-item.tsx +++ b/website/src/components/sections/learn-video-item.tsx @@ -1,10 +1,10 @@ -import { css, cx } from '@/styled-system/css' +import { css } from '@/styled-system/css' import { Circle, HStack, Stack, panda } from '@/styled-system/jsx' -import { float, linkBox, linkOverlay } from '@/styled-system/patterns' +import { float, linkOverlay } from '@/styled-system/patterns' import Image from 'next/image' import Link from 'next/link' -type Props = { +interface Props { title: string duration: string url: string @@ -15,7 +15,7 @@ type Props = { export const LearnVideoItem = (props: Props) => { const { title, duration, thumbnail, url, comingSoon } = props return ( - +