Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix typo in z-index interpolation codemod #1924

Merged
merged 3 commits into from
Jan 18, 2024
Merged

Fix typo in z-index interpolation codemod #1924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
71fb1b8
feat(codemod): typo fix in z-index transform
yangwooseong Jan 17, 2024
0312602
feat(codemod): add missed z-index transform document in README
yangwooseong Jan 17, 2024
1aa210c
chore(changeset): add changeset for minor version bump
yangwooseong Jan 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/early-garlics-smoke.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@channel.io/bezier-codemod": minor
---

Fix typo in `v2-z-index-interpolation-to-css-variable` codemod. It now transforms `${ZIndex.Float}` enum to `var(--z-index-floating)`, not `var(--z-index-float)`.
41 changes: 41 additions & 0 deletions packages/bezier-codemod/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,47 @@ const Wrapper = styled.div`
`;
```

**`v2-z-index-interpolation-to-css-variable`**

Replace z-index interpolation and z-index enum with css variable
For example:

```tsx
import { ZIndex, styled } from "@channel.io/bezier-react";

const Wrapper = styled.div`
z-index: ${ZIndex.Hide};
`;
```

Transforms into:

```tsx
import { styled } from "@channel.io/bezier-react";

const Wrapper = styled.div`
z-index: var(--z-index-hidden);
`;
```

Also,

```tsx
import { ZIndex } from "@channel.io/bezier-react";

export const OVERLAY_POSITION1 = {
zIndex: ZIndex.Modal,
};
```

Transforms into:

```tsx
export const OVERLAY_POSITION1 = {
zIndex: "var(--z-index-modal)",
};
```

### import directly from styled-components

**`v2-import-from-bezier-to-styled-components`**
Expand Down
2 changes: 1 addition & 1 deletion packages/bezier-codemod/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ enum Option {
V2FoundationToCssVariable = 'v2-foundation-to-css-variable',
V2InputInterpolationToCssVariable = 'v2-input-interpolation-to-css-variable',
V2TypographyInterpolationToCssVariable = 'v2-typography-interpolation-to-css-variable',
V2RemoveAlphaFromAlphaComponents = 'v2-remove-alpha-from-alpha-components',
V2ZIndexInterpolationToCssVariable = 'v2-z-index-interpolation-to-css-variable',
V2RemoveAlphaFromAlphaComponents = 'v2-remove-alpha-from-alpha-components',
V2TextComponentInterface = 'v2-text-component-interface',
V2ImportFromBezierToStyledComponents = 'v2-import-from-bezier-to-styled-components',
Exit = 'Exit',
Expand Down
2 changes: 1 addition & 1 deletion .../src/transforms/v2-z-index-interpolation-to-css-variable/fixtures/z-index-enum.output.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const OVERLAY_POSITION1 = {
}

export const OVERLAY_POSITION2 = {
zIndex: 'var(--z-index-float)',
zIndex: 'var(--z-index-floating)',
}

export const OVERLAY_POSITION3 = {
Expand Down
2 changes: 1 addition & 1 deletion ...terpolation-to-css-variable/fixtures/z-index-interpolation-in-styled-component.output.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const Wrapper = styled.div`
`

const Wrapper = styled.div`
z-index: var(--z-index-float);
z-index: var(--z-index-floating);
`

const Wrapper = styled.div`
Expand Down
4 changes: 2 additions & 2 deletions packages/bezier-codemod/src/transforms/v2-z-index-interpolation-to-css-variable/transform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const CSS_VARIABLE_TRANSFORM_MAP = {
'ZIndex.Hide': 'var(--z-index-hidden);',
'ZIndex.Auto': 'var(--z-index-auto);',
'ZIndex.Base': 'var(--z-index-base);',
'ZIndex.Float': 'var(--z-index-float);',
'ZIndex.Float': 'var(--z-index-floating);',
'ZIndex.Overlay': 'var(--z-index-overlay);',
'ZIndex.Modal': 'var(--z-index-modal);',
'ZIndex.Toast': 'var(--z-index-toast);',
Expand All @@ -21,7 +21,7 @@ const ENUM_TRANSFORM_MAP = {
ZIndex: {
Hide: 'var(--z-index-hidden)',
Base: 'var(--z-index-base)',
Float: 'var(--z-index-float)',
Float: 'var(--z-index-floating)',
Overlay: 'var(--z-index-overlay)',
Modal: 'var(--z-index-modal)',
Toast: 'var(--z-index-toast)',
Expand Down