IBX-10191: Update various variables and names to match figma changes#7
IBX-10191: Update various variables and names to match figma changes#7GrabowskiM merged 1 commit intomainfrom
Conversation
There was a problem hiding this comment.
Pull Request Overview
This pull request updates variable names and values to align with the latest Figma design changes. Key changes include:
- Updates to component classes and default prop values across multiple UI components.
- Renaming and value adjustments for icon sizes, button types, and SCSS variables to reflect the new design tokens.
- Revision of SCSS mixins and variables to support updated typography and spacing requirements.
Reviewed Changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/internal/partials/BaseInput/BaseInput.tsx | Updated class name generation pattern with unconditional inclusion of type and size. |
| packages/components/src/Label/Label.tsx | Updated class name generation for extraClasses with boolean conversion. |
| packages/components/src/Icon/Icon.types.ts | Renamed and updated icon size values and made size prop optional. |
| packages/components/src/Icon/Icon.tsx | Changed default size from undefined to 'small' and updated class name generation. |
| packages/components/src/Icon/Icon.stories.tsx | Renamed story exports and updated icon size references. |
| packages/components/src/Expander/Expander.tsx | Updated expander type value for design consistency. |
| packages/components/src/Button/Button.types.ts | Adjusted button size and type values according to new design tokens. |
| packages/components/src/Button/Button.tsx | Updated default prop values and class name generation for consistency with design updates. |
| packages/components/src/Button/Button.stories.tsx | Updated button story names and prop values to match new design terminology. |
| packages/assets/src/scss/variables/_typography.scss | Introduced a new alternative font family variable. |
| packages/assets/src/scss/mixins/_headers.scss | Updated mixin font-family and font-size references to use new typography variables. |
| packages/assets/src/scss/_variables.scss | Added a new border-radius variable. |
| packages/assets/src/scss/_icons.scss | Revised icon size mappings and adjusted default icon dimensions. |
| packages/assets/src/scss/_buttons.scss | Updated button type and size mappings to reflect the updated design tokens. |
Comments suppressed due to low confidence (2)
packages/components/src/Icon/Icon.tsx:9
- Since the default value for 'size' has changed from undefined to 'small', consider updating inline documentation or type comments to clearly indicate this new default behavior.
const Icon = ({ cssClass = '', name, customPath, size = 'small' }: IconProps) => {
packages/assets/src/scss/_icons.scss:17
- Icon dimensions have been significantly reduced from calculateRem(32px) to calculateRem(16px). Please verify that this change is fully aligned with the new design specifications and layout requirements.
width: calculateRem(16px);
| 'ids-btn': true, | ||
| [`ids-btn--${type}`]: !!type, | ||
| [`ids-btn--${size}`]: !!size, | ||
| [`ids-btn--${type}`]: true, |
There was a problem hiding this comment.
as we use TypeScript both type and size accepts only specific string values, so both these conditions always be true
| [`ids-btn--${size}`]: true, | ||
| 'ids-btn--disabled': disabled, | ||
| [extraClasses]: true, | ||
| [extraClasses]: !!extraClasses, |
There was a problem hiding this comment.
true probably was ok as '' won't be visible either way, but I prefer this check, it's more clear for me
| import { IconProps } from './Icon.types'; | ||
|
|
||
| const Icon = ({ cssClass = '', name, customPath, size = undefined }: IconProps) => { | ||
| const Icon = ({ cssClass = '', name, customPath, size = 'small' }: IconProps) => { |
There was a problem hiding this comment.
adjust to other components that doesn't allow for undefined values, "default" (without size modifier) is same as "small" in css
Description:
For QA:
Documentation: