diff --git a/packages/manager/.changeset/pr-12261-fixed-1747862074450.md b/packages/manager/.changeset/pr-12261-fixed-1747862074450.md new file mode 100644 index 00000000000..29db545cd6a --- /dev/null +++ b/packages/manager/.changeset/pr-12261-fixed-1747862074450.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +Radio buttons too large on plans table ([#12261](https://github.com/linode/manager/pull/12261)) diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx index 10777770000..563c66b59d6 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelection.tsx @@ -153,6 +153,7 @@ export const PlanSelection = (props: PlanSelectionProps) => { } id={plan.id} onChange={() => onSelect(plan.id)} + size="small" /> } label={plan.heading} @@ -162,6 +163,7 @@ export const PlanSelection = (props: PlanSelectionProps) => { {plan.heading}   {showDisabledTooltip && ( diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx index d687f8720bc..62c8780490e 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx +++ b/packages/manager/src/features/components/PlansPanel/PlanSelectionTable.tsx @@ -130,6 +130,7 @@ export const PlanSelectionTable = (props: PlanSelectionTableProps) => { isPlanCell={isPlanCell} key={testId} noWrap={noWrap} + sx={isPlanCell ? { paddingLeft: 0.5 } : undefined} > {isPlanCell && filterOptions?.header ? filterOptions?.header diff --git a/packages/ui/src/components/Radio/Radio.stories.tsx b/packages/ui/src/components/Radio/Radio.stories.tsx index d87c7293454..40ac58c8d0e 100644 --- a/packages/ui/src/components/Radio/Radio.stories.tsx +++ b/packages/ui/src/components/Radio/Radio.stories.tsx @@ -1,6 +1,6 @@ // @todo: modularization - Import from 'ui' package once FormControlLabel is migrated. import { FormControlLabel } from '@mui/material'; -import React from 'react'; +import React, { useState } from 'react'; import { Box } from '../Box'; import { RadioGroup } from '../RadioGroup'; @@ -9,19 +9,86 @@ import { Radio } from './Radio'; import type { RadioProps } from './Radio'; import type { Meta, StoryObj } from '@storybook/react'; -const meta: Meta = { +interface CustomArgs { + checkedState?: 'checked' | 'unchecked'; + state?: 'active' | 'default' | 'disabled' | 'hover' | 'readonly'; +} + +type RadioStoryProps = RadioProps & CustomArgs; + +const meta: Meta = { args: { - defaultChecked: false, - disableFocusRipple: false, - disableRipple: false, - disableTouchRipple: false, - disabled: false, - name: 'radio', - readOnly: false, + checkedState: 'unchecked', + size: 'medium', + state: 'default', + }, + argTypes: { + state: { + options: ['default', 'disabled', 'readonly', 'hover', 'active'], + control: { type: 'radio' }, + description: 'The state to render', + table: { + type: { summary: 'string' }, + defaultValue: { summary: '"default"' }, + }, + }, + checkedState: { + options: ['unchecked', 'checked'], + control: { type: 'radio' }, + description: 'The checked state of the radio button', + table: { + type: { summary: 'string' }, + defaultValue: { summary: '"unchecked"' }, + }, + }, + size: { + control: { + type: 'radio', + }, + options: ['small', 'medium'], + description: 'The size of the component', + table: { + type: { summary: 'string' }, + defaultValue: { summary: '"medium"' }, + }, + }, + disableRipple: { + control: 'boolean', + description: 'If true, the ripple effect is disabled', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'false' }, + }, + }, + disableFocusRipple: { + control: 'boolean', + description: 'If true, the focus ripple effect is disabled', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'false' }, + }, + }, + disableTouchRipple: { + control: 'boolean', + description: 'If true, the touch ripple effect is disabled', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'false' }, + }, + }, + name: { table: { disable: true } }, + slots: { table: { disable: true } }, + slotProps: { table: { disable: true } }, + component: { table: { disable: true } }, + ref: { table: { disable: true } }, + defaultChecked: { table: { disable: true } }, + disabled: { table: { disable: true } }, + readOnly: { table: { disable: true } }, + checked: { table: { disable: true } }, }, component: Radio, decorators: [ - (Story) => ( + (Story: React.ComponentType) => ( @@ -30,23 +97,176 @@ const meta: Meta = { title: 'Foundations/Radio', }; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { - render: (args: RadioProps) => , + render: (args) => { + const { + state = 'default', + checkedState = 'unchecked', + ...radioProps + } = args; + + let stateProps: Partial = {}; + if (state === 'disabled') { + stateProps = { disabled: true }; + } else if (state === 'readonly') { + stateProps = { readOnly: true }; + } + + let stateStyle = {}; + if (state === 'hover') { + stateStyle = { backgroundColor: 'rgba(0, 0, 0, 0.04)' }; + } else if (state === 'active') { + stateStyle = { backgroundColor: 'rgba(0, 0, 0, 0.08)' }; + } + + const isChecked = checkedState === 'checked'; + + return ( + + + + ); + }, }; -export const Groups: Story = { - name: 'Controlled Radio Groups', +export const Unchecked: Story = { + parameters: { + controls: { disable: true }, + }, + render: () => , +}; + +export const UncheckedDisabled: Story = { + name: 'Unchecked Disabled', + parameters: { + controls: { disable: true }, + }, + render: () => , +}; + +export const UncheckedReadOnly: Story = { + name: 'Unchecked Read Only', + parameters: { + controls: { disable: true }, + }, + render: () => , +}; + +export const Checked: Story = { + parameters: { + controls: { disable: true }, + }, + render: () => , +}; + +export const CheckedDisabled: Story = { + name: 'Checked Disabled', + parameters: { + controls: { disable: true }, + }, + render: () => , +}; + +export const CheckedReadOnly: Story = { + name: 'Checked Read Only', + parameters: { + controls: { disable: true }, + }, + render: () => , +}; + +export const SmallSize: Story = { + name: 'Small Size', + parameters: { + controls: { disable: true }, + }, render: () => ( - + + + + + ), +}; + +const RadioGroupsDemo = (props: { size: 'medium' | 'small' }) => { + const { size } = props; + const [selectedValue, setSelectedValue] = useState('Option 1'); + + const handleChange = (event: React.ChangeEvent) => { + setSelectedValue(event.target.value); + }; + + return ( + } + control={} label="Disabled" + value="Disabled" + /> + } + label="Option 1" + value="Option 1" + /> + } + label="Option 2" + value="Option 2" /> - } label="Option 1" value="Option 1" /> - } label="Option 2" value="Option 2" /> + ); +}; + +interface GroupsArgs { + size: 'medium' | 'small'; +} + +export const Groups: StoryObj = { + name: 'Controlled Radio Groups', + args: { + size: 'medium', + }, + argTypes: { + size: { + control: { + type: 'radio', + }, + options: ['small', 'medium'], + description: 'The size of the component', + table: { + type: { summary: 'string' }, + defaultValue: { summary: '"medium"' }, + }, + }, + }, + render: (args) => { + return ; + }, +}; + +export const WithLabel: Story = { + name: 'With Label', + parameters: { + controls: { disable: true }, + }, + render: () => ( + + } label="Unchecked with label" /> + } + label="Checked with label" + /> + } + label="Disabled with label" + /> + } + label="Checked disabled with label" + /> + ), }; diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts index 38bce07501a..8b1f3e77ce1 100644 --- a/packages/ui/src/foundations/themes/dark.ts +++ b/packages/ui/src/foundations/themes/dark.ts @@ -791,6 +791,11 @@ export const darkTheme: ThemeOptions = { color: theme.palette.primary.main, }, padding: '10px 10px', + '&.MuiRadio-sizeSmall': { + '.MuiSvgIcon-fontSizeSmall': { + fontSize: '16px', + }, + }, }), }, },