Skip to content

[v12 WIP] migrate buttons to the new theme - part 1 #2340

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

Open
balzss wants to merge 1 commit into
base: v12
Choose a base branch
from
+25 −50
Open

[v12 WIP] migrate buttons to the new theme - part 1 #2340

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
5 changes: 2 additions & 3 deletions packages/ui-buttons/src/BaseButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -55,7 +54,7 @@ category: components/utilities
---
**/

@withStyle(generateStyles, generateComponentTheme)
@withStyle(generateStyles)
class BaseButton extends Component<BaseButtonProps> {
static readonly componentId = 'BaseButton'

Expand Down
70 changes: 23 additions & 47 deletions packages/ui-buttons/src/BaseButton/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
* SOFTWARE.
*/

import type { BaseButtonTheme } from '@instructure/shared-types'
import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
import type {
BaseButtonProps,
BaseButtonStyleProps,
Expand All @@ -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,
Expand All @@ -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%' },
Expand All @@ -69,65 +60,50 @@ 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: {
content: {
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: {
content: {
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'
}
}
}
Expand Down Expand Up @@ -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%' })
}
Expand All @@ -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',
Expand Down Expand Up @@ -455,8 +434,6 @@ const generateStyle = (
label: 'baseButton__children',
display: 'block',

...sizeVariants[size!].children,

...(isCondensed && {
paddingTop: 0,
paddingBottom: 0
Expand Down Expand Up @@ -510,9 +487,8 @@ const generateStyle = (
label: 'baseButton__iconWrapper',
boxSizing: 'border-box',
minWidth: '0.0625rem',
paddingInlineEnd: isCondensed
? componentTheme.iconTextGapCondensed
: componentTheme.iconTextGap,
// TODO
Copy link
Contributor Author

@balzss balzss Jan 13, 2026

Choose a reason for hiding this comment

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

this should be reverted to the original tokens. the reason it was changed because the tokens were temporarily removed (a rebase might needed for them to work)

paddingInlineEnd: isCondensed ? '0.375rem' : '',
flexShrink: 0,
maxWidth: '100%',
overflowX: 'visible',
Expand Down
Loading