React components library that implements Bezier design system.
APACHE-2.0 License
Bot releases are visible (Hide)
Update icons (#2248) by @kimminkyung94
Added
Modified
Published by ch-builder 5 months ago
Change position
property of ToastContainer
to fixed
(#2245) by @yangwooseong
Fix typo in IconProps
jsdoc (#2232) by @yangwooseong
useIsomorphicLayoutEffect
hook to use useLayoutEffect
in SSR environment.Add AlphaSpinner
component (#2237) by @yangwooseong
Published by yangwooseong 5 months ago
AlphaFloatingIconButton
component. (#2223) by @yangwooseongAlphaButton
and AlphaIconButton
.icon
type of AlphaIconButton
to be required.Published by yangwooseong 5 months ago
fg-{color}-dark
alpha version color tokens. (#2212) by @sungik-choiPublished by yangwooseong 5 months ago
Add AlphaIconButton
component. (#2200) by @yangwooseong
Replace aria-label
of non-interactive elements (#2217) by @Dogdriip
Updated dependencies
Published by yangwooseong 5 months ago
Published by yangwooseong 5 months ago
Change outline color of primary and blue Button
component when focused. (#2182) by @yangwooseong
Add AlphaButton
component. (#2182) by @yangwooseong
Add AlphaFloatingButton
component. (#2193) by @yangwooseong
Updated dependencies
Published by yangwooseong 5 months ago
Update icons (#2204) by @kimminkyung94
Added
Modified
Published by github-actions[bot] 6 months ago
Published by github-actions[bot] 6 months ago
Implement AlphaAvatar
component. (#2162) by @yangwooseong
Add AlphaAvatarGroup
component (#2177) by @yangwooseong
Updated dependencies
Published by github-actions[bot] 6 months ago
Published by github-actions[bot] 6 months ago
Fixes an issue where injecting className
into FormLabel
, FormHelperText
inside a FormControl
does not apply styles correctly. (#2156) by @sungik-choi
Updated dependencies
Published by github-actions[bot] 6 months ago
Published by github-actions[bot] 6 months ago
The style sheet(styles.css) now includes the alpha version of the design token. (#2141) by @sungik-choi
Remove the /alpha
directory and add the Alpha
prefix to alpha components. (#2140) by @sungik-choi
TooltipPrimitive
-> AlphaTooltipPrimitive
DialogPrimitive
-> AlphaDialogPrimitive
Updated dependencies
Published by github-actions[bot] 7 months ago
Apply deep freeze to the tokens
object. (#1992) by @sungik-choi
Add the missing bg-header-float
semantic color token (#1842) by @sungik-choi
Add composition tokens, such as box-shadow (#1769) by @sungik-choi
Now serving one combined styles.css file. This is a breaking change for anyone who was importing the individual CSS files. You will need to update your import to @channel.io/bezier-tokens/css/styles.css
. (#1769) by @sungik-choi
Add z-index and opacity tokens (#1766) by @sungik-choi
Remove invalid radius tokens (#1934) by @sungik-choi
radius-10
radius-14
radius-100-p
Fix invalid letter spacing token values (#1821) by @sungik-choi
First release (#1685) by @sungik-choi
Add categories by token to the JavaScript build file (#1766) by @sungik-choi
Remove unused tokens and add missing unit to radius tokens (#1752) by @sungik-choi
Published by github-actions[bot] 7 months ago
Breaking Changes: Property updates in Avatar
component (#1871) by @yangwooseong
No longer support interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking changes: Remove TagBadge-related types (#2114) by @sungik-choi
color
prop of TagProps
and TagBadgeBgColorPreset
.TagBadgeSize
. Please change it to TagSize
and BadgeSize
.TagBadgeVariant
. Please change it to TagVariant
and BadgeVariant
.Breaking Changes: Property updates in SegmentedControl
component (#1866) by @sungik-choi
No longer support as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking Changes: Property updates in ListItem
component (#1925) by @sungik-choi
interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.iconStyle
, iconClassName
, iconInterpolation
, contentStyle
, contentClassName
and contentInterpolation
. This decision was made to reduce excessive flexibility in the interface.leftIcon
property. Removed for consistency with other component interfaces. Replace it to leftContent
.name
property. The second argument (name) of onClick
is also removed. If you need an identifier, combine functions outside of the component.hide
, nested
, optionKey
and disableIconActive
property. Removed because it is a legacy property. Replace hide
property with conditional rendering.ListItemSize
. This is a change to unify the design. Please change it like below.
ListItemSize.S
-> ListItemSize.XS
ListItemSize.M
-> ListItemSize.S
ListItemSize.L
-> ListItemSize.M
ListItemSize.XL
-> ListItemSize.L
Minor Changes:
XL
(now L
) size.Breaking Changes: Property updates in Overlay
component (#1949) by @sungik-choi
as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.containerInterpolation
property. Replace any usage of containerInterpolation
property with appropriate containerStyle
or containerClassName
implementations.wrapperTestId
property.Breaking Changes: Remove TooltipProvider
and Property updates in Tooltip
component (#1974) by @sungik-choi
TooltipProvider
and TooltipProviderProps
. Tooltip
component was implemented via radix-ui's Tooltip, which required the use of a TooltipProvider
, which caused all subcomponents to be re-rendered and caused a performance hit. We decided that the ability to share hover delay time between Tooltip
components via TooltipProvider
was not a feature we needed, even with the performance penalty. Also, by providing TooltipProvider
built-in to AppProvider
, we were unnecessarily importing modules from our library usage that didn't require Tooltip
.Tooltip
component now contains a TooltipProvider
inside it.Minor Changes:
delayShow
prop from 300
to 0
.Breaking Changes: Property updates in Tag
and Badge
component (#1872) by @yangwooseong
No longer support interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking Changes: Property updates in CheckableAvatar
component (#1921) by @sungik-choi
No longer support interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking Changes: AlphaSmoothCornersBox
component is now SmoothCornersBox
component. (#2079) by @sungik-choi
Breaking Changes: Property updates in LegacyTooltip
component (#1945) by @sungik-choi
interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.contentInterpolation
property. Replace any usage of contentInterpolation
property with appropriate contentStyle
or contentClassName
implementations.contentWrapperInterpolation
property. Replace any usage of contentWrapperInterpolation
property with appropriate contentWrapperStyle
or contentWrapperClassName
implementations.Breaking Changes: AlphaCenter
component is now Center
component. Property updates in Center
component (#1854) by @sungik-choi
as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.display
prop.Breaking Changes: Property updates in FormLabel
, FormHelperText
, and FormErrorMessage
component (#1893) by @yangwooseong
No longer support as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking Changes: Property updates in NavGroup
and NavItem
component (#1931) by @sungik-choi
leftIcon
renamed to leftContent
. Changed to improve consistency of interface property names across libraries.
Breaking Changes: The enum type that the component receives as props is changed to a string (or number) literal type (#2059) by @yangwooseong
The properties that change are:
AvatarGroupEllipsisType
IconSize
LegacyTooltipPosition
ModalTitleSize
OverlayPosition
ProgressBarSize
, ProgressBarVariant
SpinnerSize
SwitchSize
TagBadgeSize
, TagBadgeVariant
TextAreaHeight
TextFieldSize
, TextFieldVariant
ToastPlacement
, ToastAppearance
, ToastPreset
TooltipPosition
Also, SpinnerThickness
props of Spinner
is not supported any more.
When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. TooltipPosition.TopCenter
-> top-center
. Among the above enums, TextAreaHeight
is converted to number literal type. e.g. TextAreaHeight.Row16
-> 16
, and IconSize.normal
is converted to m
for consistency
Breaking Changes: Property updates in FormControl
, Select
, and TextField
component (#1948) by @yangwooseong
FormControl
component no longer supports leftLabelWrapperHeight
props.FormControl
component now supports size
props, which is passed as context to the child component such as TextField
and Select
and specified as the size property.Select
and TextField
component changes from enum to string literal union type. Also, SelectSize
and TextFieldSize
enum are deprecated.Breaking changes: Remove testId
and related properties (#1971) by @sungik-choi
No longer supports testId
and related properties(e.g. wrapperTestId
). testId
is a property used internally by the library for testing with testing-library (getByTestId
). We don't see a need to expose this as a public API, so we remove it.
If you were using it, please replace it with the data-testid
property. See https://testing-library.com/docs/queries/bytestid/.
Breaking Changes: Property updates in FormControl
component (#1935) by @yangwooseong
No longer support as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking Changes: Property updates in Select
component (#1913) by @sungik-choi
as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.dropdownInterpolation
property. Replace any usage of dropdownInterpolation
property with appropriate dropdownStyle
or dropdownClassName
implementations.zIndex
property is changed to a z-index token. (e.g. "modal"
)Breaking Changes: Reorganizing SectionLabel
component (#1936) by @sungik-choi
SectionLabel
is a complex component that can be used both in the form of an accordion and as a simple heading. To better meet the needs of both, we've changed the internal implementation of the component.
We've also made changes to make styling overrides as predictable as they are for other components. The style override property, which was unnecessarily open, is now removed.
style
, className
properties are now injected into the component instead of the old wrapperStyle
, wrapperClassName
.as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.wrapper
, contentWrapper
, leftWrapper
and rightWrapper
.divider
property. Replace it by adding Divider
component to the component's before.iconColor
.onClick
handler, the root element now behaves as a button
element. This change is to better support keyboard focus control.Breaking Changes: Property updates in Emoji
component (#1881) by @yangwooseong
No longer support as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking Changes: Property updates in Radio
component (#1923) by @sungik-choi
No longer support as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking Changes: Deprecated modules for internal use (#1963) by @sungik-choi
useEventHandler
and useMergeRefs
hook.useId
hook. Use useId
hook of react
instead.getRootElement
hook. Use useWindow
hook instead.StyleUtils
and StringUtils
utils.Breaking Changes: Property updates in ProgressBar
component (#1947) by @sungik-choi
as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.activeStyle
, activeClassName
and activeInterpolation
property.activeTestId
property.Breaking Changes: Property updates in Tabs
-related components (#1960) by @sungik-choi
No longer support as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking Changes: Property updates in Text
component (#1820) by @sungik-choi
typo
prop in the Text
component has been changed to accept only string literals in order to simplify the API and improve the predictability of text styling, particularly in the context of the removal of styled-components
from bezier-react
, which has led to the unavailability of CSS Interpolation.
Migration Instructions:
Use v2-text-component-interface
transformer from bezier-codemod
for automated migration.
Breaking Changes: Reorganizing KeyValueListItem
component (#1941) by @sungik-choi
KeyValueItem
.interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.valueWrapperStyle
, valueWrapperClassName
, valueWrapperInterpolation
, keyWrapperStyle
, keyWrapperClassName
and keyWrapperInterpolation
. This decision was made to reduce excessive flexibility in the interface.AdditionalColorProps
and show
property of ItemAction.Button
component.Add new margin properties to Icon
component (#1863) by @yangwooseong
margin
marginHorizontal
marginVertical
Breaking Changes: Property updates in NavItem
and NavGroup
component (#1905) by @yangwooseong
No longer support as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking Changes: The enum type that the component receives as props is changed to a string literal type (#2059) by @yangwooseong
The properties that change are:
AvatarSize
BannerVariant
ButtonColorVariant
, ButtonStyleVariant
, ButtonSize
EmojiSize
SegmentedControlSize
TabSize
ListItemVariant
, ListItemSize
StatusType
, StatusSize
When changed to string literal type, it is changed to the kebab-cased value of enum. e.g. ButtonStyleVariant.MonoChromeDark
-> monochrome-dark
, StatusType.OnlineCrescent
-> online-crescent
Breaking Changes: Property updates in Modal
-related components (#1903) by @sungik-choi
as
and interpolation
props.zIndex
property is changed to a z-index token. (e.g. "modal"
)Breaking Change: Removal of LegacySegmentedControl
Component (#1786) by @sungik-choi
We have removed the LegacySegmentedControl
component from our library. This change follows its deprecation in next-v1.204
.
Reasons for Removal:
Impact:
LegacySegmentedControl
component is no longer available and cannot be used in your projects. Replace all instances of LegacySegmentedControl
with SegmentedControl
component.
Breaking Changes: Property updates in LegacyStack
components (#1944) by @sungik-choi
interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.AxisAlignment
type.Breaking Changes: Property updates in TextField
component (#1904) by @sungik-choi
interpolation
-related properties. Replace any usage of interpolation
-related properties with appropriate ***style
or ***className
implementations.inputStyle
and inputClassName
properties. Replace any usage of inputStyle
and inputClassName
with appropriate style
or className
implementations.TextFieldVariant
enum value to string.Breaking Changes: Remove the default offset(GNB_WIDTH
) in Toast
(#2117) by @sungik-choi
Remove the style because it was dependent on a specific application. Use { left: 68 }
instead.
Breaking Changes: Property updates in Banner
component (#1891) by @sungik-choi
No longer support as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Other changes in Banner
component
Breaking Change: Removal of LegacyRadio
Component (#1943) by @sungik-choi
LegacyRadio
component has been removed from the library. Please use RadioGroup
and Radio
component instead.Radio
has no label, its size is reduced by an indicator.Breaking Changes: Property updates in Checkbox
component (#1918) by @sungik-choi
No longer support interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Breaking Changes: Property updates in Switch
component (#1885) by @yangwooseong
No longer support as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.
Export the css style sheet for the new design system. (#1492) by @sungik-choi
Breaking Changes: Reorganizing OutlineItem
component (#1930) by @sungik-choi
OutlineItem
component was originally designed as a component to draw a tree-like view, but it was not used as intended in production. We simplified the component's responsibilities by removing unused properties while retaining the component's ability to apply indentation to subcomponents.
paddingLeft
property. By default, 6px of left padding has been added. If you need to make changes, override the style.interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.iconStyle
, iconClassName
, iconInterpolation
, contentStyle
, contentClassName
and contentInterpolation
. This decision was made to reduce excessive flexibility in the interface.leftIcon
property. Removed for consistency with other component interfaces. Replace it to leftContent
.leftIconColor
and leftIconTestId
property.name
property. The second argument (name) of onClick
is also removed. If you need an identifier, combine functions outside of the component.hide
, optionKey
and disableIconActive
property. Replace hide
property with conditional rendering.onOpen
, onClickArrow
, selectedOutlineItemIndex
and onChangeOption
property.Breaking Changes: Property updates in Slider
component (#1883) by @yangwooseong
as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.dir
type is narrowed from string | undefined
to ltr | rtl | undefined
Breaking Changes: Property updates in Button
component (#1882) by @sungik-choi
interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.ButtonSize
and ButtonColorVariant
enums have been updated to use kebab case.Breaking Change: No longer supports smoothCorners
mixin. Use AlphaSmoothCornersBox
components instead. (#1892) by @sungik-choi
// Before
const Box = styled.div`
${smoothCorners({
borderRadius: 10,
shadow: '0 5px 15px 0 var(--shdw-large)',
shadowBlur: 15,
backgroundColor: 'var(--bgtxt-absolute-white-dark)',
hasBackgroundImage: true,
})}
`
<Box>...</Box>
// After
<AlphaSmoothCornersBox
borderRadius={10}
shadow={{
offsetX: 0,
offsetY: 5,
blurRadius: 15,
spreadRadius: 0,
color: 'shdw-large',
}}
backgroundColor="bgtxt-absolute-white-dark"
backgroundImage="..."
>...</AlphaSmoothCornersBox>
Breaking Changes: Toast
-related modules (#1950) by @sungik-choi
actionContent
and onClick
properties in ToastOptions
.zIndex
property in ToastOptions
is changed from number
to ZIndex
token.ToastIconColor
enum.Breaking Changes: Property updates in TextArea
component (#1914) by @sungik-choi
as
and interpolation
property. Replace any usage of interpolation
property with appropriate style
or className
implementations.wrapperStyle
, wrapperClassName
and wrapperInterpolation
property. It was never properly implemented before, and the Wrapper element inside was also removed.Breaking Changes: Deprecate support for styled-components
related modules (#1962) by @sungik-choi
useToken
hook and components to replace it
LightFoundation
and DarkFoundation
Spacing
ev1
, ev2
, ev3
, ev4
, ev5
and ev6
createThemes
, Theme
, SemanticNames
, LightTheme
and DarkTheme
TransitionDuration
and Transition
Border
Typography
, TypoAbsoluteNumber
, LineHeightAbsoluteNumber
and TypographyType
absoluteCenter
, disableAutoMinimum
, hideScrollbars
and ellipsis
ThemeVarsAdditionalType
and ThemeVars
GlobalStyle
Foundation
GlobalStyleProp
createGlobalStyle
, styled
, css
, FoundationProvider
, useFoundation
, keyframes
, StyleSheetManager
and ServerStyleSheet
BezierProvider
. Use the AppProvider
insteadgap
and touchableHover
mixins. Please implement and use your ownfunction gap(spacing: number): InjectedInterpolation {
return css`
gap: ${spacing}px;
@supports not (gap: ${spacing}px) {
margin-top: ${-spacing}px;
margin-left: ${-spacing}px;
> * {
margin-top: ${spacing}px;
margin-left: ${spacing}px;
}
}
`;
}
function touchableHover(
interpolation: InjectedInterpolation,
): InjectedInterpolation {
return css`
@media (hover: hover) {
&:hover {
${interpolation}
}
}
@media (hover: none) {
&:active {
${interpolation}
}
}
`;
}
inputTextStyle
, inputPlaceholderStyle
, inputWrapperStyle
, focusedInputWrapperStyle
and erroredInputWrapperStyle
. Please migrate using @channel.io/bezier-codemod
's v2-interpolation-to-css-variable
transformer.Breaking Changes: AlphaStack
component has been changed to a Stack
component, and Stack
component has been changed to LegacyStack
component. (#1837) by @sungik-choi
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} shrink={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 breaking changes.
RadioGroup
, ButtonGroup
, FormGroup
no longer support as
prop.Breaking Change: Removal of ListMenuTitle
Component (#1900) by @yangwooseong
ListMenuTitle
in your application, please replace it with the SectionLabel
component for similar functionality.Implement multi theme feature based on data attributes (#1756) by @sungik-choi
Move @channel.io/bezier-tokens
from dev depdency to dependency (#1985) by @sungik-choi
Add the TooltipPrimitive
component, which is the same as the Tooltip
component in radix-ui. You can use it by importing it from the /alpha
path. (#2049) by @sungik-choi
import {
TooltipPrimitive,
TooltipPrimitiveArrow,
TooltipPrimitiveContent,
TooltipPrimitivePortal,
TooltipPrimitiveProvider,
TooltipPrimitiveTrigger,
} from "@channel.io/bezier-react/alpha";
When you pass a value of number type to the dimension-related properties of margin prop and layout prop, they implicitly add px units as a suffix. See: https://react.dev/reference/react-dom/components/common#common (#1823) by @sungik-choi
Add Box
component. Box
component is responsible for the primitive layout and provides easy access to the design tokens in the design system (#1785) by @sungik-choi
<Box width="100px" height="100px" p="6px" m="6px" bgColor="bg-black-light" />
Fixes style inheritance issues by explicitly giving CSS custom properties an initial value (#1846) by @sungik-choi
Apply bezier-tokens to bezier-react's style sheet and fix some invalid css selector (#1495) by @sungik-choi
Add the DialogPrimitive
component, which is the same as the Dialog
component in radix-ui. You can use it by importing it from the /alpha
path. (#2049) by @sungik-choi
import {
DialogPrimitive,
DialogPrimitiveClose,
DialogPrimitiveContent,
DialogPrimitiveDescription,
DialogPrimitiveOverlay,
DialogPrimitivePortal,
DialogPrimitiveTitle,
DialogPrimitiveTrigger,
} from "@channel.io/bezier-react/alpha";
ButtonGroup
now supports HTML attributes (#1890) by @sungik-choi
Banner
will now render content even if the content
prop is not a string. The same applies to link-related props. (#1972) by @sungik-choi
Rename AlphaAppProvider
to AppProvider
(#1834) by @sungik-choi
Rename the style.css
file to styles.css
(#1791) by @sungik-choi
Add align
prop to Text
component. This prop is used to set horizontal alignment of text (#1820) by @sungik-choi
<Text align="left" />
<Text align="center" />
<Text align="right" />
Remove borderStyle
prop from Layout props (#1848) by @sungik-choi
Add useRootElement
hook. It is only available to WindowProvider
children, and provides easy access to the root element of window context value. (#1981) by @sungik-choi
const { window, document, rootElement } = useWindow();
// Same as useWindow().rootElement
const rootElement = useRootElement();
Fixes an issue with color inheritance across components. (#2009) by @sungik-choi
Add missing default margin styles of LegacyStackItem
(#2004) by @sungik-choi
Fixes issue with ModalBody
, ModalFooter
not applying styling correctly when wrapped in other elements. (#2017) by @sungik-choi
Add overflow: hidden
to ListItem
component (#2013) by @yangwooseong
Fix invalid aria-modal
value in Modal Content. (#2052) by @sungik-choi
Fix TabAction
typography style for size M. (#2035) by @sungik-choi
Minify the CSS output (#1791) by @sungik-choi
Update background color of TextField
's secondary variant. (#2016) by @sungik-choi
Mute the error of smoothCornerScript
when called twice. (#2010) by @chaejunlee
Now exports the tokens
object from @channel.io/bezier-tokens
. (#1992) by @sungik-choi
Adds icon and typo size for avatar size "72"
, which were missing from AvatarGroup
. (#2071) by @sungik-choi
Add missing overflow: hidden
style to item wrapper of KeyValueItem
component. (#2036) by @sungik-choi
Fixes Overlay
not closing in other windows. (#2037) by @sungik-choi
Fixes a bug where onHide is called when clicking inside the overlay, causing the overlay to close. (#1977) by @yangwooseong
Fix invalid style migrations of Tabs
component. (#2014) by @sungik-choi
Add missing spreading props to ThemeProvider
and related components. (#1986) by @sungik-choi
Fix ListItem
's left icon color specificity issue. (#2018) by @sungik-choi
Fix Badge
component style issue (#2068) by @yangwooseong
Fixes an issue where multi line truncated in Text
was not being applied. (#1994) by @sungik-choi
Updated dependencies
Published by github-actions[bot] 7 months ago
Changes in v2-text-component-interface
codemod (#1932) by @yangwooseong
Previously, both the component name and the name of the property were checked, but now only the name of the component property is checked.
Add codemod for Stack component (#1836) by @yangwooseong
Add more various cases to v2-enum-member-to-string-literal
(#2059) by @yangwooseong
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)
. (#1924) by @yangwooseong
Add codemod to transform interface of Text
component (#1849) by @yangwooseong
Enhancement in v2-foundation-to-css-variable-transition
codemod (#1917) by @yangwooseong
TransitionDuration
is used.Changes in v2-remove-alpha-from-alpha-stack
transform (#1894) by @yangwooseong
v2-remove-alpha-from-alpha-components
.AlphaCenter
as well.Add v2-foundation-to-css-variable-spacing
codemod to convert the foundation's spacing variable to pixels (#1907) by @yangwooseong
This transforms
import { styled } from "@channel.io/bezier-react";
export const Wrapper = styled.div`
padding: ${({ foundation }) => foundation?.spacing.s5};
`;
into
import { styled } from "@channel.io/bezier-react";
export const Wrapper = styled.div`
padding: 12px;
`;
Changes in v2-**-interpolation-to-css-variable
transform. (#1928) by @yangwooseong
v2-interpolation-to-css-variable-**
. e.g. v2-interpolation-to-css-varable-input
, v2-interpolation-to-css-variable-typography
, and so onv2-interpolation-to-css-variable
that handles all interpolation transformEnhance import-styled-from-styled-component
codemod to cover other APIs from styled-components
(#1852) by @yangwooseong
Add Typography
transform logic to interpolation codemod (#1841) by @yangwooseong
Add v2 prefix to codemods related to major version 2 (#1844) by @yangwooseong
Add codemod for z-index interpolation and enum (#1845) by @yangwooseong
Add more various cases to v2-enum-member-to-string-literal
. Now it covers following enums. (#2059) by @yangwooseong
AvatarGroupEllipsisType
IconSize
LegacyTooltipPosition
ModalTitleSize
OverlayPosition
ProgressBarSize
, ProgressBarVariant
SpinnerSize
SwitchSize
TagBadgeSize
, TagBadgeVariant
TextAreaHeight
TextFieldSize
, TextFieldVariant
ToastPlacement
, ToastAppearance
, ToastPreset
TooltipPosition
Add inputPlaceholderStyle
migration logic to v2-input-interpolation-to-css-variable
codemod (#1926) by @yangwooseong
Add transform functions to help to migrate foundation to css variable generated by @channel.io/bezier-tokens
package. They cover theme, transition, elevation, rounding, and border of foundation (#1781) by @yangwooseong
Added a codemod to switch the library for importing 'styled' object from @channel.io/bezier-react to styled-components (#1789) by @yangwooseong
Add codemod for mixin interpolation (#1787) by @yangwooseong
Fix bug in v2-import-from-bezier-to-styled-components
codemod when there are only named imports as following: (#1987) by @yangwooseong
// As-is
import { css } from "@channel.io/bezier-react";
// To-be
import { css } from "styled-components";
Fix hasNamedImportInImportDeclaration
util to check all named imports (#2060) by @yangwooseong
Published by github-actions[bot] 7 months ago
Breaking changes: Remove TagBadge-related types (#2114) by @sungik-choi
color
prop of TagProps
and TagBadgeBgColorPreset
.TagBadgeSize
. Please change it to TagSize
and BadgeSize
.TagBadgeVariant
. Please change it to TagVariant
and BadgeVariant
.Breaking Changes: Remove the default offset(GNB_WIDTH
) in Toast
(#2117) by @sungik-choi
Remove the style because it was dependent on a specific application. Use { left: 68 }
instead.
Published by github-actions[bot] 7 months ago
Published by github-actions[bot] 7 months ago
AlphaSmoothCornersBox
component is now SmoothCornersBox
component. (#2079) by @sungik-choiAdd the TooltipPrimitive
component, which is the same as the Tooltip
component in radix-ui. You can use it by importing it from the /alpha
path. (#2049) by @sungik-choi
import {
TooltipPrimitive,
TooltipPrimitiveArrow,
TooltipPrimitiveContent,
TooltipPrimitivePortal,
TooltipPrimitiveProvider,
TooltipPrimitiveTrigger,
} from "@channel.io/bezier-react/alpha";
Add the DialogPrimitive
component, which is the same as the Dialog
component in radix-ui. You can use it by importing it from the /alpha
path. (#2049) by @sungik-choi
import {
DialogPrimitive,
DialogPrimitiveClose,
DialogPrimitiveContent,
DialogPrimitiveDescription,
DialogPrimitiveOverlay,
DialogPrimitivePortal,
DialogPrimitiveTitle,
DialogPrimitiveTrigger,
} from "@channel.io/bezier-react/alpha";