From 028b4e0f8df75f61c61ce41ce1baf43ac15f1620 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20S=C3=A1ros?= Date: Thu, 8 Jan 2026 15:43:18 +0100 Subject: [PATCH] migrate buttons to the new theme - part 1 --- packages/ui-buttons/src/BaseButton/index.tsx | 5 +- packages/ui-buttons/src/BaseButton/styles.ts | 70 +++++++------------- 2 files changed, 25 insertions(+), 50 deletions(-) diff --git a/packages/ui-buttons/src/BaseButton/index.tsx b/packages/ui-buttons/src/BaseButton/index.tsx index 103d973438..f86bee237a 100644 --- a/packages/ui-buttons/src/BaseButton/index.tsx +++ b/packages/ui-buttons/src/BaseButton/index.tsx @@ -41,10 +41,9 @@ import type { ViewProps } from '@instructure/ui-view' import { isSafari } from '@instructure/ui-utils' import { combineDataCid } from '@instructure/ui-utils' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import generateStyles from './styles' -import generateComponentTheme from './theme' import { allowedProps } from './props' import type { BaseButtonProps, BaseButtonStyleProps } from './props' @@ -55,7 +54,7 @@ category: components/utilities --- **/ -@withStyle(generateStyles, generateComponentTheme) +@withStyle(generateStyles) class BaseButton extends Component { static readonly componentId = 'BaseButton' diff --git a/packages/ui-buttons/src/BaseButton/styles.ts b/packages/ui-buttons/src/BaseButton/styles.ts index 7837346d79..a3f35eebc3 100644 --- a/packages/ui-buttons/src/BaseButton/styles.ts +++ b/packages/ui-buttons/src/BaseButton/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { BaseButtonTheme } from '@instructure/shared-types' +import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' import type { BaseButtonProps, BaseButtonStyleProps, @@ -31,20 +31,11 @@ import type { import { darken, lighten } from '@instructure/ui-color-utils' -/** - * --- - * private: true - * --- - * Generates the style object from the theme and provided additional information - * @param {Object} componentTheme The theme variable object. - * @param {Object} props the props of the component, the style is applied to - * @param {Object} state the state of the component, the style is applied to - * @return {Object} The final style object, which will be used in the component - */ const generateStyle = ( - componentTheme: BaseButtonTheme, - props: BaseButtonProps, - state: BaseButtonStyleProps + componentTheme: NewComponentTypes['BaseButton'], + params: BaseButtonProps, + _sharedTokens: SharedTokens, + extraArgs: BaseButtonStyleProps ): BaseButtonStyle => { const { size, @@ -54,9 +45,9 @@ const generateStyle = ( withBackground, withBorder, isCondensed - } = props + } = params - const { isDisabled, hasOnlyIconVisible, isEnabled } = state + const { isDisabled, hasOnlyIconVisible, isEnabled } = extraArgs const shapeVariants = { circle: { borderRadius: '50%' }, @@ -69,21 +60,16 @@ const generateStyle = ( fontSize: componentTheme.smallFontSize, paddingLeft: componentTheme.smallPaddingHorizontal, paddingRight: componentTheme.smallPaddingHorizontal, + height: componentTheme.smallHeight, ...(hasOnlyIconVisible && { paddingLeft: 0, paddingRight: 0, - height: componentTheme.smallHeight, width: componentTheme.smallHeight }) }, - children: { - paddingTop: componentTheme.smallPaddingTop, - paddingBottom: componentTheme.smallPaddingBottom - }, iconSVG: { - fontSize: isCondensed - ? componentTheme.smallFontSize - : componentTheme.iconSizeSmall + // TODO + fontSize: isCondensed ? componentTheme.smallFontSize : '1rem' } }, medium: { @@ -91,21 +77,16 @@ const generateStyle = ( fontSize: componentTheme.mediumFontSize, paddingLeft: componentTheme.mediumPaddingHorizontal, paddingRight: componentTheme.mediumPaddingHorizontal, + height: componentTheme.mediumHeight, ...(hasOnlyIconVisible && { paddingLeft: 0, paddingRight: 0, - height: componentTheme.mediumHeight, width: componentTheme.mediumHeight }) }, - children: { - paddingTop: componentTheme.mediumPaddingTop, - paddingBottom: componentTheme.mediumPaddingBottom - }, iconSVG: { - fontSize: isCondensed - ? componentTheme.mediumFontSize - : componentTheme.iconSizeMedium + // TODO + fontSize: isCondensed ? componentTheme.mediumFontSize : '1.25rem' } }, large: { @@ -113,21 +94,16 @@ const generateStyle = ( fontSize: componentTheme.largeFontSize, paddingLeft: componentTheme.largePaddingHorizontal, paddingRight: componentTheme.largePaddingHorizontal, + height: componentTheme.largeHeight, ...(hasOnlyIconVisible && { paddingLeft: 0, paddingRight: 0, - height: componentTheme.largeHeight, width: componentTheme.largeHeight }) }, - children: { - paddingTop: componentTheme.largePaddingTop, - paddingBottom: componentTheme.largePaddingBottom - }, iconSVG: { - fontSize: isCondensed - ? componentTheme.largeFontSize - : componentTheme.iconSizeLarge + // TODO + fontSize: isCondensed ? componentTheme.largeFontSize : '1.625rem' } } } @@ -390,7 +366,9 @@ const generateStyle = ( padding: componentTheme.borderWidth, ...(shape !== 'circle' ? { - borderRadius: `calc(${componentTheme.borderRadius} + ${componentTheme.borderWidth})` + borderRadius: `calc(${componentTheme.borderRadius} + ${ + componentTheme.borderWidth + })` } : { borderRadius: '50%' }) } @@ -406,7 +384,8 @@ const generateStyle = ( label: 'baseButton__content', boxSizing: 'border-box', width: '100%', - display: 'block', + display: 'flex', + alignItems: 'center', direction: 'inherit', userSelect: 'none', transition: 'background 0.2s, transform 0.2s', @@ -455,8 +434,6 @@ const generateStyle = ( label: 'baseButton__children', display: 'block', - ...sizeVariants[size!].children, - ...(isCondensed && { paddingTop: 0, paddingBottom: 0 @@ -510,9 +487,8 @@ const generateStyle = ( label: 'baseButton__iconWrapper', boxSizing: 'border-box', minWidth: '0.0625rem', - paddingInlineEnd: isCondensed - ? componentTheme.iconTextGapCondensed - : componentTheme.iconTextGap, + // TODO + paddingInlineEnd: isCondensed ? '0.375rem' : '', flexShrink: 0, maxWidth: '100%', overflowX: 'visible',