Skip to content

Dechonk the UI: default controls to the small size variant #4088

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

Draft
wailingwombat wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Dechonk the UI: default controls to the small size variant #4088

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4d195a3
feat(design-system): default buttons, inputs and selects to the small…
cursoragent Aug 31, 2026
33815a0
feat(design-system): tighten dropdown list item padding
cursoragent Aug 31, 2026
a16e946
refactor(design-system): simplify size resolution and note the swallo…
cursoragent Aug 31, 2026
aeace24
fix(design-system): let an explicit small prop win over medium
cursoragent Aug 31, 2026
8a8327d
fix(design-system): scope the legacy input type change to single-line…
cursoragent Aug 31, 2026
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
4 changes: 3 additions & 1 deletion assets/design-system/src/components/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export type ButtonProps = {
innerFlexProps?: FlexProps
// flags- keeping this pattern instead of using "size" and "type" for backwards compatibility
small?: boolean
medium?: boolean
large?: boolean
primary?: boolean
secondary?: boolean
Expand Down Expand Up @@ -75,6 +76,7 @@ const Button = memo(
disabled,
children,
small,
medium,
large,
secondary,
tertiary,
Expand All @@ -97,7 +99,7 @@ const Button = memo(
'auto'
)

const buttonSize = large ? 'large' : small ? 'small' : 'medium'
const buttonSize = large ? 'large' : medium && !small ? 'medium' : 'small'
const buttonType = secondary
? 'secondary'
: tertiary
Expand Down
3 changes: 2 additions & 1 deletion assets/design-system/src/components/Input2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,7 @@ function Input2({
titleContent,
size,
small,
medium,
large,
raised = false,
onEnter,
Expand Down Expand Up @@ -288,7 +289,7 @@ function Input2({

const parentFillLevel = useFillLevel()

size = size || (large ? 'large' : small ? 'small' : 'medium')
size = size || (large ? 'large' : medium && !small ? 'medium' : 'small')

inputProps = mergeProps(useFormField()?.fieldProps ?? {}, inputProps)

Expand Down
4 changes: 2 additions & 2 deletions assets/design-system/src/components/ListBoxItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const ListBoxItemInner = styled.div<Partial<ListBoxItemProps>>(
alignItems: 'center',
position: 'relative',
width: 'auto',
padding: `${theme.spacing.xsmall}px ${theme.spacing.medium}px`,
padding: `${theme.spacing.xxsmall}px ${theme.spacing.small}px`,
backgroundColor: 'none',
cursor: 'pointer',
'&:hover': {
Expand Down Expand Up @@ -147,7 +147,7 @@ const ListBoxFooterInner = styled.button<{ $focused?: boolean }>(
display: 'flex',
position: 'relative',
width: '100%',
padding: `${theme.spacing.small}px ${theme.spacing.medium}px`,
padding: `${theme.spacing.xsmall}px ${theme.spacing.small}px`,
'&:hover': {
backgroundColor:
theme.mode === 'light'
Expand Down
6 changes: 3 additions & 3 deletions assets/design-system/src/components/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ const SelectButtonInner = styled.div<{
display: 'flex',
flexDirection: 'row',
flexShrink: 1,
padding: `${size === 'medium' ? 9 : 5}px ${theme.spacing.medium}px`,
padding: `${size === 'large' ? 13 : size === 'medium' ? 9 : 5}px ${theme.spacing.medium}px`,
width: '100%',
'.children': {
flexGrow: 1,
Expand Down Expand Up @@ -221,7 +221,7 @@ function SelectButton({
children,
showArrow = true,
isOpen,
size = 'medium',
size = 'small',
transparent = false,
isDisabled,
...props
Expand Down Expand Up @@ -299,7 +299,7 @@ function Select({
name,
triggerButton,
placement,
size = 'medium',
size = 'small',
width,
maxHeight,
transparent = false,
Expand Down
13 changes: 9 additions & 4 deletions assets/design-system/src/theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,8 +203,12 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => {
{
width: '100%',
flex: '1 1',
height: '38px',
lineHeight: '38px',
height: '30px',
lineHeight: '30px',
// caption type, written out because the `caption` alias resolves from
// props and would drag its own 16px line height along with it
fontSize: 12,
letterSpacing: '0.5px',
color: 'text',
_placeholder: {
color: 'text-xlight',
Expand All @@ -219,6 +223,7 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => {
large && {
height: '46px',
lineHeight: '46px',
fontSize: 14,
},
({ disabled }: any) =>
disabled && {
Expand All @@ -234,8 +239,8 @@ const getHonorableThemeProps = ({ mode }: { mode: ColorMode }) => {
paddingLeft: 'medium',
paddingRight: 'medium',
lineHeight: 'inherit',
paddingTop: 9,
paddingBottom: 9,
paddingTop: 7,
paddingBottom: 7,
},
({ small }: any) =>
small && {
Expand Down
Loading