@channel.io/[email protected]

Patch Changes

• Implement AlphaAvatar component. (#2162) by @yangwooseong

• Add AlphaAvatarGroup component (#2177) by @yangwooseong

• Updated dependencies

  • @channel.io/[email protected]

@channel.io/[email protected]

Patch Changes

• Add "color" prefix to alpha color tokens and fix misnaming of alpha font/typography tokens. (#2152) by @sungik-choi

@channel.io/[email protected]

Patch Changes

• Fixes an issue where injecting className into FormLabel, FormHelperText inside a FormControl does not apply styles correctly. (#2156) by @sungik-choi

• Updated dependencies

  • @channel.io/[email protected]

@channel.io/[email protected]

Minor Changes

• Add ref value to design tokens of alpha version. (#2135) by @sungik-choi

• Add design tokens for next(alpha) version. (#2132) by @sungik-choi

Patch Changes

• Modify alpha design tokens according to figma design (#2138) by @yangwooseong

@channel.io/[email protected]

Patch Changes

• 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

  • @channel.io/[email protected]

@channel.io/[email protected]

Minor Changes

• 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

Patch Changes

• Remove duplicate styles in styles.css (#1779) by @sungik-choi

@channel.io/[email protected]

Major Changes

• 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

  • Remove color prop of TagProps and TagBadgeBgColorPreset.
  • Remove TagBadgeSize. Please change it to TagSize and BadgeSize.
  • Remove 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

  • No longer support interpolation property. Replace any usage of interpolation property with appropriate style or className implementations.
  • No longer support iconStyle, iconClassName, iconInterpolation, contentStyle, contentClassName and contentInterpolation. This decision was made to reduce excessive flexibility in the interface.
  • No longer support leftIcon property. Removed for consistency with other component interfaces. Replace it to leftContent.
  • No longer support name property. The second argument (name) of onClick is also removed. If you need an identifier, combine functions outside of the component.
  • No longer support hide, nested, optionKey and disableIconActive property. Removed because it is a legacy property. Replace hide property with conditional rendering.
  • The size changes according to the 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:

  • Fix incorrect text size for XL(now L) size.

• Breaking Changes: Property updates in Overlay component (#1949) by @sungik-choi

  • No longer support as and interpolation property. Replace any usage of interpolation property with appropriate style or className implementations.
  • No longer support containerInterpolation property. Replace any usage of containerInterpolation property with appropriate containerStyle or containerClassName implementations.
  • No longer support wrapperTestId property.

• Breaking Changes: Remove TooltipProvider and Property updates in Tooltip component (#1974) by @sungik-choi

  • No longer support 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:

  • Change the default value of 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

  • No longer support interpolation property. Replace any usage of interpolation property with appropriate style or className implementations.
  • No longer support contentInterpolation property. Replace any usage of contentInterpolation property with appropriate contentStyle or contentClassName implementations.
  • No longer support 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

  • No longer support as and interpolation property. Replace any usage of interpolation property with appropriate style or className implementations.
  • Now supports margin props, layout props and 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.
  • The size property of 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

  • No longer support as and interpolation property. Replace any usage of interpolation property with appropriate style or className implementations.
  • No longer support dropdownInterpolation property. Replace any usage of dropdownInterpolation property with appropriate dropdownStyle or dropdownClassName implementations.
  • The type of 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 ...

@channel.io/[email protected]

Minor Changes

• 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

  • It will properly remove import statement if it converts code where TransitionDuration is used.

• Changes in v2-remove-alpha-from-alpha-stack transform (#1894) by @yangwooseong

  • It is renamed as v2-remove-alpha-from-alpha-components.
  • It covers 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

  • it is renamed to v2-interpolation-to-css-variable-**. e.g. v2-interpolation-to-css-varable-input, v2-interpolation-to-css-variable-typography, and so on
  • it provides integrated transform named v2-interpolation-to-css-variable that handles all interpolation transform

• Enhance 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

Patch Changes

• 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

@channel.io/[email protected]

Major Changes

• Breaking changes: Remove TagBadge-related types (#2114) by @sungik-choi

  • Remove color prop of TagProps and TagBadgeBgColorPreset.
  • Remove TagBadgeSize. Please change it to TagSize and BadgeSize.
  • Remove 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.

@channel.io/[email protected]

Minor Changes

• Update icons (#2098) by @Jamie-channel

  Modified

  • channel-btn.svg
  • channel-smile-filled.svg

• Update icons (#2105) by @Jamie-channel

  Deleted

  • channel-btn-smile-filled.svg
  • channel-smile-filled.svg
  • channel-smile.svg

  Modified

  • chat-bubble-filled.svg