Skip to content

Commit 3360f15

Browse files
committed
feat(ui-buttons): migrate buttons to updated theme
Reworked Button, CondensedButton, and IconButton theming: - Removed individual component theme.ts files in favor of centralized BaseButton styles - Updated icon sizing inside buttons - Fixed button active state - Added condensed size and disabled variant styling - Set AI button to use transparent background - Migrated button wrapper components to new theme structure
1 parent be21a61 commit 3360f15

12 files changed

Lines changed: 244 additions & 208 deletions

File tree

packages/ui-buttons/src/BaseButton/index.tsx

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@ import keycode from 'keycode'
2828
import {
2929
getElementType,
3030
getInteraction,
31-
passthroughProps,
32-
callRenderProp
31+
passthroughProps
3332
} from '@instructure/ui-react-utils'
3433
import { isActiveElement } from '@instructure/ui-dom-utils'
3534
import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
35+
import { renderIconWithProps } from '@instructure/ui-icons'
3636
import { View } from '@instructure/ui-view'
3737
import type { ViewProps } from '@instructure/ui-view'
3838

@@ -41,10 +41,9 @@ import type { ViewProps } from '@instructure/ui-view'
4141
import { isSafari } from '@instructure/ui-utils'
4242
import { combineDataCid } from '@instructure/ui-utils'
4343

44-
import { withStyleRework as withStyle } from '@instructure/emotion'
44+
import { withStyle } from '@instructure/emotion'
4545

4646
import generateStyles from './styles'
47-
import generateComponentTheme from './theme'
4847

4948
import { allowedProps } from './props'
5049
import type { BaseButtonProps, BaseButtonStyleProps } from './props'
@@ -55,7 +54,15 @@ category: components/utilities
5554
---
5655
**/
5756

58-
@withStyle(generateStyles, generateComponentTheme)
57+
const buttonSizeToIconSize = {
58+
small: 'sm',
59+
medium: 'md',
60+
large: 'lg',
61+
condensedSmall: 'xs',
62+
condensedMedium: 'xs'
63+
} as const
64+
65+
@withStyle(generateStyles)
5966
class BaseButton extends Component<BaseButtonProps> {
6067
static readonly componentId = 'BaseButton'
6168

@@ -201,7 +208,7 @@ class BaseButton extends Component<BaseButtonProps> {
201208
}
202209

203210
renderChildren() {
204-
const { renderIcon, children, styles } = this.props
211+
const { renderIcon, children, styles, size } = this.props
205212

206213
const wrappedChildren = <span css={styles?.children}>{children}</span>
207214

@@ -210,8 +217,11 @@ class BaseButton extends Component<BaseButtonProps> {
210217
}
211218

212219
const { hasOnlyIconVisible } = this
220+
const iconSize = buttonSizeToIconSize[size!]
213221
const wrappedIcon = (
214-
<span css={styles?.iconSVG}>{callRenderProp(renderIcon)}</span>
222+
<span css={styles?.iconSVG}>
223+
{renderIconWithProps(renderIcon, iconSize, 'inherit')}
224+
</span>
215225
)
216226

217227
const flexChildren = hasOnlyIconVisible ? (

packages/ui-buttons/src/BaseButton/props.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ type BaseButtonOwnProps = {
5353
/**
5454
* The size of the `Button`
5555
*/
56-
size?: 'small' | 'medium' | 'large'
56+
size?: 'small' | 'medium' | 'large' | 'condensedSmall' | 'condensedMedium'
5757

5858
/**
5959
* Provides a reference to the `Button`'s underlying html element.

0 commit comments

Comments
 (0)