feat(tabs): add fill and line variants #308
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @ZeroChoi2781, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the Tabs component by introducing new visual variants, 'line' and 'fill', to provide greater flexibility in UI design. The changes involve a refactor of the component's styling using CSS variables, enabling distinct appearances for selected tabs and their indicators based on the chosen variant. This update allows developers to easily switch between a classic border-based tab style and a more modern background-filled style, improving the component's adaptability across different user interfaces. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이번 PR은 Tabs 컴포넌트에 fill과 line variant를 추가하는 변경 사항을 담고 있습니다. 전반적으로 vanilla-extract의 CSS 변수를 활용하여 확장 가능하고 깔끔하게 새로운 variant를 구현한 점이 좋습니다. 다만, list recipe에서 variant에 따른 border 스타일을 적용하는 방식에 대해 가독성과 유지보수성을 높일 수 있는 리팩토링 방안을 제안했습니다. compoundVariants를 활용하여 line variant일 때만 border가 적용되도록 조건을 명시적으로 만들어, 코드를 더 쉽게 이해할 수 있도록 하는 개선안입니다.
| base: layerStyle('components', { | ||
| position: 'relative', | ||
| gap: vars.size.space[100], | ||
| borderBottom: listBorderBottom, | ||
| borderRight: listBorderRight, | ||
| }), | ||
|
|
||
| defaultVariants: { variant: 'line', orientation: 'horizontal' }, | ||
| variants: { | ||
| variant: { line: {}, plain: {} }, | ||
| orientation: { | ||
| horizontal: layerStyle('components', { | ||
| display: 'flex', | ||
| vars: { | ||
| [listBorderBottom]: `1px solid ${vars.color.border.normal}`, | ||
| [listBorderRight]: 'none', | ||
| }, | ||
| }), | ||
| vertical: layerStyle('components', { | ||
| display: 'inline-flex', | ||
| flexDirection: 'column', | ||
| vars: { | ||
| [listBorderBottom]: 'none', | ||
| [listBorderRight]: `1px solid ${vars.color.border.normal}`, | ||
| }, | ||
| }), | ||
| }, | ||
| }, | ||
| compoundVariants: [ | ||
| { | ||
| variants: { variant: 'line', orientation: 'horizontal' }, | ||
| style: layerStyle('components', { | ||
| borderBottom: `1px solid ${vars.color.border.normal}`, | ||
| variant: { | ||
| line: layerStyle('components', { | ||
| vars: { | ||
| [triggerSelectedBg]: 'transparent', | ||
| [triggerSelectedBorderRadius]: '0', | ||
| [indicatorDisplay]: 'block', | ||
| }, | ||
| }), | ||
| }, | ||
| { | ||
| variants: { variant: 'line', orientation: 'vertical' }, | ||
| style: layerStyle('components', { | ||
| borderRight: `1px solid ${vars.color.border.normal}`, | ||
| fill: layerStyle('components', { | ||
| vars: { | ||
| [listBorderBottom]: 'none', | ||
| [listBorderRight]: 'none', | ||
| [triggerSelectedBg]: vars.color.background.primary[100], | ||
| [triggerSelectedBorderRadius]: vars.size.borderRadius[300], | ||
| [indicatorDisplay]: 'none', | ||
| }, | ||
| }), | ||
| }, | ||
| ], | ||
| }, | ||
| }); |
There was a problem hiding this comment.
현재 orientation variant에서 설정된 border 스타일을 fill variant에서 none으로 덮어쓰는 방식으로 구현되어 있습니다. 이 방식은 vanilla-extract의 variant 적용 순서에 의존하고 있어 코드의 흐름을 파악하기에 다소 직관적이지 않을 수 있습니다.
line variant일 때만 border가 필요하므로, 이 로직을 compoundVariants를 사용하여 명시적으로 결합하는 것을 제안합니다. 이렇게 하면 fill variant에서 border를 리셋할 필요가 없어지고, 각 variant의 역할이 더 명확해져 코드 가독성과 유지보수성이 향상될 수 있습니다.
base: layerStyle('components', {
position: 'relative',
gap: vars.size.space[100],
}),
defaultVariants: { variant: 'line', orientation: 'horizontal' },
variants: {
orientation: {
horizontal: layerStyle('components', {
display: 'flex',
}),
vertical: layerStyle('components', {
display: 'inline-flex',
flexDirection: 'column',
}),
},
variant: {
line: layerStyle('components', {
vars: {
[triggerSelectedBg]: 'transparent',
[triggerSelectedBorderRadius]: '0',
[indicatorDisplay]: 'block',
},
}),
fill: layerStyle('components', {
vars: {
[triggerSelectedBg]: vars.color.background.primary[100],
[triggerSelectedBorderRadius]: vars.size.borderRadius[300],
[indicatorDisplay]: 'none',
},
}),
},
},
compoundVariants: [
{
variants: { variant: 'line', orientation: 'horizontal' },
style: {
borderBottom: `1px solid ${vars.color.border.normal}`,
},
},
{
variants: { variant: 'line', orientation: 'vertical' },
style: {
borderRight: `1px solid ${vars.color.border.normal}`,
},
},
],
});
|
✅ All tests passed!
Click here if you need to update snapshots. |
| selectors: { | ||
| '&[data-selected]': { | ||
| color: vars.color.foreground.primary['100'], | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Upon checking the snapshot, it appears the color attribute hasn't changed.
There was a problem hiding this comment.
TODO:
- Check the foreground color
- Check the typography by size
Related Issues
n/a
Description of Changes
variant="line"(default): Border styling with moving indicatorvariant="fill": Background styling with hidden indicatorDiscussion Items
Indicator Animation: Animation behavior for
fillvariant still needs designer reviewScreenshots
Checklist
Before submitting the PR, please make sure you have checked all of the following items.