Skip to content

IBX-10191: Update various variables and names to match figma changes #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GrabowskiM merged 1 commit into from
Jun 26, 2025
Merged

IBX-10191: Update various variables and names to match figma changes #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/assets/src/scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ $btns-types: (
transparent,
),
),
'black-secondary': (
'secondary-alt': (
'default': (
$color-neutral-240,
transparent,
Expand Down Expand Up @@ -122,7 +122,7 @@ $btns-types: (
$color-neutral-60,
),
),
'black-tertiary': (
'tertiary-alt': (
'default': (
$color-neutral-240,
transparent,
Expand Down Expand Up @@ -153,7 +153,7 @@ $btns-types: (
);

$btns-sizes: (
'large': calculateRem(14px) calculateRem(18px) calculateRem(11px) calculateRem(12px),
'medium': calculateRem(14px) calculateRem(18px) calculateRem(11px) calculateRem(12px),
'small': calculateRem(14px) calculateRem(18px) calculateRem(7px) calculateRem(16px),
'extra-small': calculateRem(10px) calculateRem(15px) calculateRem(4px) calculateRem(8px),
);
Expand Down
21 changes: 11 additions & 10 deletions packages/assets/src/scss/_icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,19 @@
@use 'mixins/icons' as mixins;

$icons-sizes:
'tiny' calculateRem(8px),
'tiny-small' calculateRem(12px),
'small' calculateRem(16px),
'small-medium' calculateRem(20px),
'medium' calculateRem(24px),
'medium-large' calculateRem(38px),
'large' calculateRem(48px),
'extra-large' calculateRem(64px);
'tiny' calculateRem(12px),
'tiny-small' calculateRem(16px),
'small' calculateRem(20px),
'small-medium' calculateRem(24px),
'medium' calculateRem(28px),
'medium-large' calculateRem(32px),
'large' calculateRem(36px),
'large-huge' calculateRem(48px),
'huge' calculateRem(64px);

.ids-icon {
width: calculateRem(32px);
height: calculateRem(32px);
width: calculateRem(16px);
height: calculateRem(16px);
transition: fill 0.3s $transition-timing-function;

@each $name, $size in $icons-sizes {
Expand Down
1 change: 1 addition & 0 deletions packages/assets/src/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,6 @@ $base-line-height: 1.5 !default;

// Various component variables
$border-radius-medium: calculateRem(8px) !default;
$border-radius-large: calculateRem(12px) !default;

$assets-base-path: '/' !default;
16 changes: 8 additions & 8 deletions packages/assets/src/scss/mixins/_headers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
@use 'variables';
@use 'variables' as *;

%heading {
font-family: variables.$font-family-headings;
font-family: $font-family-alt;
font-weight: 600;
}

@mixin h1 {
@extend %heading;
font-size: variables.$h1-font-size;
font-size: $text-font-size-3xl;
}

@mixin h2 {
@extend %heading;
font-size: variables.$h2-font-size;
font-size: $text-font-size-2xl;
}

@mixin h3 {
@extend %heading;
font-size: variables.$h3-font-size;
font-size: $text-font-size-xl;
}

@mixin h4 {
@extend %heading;
font-size: variables.$h4-font-size;
font-size: $text-font-size-l;
}

@mixin h5 {
@extend %heading;
font-size: variables.$h5-font-size;
font-size: $text-font-size-m;
}

@mixin h6 {
@extend %heading;
font-size: variables.$h6-font-size;
font-size: $text-font-size-s;
}
2 changes: 1 addition & 1 deletion packages/assets/src/scss/variables/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,4 @@ $font-family:
'Helvetica Neue',
Arial,
sans-serif !default;
$font-family-headings: 'Work Sans', sans-serif !default;
$font-family-alt: 'Work Sans', 'Futura', 'Avenir Next', 'Trebuchet MS', 'Verdana', sans-serif !default;
6 changes: 3 additions & 3 deletions packages/components/src/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const SecondaryWithExtraAria: Story = {
export const BlackSecondary: Story = {
name: 'Black Secondary',
args: {
type: 'black-secondary',
type: 'secondary-alt',
children: 'Button label',
disabled: false,
},
Expand All @@ -104,7 +104,7 @@ export const BlackSecondary: Story = {
export const BlackSecondarySmall: Story = {
name: 'Black Secondary (Small)',
args: {
type: 'black-secondary',
type: 'secondary-alt',
children: 'Button label',
size: 'small',
},
Expand All @@ -113,7 +113,7 @@ export const BlackSecondarySmall: Story = {
export const BlackSecondaryExtraSmall: Story = {
name: 'Black Secondary (Extra Small)',
args: {
type: 'black-secondary',
type: 'secondary-alt',
children: 'Button label',
size: 'extra-small',
},
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@ const Button = ({
disabled = false,
extraAria = {},
extraClasses = '',
size = 'large',
size = 'medium',
title = '',
type = 'primary',
}: ButtonProps) => {
const classes = createCssClassNames({
'ids-btn': true,
[`ids-btn--${type}`]: !!type,
[`ids-btn--${size}`]: !!size,
[`ids-btn--${type}`]: true,
Copy link
Copy Markdown
Contributor Author

@GrabowskiM GrabowskiM Jun 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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,
Copy link
Copy Markdown
Contributor Author

@GrabowskiM GrabowskiM Jun 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

true probably was ok as '' won't be visible either way, but I prefer this check, it's more clear for me

});
const btnAriaLabel = ariaLabel ?? (typeof children === 'string' ? children : undefined);

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/Button/Button.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { ReactNode } from 'react';

import { BaseComponentAriaAttributes } from '@ids-types/general';

export const BUTTON_SIZE_VALUES = ['large', 'small', 'extra-small'] as const;
export const BUTTON_TYPE_VALUES = ['primary', 'secondary', 'tertiary', 'black-secondary', 'black-tertiary'] as const;
export const BUTTON_SIZE_VALUES = ['medium', 'small', 'extra-small'] as const;
export const BUTTON_TYPE_VALUES = ['primary', 'secondary', 'tertiary', 'secondary-alt', 'tertiary-alt'] as const;

export type ButtonSizeType = (typeof BUTTON_SIZE_VALUES)[number];
export type ButtonTypesType = (typeof BUTTON_TYPE_VALUES)[number];
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/Expander/Expander.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const Expander = ({ onClick, collapseLabel = '', expandLabel = '', hasIcon = tru
onClick(!isExpanded);
}}
size="small"
type="black-tertiary"
type="tertiary-alt"
>
{label}
{renderExpanderIcon()}
Expand Down
14 changes: 11 additions & 3 deletions packages/components/src/Icon/Icon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,19 @@ export const IconLarge: Story = {
},
};

export const IconExtraLarge: Story = {
name: 'Icon Extra-Large',
export const IconLargeHuge: Story = {
name: 'Icon Large-Huge',
args: {
name: 'bookmark',
size: 'extra-large',
size: 'large-huge',
},
};

export const IconHuge: Story = {
name: 'Icon Huge',
args: {
name: 'bookmark',
size: 'huge',
},
};

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/Icon/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import { createCssClassNames } from '@ids-internal/shared/css.class.names';

import { IconProps } from './Icon.types';

const Icon = ({ cssClass = '', name, customPath, size = undefined }: IconProps) => {
const Icon = ({ cssClass = '', name, customPath, size = 'small' }: IconProps) => {
Copy link
Copy Markdown
Contributor Author

@GrabowskiM GrabowskiM Jun 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adjust to other components that doesn't allow for undefined values, "default" (without size modifier) is same as "small" in css

const { getIconPath }: { getIconPath: GetIconPathType } = useContext<AssetsType>(AssetsContext);
const classes = createCssClassNames({
'ids-icon': true,
[`ids-icon--${size ?? ''}`]: !!size,
[`ids-icon--${size}`]: true,
[cssClass]: !!cssClass,
});
const linkHref = customPath ?? getIconPath(name);
Expand Down
14 changes: 12 additions & 2 deletions packages/components/src/Icon/Icon.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,20 @@
export const ICON_SIZE_VALUES = ['tiny', 'tiny-small', 'small', 'small-medium', 'medium', 'medium-large', 'large', 'extra-large'] as const;
export const ICON_SIZE_VALUES = [
'tiny',
'tiny-small',
'small',
'small-medium',
'medium',
'medium-large',
'large',
'large-huge',
'huge',
] as const;

export type IconSizeType = (typeof ICON_SIZE_VALUES)[number];

interface IconSharedProps {
cssClass?: string;
size: (typeof ICON_SIZE_VALUES)[number] | undefined;
size?: (typeof ICON_SIZE_VALUES)[number];
}
interface IconCustomPathProps extends IconSharedProps {
customPath: string;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/Label/Label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const Label = ({ children, htmlFor, error = false, extraClasses = '', required =
'ids-label': true,
'ids-label--error': error,
'ids-label--required': required,
[extraClasses]: true,
[extraClasses]: !!extraClasses,
});

return (
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/internal/partials/BaseInput/BaseInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ const BaseInput = ({
const componentId = id ?? `${INPUT_ID_PREFIX}${componentGeneratedNumberId.toString()}`;
const classes = createCssClassNames({
'ids-input': true,
[`ids-input--${type}`]: !!type,
[`ids-input--${size}`]: !!size,
[`ids-input--${type}`]: true,
[`ids-input--${size}`]: true,
'ids-input--disabled': disabled,
'ids-input--error': error,
'ids-input--required': required,
[extraClasses]: true,
[extraClasses]: !!extraClasses,
});

return (
Expand Down