Enhancing AlphaStack component and changing to stable component

[sungik-choi]

Self Checklist

• I wrote a PR title in English and added an appropriate label to the PR.
• I wrote the commit message in English and to follow the Conventional Commits specification.
• I added the changeset about the changes that needed to be released. (or didn't have to)
• I wrote or updated documentation related to the changes. (or didn't have to)
• I wrote or updated tests related to the changes. (or didn't have to)
• I tested the changes in various browsers. (or didn't have to)
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox

Related Issue

Fixes #1835

Summary

(Changeset으로 갈음합니다)

AlphaStack component has been changed to a Stack component, and Stack component has been changed to LegacyStack component. Changes to remove the dependency of Stack and StackItem to allow stack layouts to be configured without additional DOM elements. And improved the existing AlphaStack to support more Flex layout related properties like reverse, wrap, and more align options, etc. See StackProps for more information.

We also added new HStack and VStack components, which are shorthand components that fix the direction prop of AlphaStack. As mentioned above, the existing components become LegacyHStack, LegacyVStack.

The layout implemented by StackItem can be partially replaced by the Layout component's grow, shrink common properties and margin common properties. Note that the align, justify (align-self, justify-self in CSS flex) properties provided by StackItem are not provided by the Layout component.

/* AS-IS */
return (
  <Stack direction="horizontal" spacing={8} style={{ width: 300, height: 50 }}>
    <StackItem grow shrink weight={1} />
    <StackItem weight={0} size={10} marginBefore={20}>
      <Stack direction="vertical" />
    </StackItem>
  </Stack>
)

/* TO-BE */
return (
  <Stack direction="horizontal" spacing={8} width={300} height={50}>
    <Box grow={1} />
    <Stack direction="vertical" shrink={0} width={10} ml={12} />
  </Stack>
)

The changes also apply to other components that use Stack internally, and there are a few changes.

• RadioGroup component no longer supports as prop.
• ButtonGroup component now extends the interfaces of new Stack. It no longer supports as prop.
• FormGroup component now extends the interfaces of new Stack. It no longer supports as prop.

Details

• AlphaStack을 Stack으로 변경합니다.
• Stack을 LegacyStack으로 변경합니다.
• 관련 타입 및 테스트를 마이그레이션합니다.

Breaking change? (Yes/No)

Yes

Referneces

• https://www.radix-ui.com/themes/docs/components/flex

[changeset-bot]

🦋 Changeset detected

Latest commit: 465cef5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@channel.io/bezier-react	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[sungik-choi]

spacing 토큰이 사라졌으며, 다음 디자인 시스템에서도 spacing을 enum으로 다루지 않을 것입니다. 좀 더 CSS에 가까운 이름인 gap 으로 속성명을 변경하고, string도 허용할 수 있게 변경했습니다. 똑같이 number type을 넘길 경우 암묵적으로 px unit을 붙이는 동작은 유지합니다.

[sungik-choi]

-> 생각 변경...

분명 gap 이 웹 표준과 일치하는 이름이며, 간결하기에 좋긴 합니다. 하지만 그보다도 기존 디자인 시스템과 호환성(마이그레이션 코스트)이 더 중요하다고 판단하여 이름을 spacing 으로 유지하고자 합니다. FYI. @yangwooseong

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[sungik-choi]

FYI.

• 빌드가 터지는 문제는 fix(beizer-figma-plugin): fix deps version of bezier-react #1847 에서
• CSS Custom property 상속 문제는 fix(styles): fix to explicitly initialize CSS variables #1846 에서 해결합니다!
• fix(beizer-figma-plugin): fix deps version of bezier-react #1847 기준으로 로컬 build, lint, typecheck, test 문제 없음 확인했습니다