Skip to content

Commit 8dd4071

Browse files
paanSinghCoderclaude
paanSinghCoder
and
claude
authored
feat!(BREAKING CHANGE): remove misused styling props (#828)
* feat!: remove misused styling props Remove one-off styling props that should be handled via className/style, and reshape Callout's `outline` boolean into a `variant` axis. CSS defaults are preserved, so default rendering is unchanged. BREAKING CHANGE: - Callout: removed `width`; `outline` boolean -> `variant="outline"` (new `variant?: 'solid' | 'outline'`, default `solid`; orthogonal to `type`, so `type="success" variant="outline"` still combines) - Button: removed `width`, `maxWidth` - Input: removed `width` - TextArea: removed `width` - List: removed `maxWidth` (root) and `minWidth` (List.Label) - Flex: removed `width="full"` - Dialog.Content: removed `width` - AlertDialog.Content: removed `width` Consumers should migrate these to `style`/`className` (or a sized wrapper). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(input): keep default 100% width on wrapper after removing width prop FilterChip composes Input via classNames.container and relies on the wrapper's inline width:100% (jsdom can't observe the .input-wrapper CSS rule). Dropping the width prop removed that inline default and broke FilterChip's content-fit tests; restore it so composing components stay fluid. Behavior is identical to pre-PR. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(input): remove width prop and related demos * refactor: remove unused style props from multiple components * refactor(tests): remove redundant content-fit width tests for FilterChip * docs: document removed styling props in v1 migration guide Add a 'One-off styling props removed' section (table + migration + className-over-inline-style guidance), and fix stale Dialog/Input/TextArea references that still showed the removed width prop. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent cb680d0 commit 8dd4071

50 files changed

Lines changed: 152 additions & 353 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/www/src/app/docs/[[...slug]]/page.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,13 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
3434
pageTree={docs.pageTree}
3535
source={page.data.source}
3636
/>
37-
<Flex width='full' align='start'>
38-
<Flex direction='column' align='center' justify='center' width='full'>
37+
<Flex style={{ width: '100%' }} align='start'>
38+
<Flex
39+
direction='column'
40+
align='center'
41+
justify='center'
42+
style={{ width: '100%' }}
43+
>
3944
<Flex
4045
direction='column'
4146
className={styles.content}

‎apps/www/src/app/examples/page.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,7 @@ const Page = () => {
320320

321321
<RangePicker
322322
footer={
323-
<Callout width='100%' type='success'>
323+
<Callout style={{ width: '100%' }} type='success'>
324324
Some important message in the footer
325325
</Callout>
326326
}
@@ -1571,7 +1571,7 @@ const Page = () => {
15711571
<Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
15721572

15731573
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
1574-
<Dialog.Content width='500px'>
1574+
<Dialog.Content style={{ width: 500 }}>
15751575
<Dialog.Header>
15761576
<Dialog.Title>Dialog Title</Dialog.Title>
15771577
</Dialog.Header>
@@ -1658,7 +1658,6 @@ const Page = () => {
16581658
<Input
16591659
placeholder='Type to filter...'
16601660
leadingIcon={<MixerHorizontalIcon />}
1661-
width='100%'
16621661
/>
16631662
</Flex>
16641663

@@ -1732,7 +1731,7 @@ const Page = () => {
17321731
open={nestedDialogOpen}
17331732
onOpenChange={setNestedDialogOpen}
17341733
>
1735-
<Dialog.Content width='500px'>
1734+
<Dialog.Content style={{ width: 500 }}>
17361735
<Dialog.Body>
17371736
<Text>This is the nested dialog content. </Text>
17381737
<Flex
@@ -1827,7 +1826,6 @@ const Page = () => {
18271826
<Input
18281827
placeholder='Type to filter...'
18291828
leadingIcon={<MixerHorizontalIcon />}
1830-
width='100%'
18311829
/>
18321830
</Flex>
18331831

‎apps/www/src/app/not-found.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ export default function NotFound() {
66
align='center'
77
justify='center'
88
gap={9}
9-
width='full'
10-
style={{ height: '100vh' }}
9+
style={{ width: '100%', height: '100vh' }}
1110
>
1211
<Headline size='t3' weight='medium' style={{ width: 'auto' }}>
1312
404

‎apps/www/src/components/datatable-demo.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export const columns: DataTableColumnDef<Payment, unknown>[] = [
110110
const DataTableDemo = () => {
111111
const data = useMemo(() => generateData(100), []);
112112
return (
113-
<Flex direction='column' gap={4} width='full'>
113+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
114114
<div style={{ height: 400 }}>
115115
<DataTable
116116
data={data}
@@ -130,7 +130,7 @@ const DataTableVirtualizedDemo = () => {
130130
const data = useMemo(() => generateData(1000), []);
131131

132132
return (
133-
<Flex direction='column' gap={4} width='full'>
133+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
134134
<div style={{ height: 400 }}>
135135
<DataTable
136136
data={data}
@@ -153,8 +153,7 @@ const DataTableSearchDemo = () => {
153153
<Flex
154154
direction='column'
155155
gap={4}
156-
width='full'
157-
style={{ height: 400, padding: '20px' }}
156+
style={{ width: '100%', height: 400, padding: '20px' }}
158157
>
159158
<DataTable
160159
data={data}

‎apps/www/src/components/dataview-demo.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ const defaultSort = { name: 'name', order: 'asc' as const };
186186

187187
export function DataViewTableDemo() {
188188
return (
189-
<Flex direction='column' gap={4} width='full'>
189+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
190190
<div style={{ height: 400 }}>
191191
<DataView data={people} fields={fields} defaultSort={defaultSort}>
192192
<DataView.Toolbar>
@@ -202,7 +202,7 @@ export function DataViewTableDemo() {
202202

203203
export function DataViewListDemo() {
204204
return (
205-
<Flex direction='column' gap={4} width='full'>
205+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
206206
<div style={{ height: 400 }}>
207207
<DataView data={people} fields={fields} defaultSort={defaultSort}>
208208
<DataView.Toolbar>
@@ -217,7 +217,7 @@ export function DataViewListDemo() {
217217

218218
export function DataViewSearchDemo() {
219219
return (
220-
<Flex direction='column' gap={4} width='full'>
220+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
221221
<div style={{ height: 400 }}>
222222
<DataView data={people} fields={fields} defaultSort={defaultSort}>
223223
<DataView.Toolbar>
@@ -242,7 +242,7 @@ export function DataViewMultiViewDemo() {
242242
[]
243243
);
244244
return (
245-
<Flex direction='column' gap={4} width='full'>
245+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
246246
<div style={{ height: 400 }}>
247247
<DataView
248248
data={people}
@@ -266,7 +266,7 @@ export function DataViewMultiViewDemo() {
266266
export function DataViewEmptyZeroDemo() {
267267
const [filtered, setFiltered] = useState(false);
268268
return (
269-
<Flex direction='column' gap={4} width='full'>
269+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
270270
<div style={{ height: 400 }}>
271271
<DataView
272272
data={filtered ? [] : people}
@@ -296,7 +296,7 @@ export function DataViewEmptyZeroDemo() {
296296

297297
export function DataViewCustomDemo() {
298298
return (
299-
<Flex direction='column' gap={4} width='full'>
299+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
300300
<DataView data={people} fields={fields} defaultSort={defaultSort}>
301301
<DataView.Toolbar>
302302
<DataView.Filters />
@@ -386,7 +386,7 @@ function generatePeople(count: number): Person[] {
386386
export function DataViewVirtualizedDemo() {
387387
const data = useMemo(() => generatePeople(1000), []);
388388
return (
389-
<Flex direction='column' gap={4} width='full'>
389+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
390390
<div style={{ height: 400 }}>
391391
<DataView data={data} fields={fields} defaultSort={defaultSort}>
392392
<DataView.Toolbar>
@@ -414,7 +414,7 @@ export function DataViewGroupingDemo() {
414414
// so the sticky group header visibly swaps as the user moves between teams.
415415
const groupedPeople = useMemo(() => generatePeople(60), []);
416416
return (
417-
<Flex direction='column' gap={4} width='full'>
417+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
418418
<div style={{ height: 320 }}>
419419
<DataView
420420
data={groupedPeople}
@@ -446,7 +446,7 @@ export function DataViewGroupingDemo() {
446446
export function DataViewVirtualizedGroupingDemo() {
447447
const data = useMemo(() => generatePeople(1500), []);
448448
return (
449-
<Flex direction='column' gap={4} width='full'>
449+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
450450
<div style={{ height: 360 }}>
451451
<DataView
452452
data={data}
@@ -478,7 +478,7 @@ export function DataViewVirtualizedGroupingDemo() {
478478
export function DataViewLoadingDemo() {
479479
const [isLoading, setIsLoading] = useState(true);
480480
return (
481-
<Flex direction='column' gap={4} width='full'>
481+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
482482
<Flex gap={3} align='center'>
483483
<Button
484484
size='small'
@@ -518,7 +518,7 @@ export function DataViewVirtualizedLoadingDemo() {
518518
const [isLoading, setIsLoading] = useState(true);
519519
const allPeople = useMemo(() => generatePeople(1000), []);
520520
return (
521-
<Flex direction='column' gap={4} width='full'>
521+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
522522
<Flex gap={3} align='center'>
523523
<Button
524524
size='small'
@@ -577,7 +577,7 @@ export function DataViewPerViewFieldsDemo() {
577577
[]
578578
);
579579
return (
580-
<Flex direction='column' gap={4} width='full'>
580+
<Flex direction='column' gap={4} style={{ width: '100%' }}>
581581
<div style={{ height: 400 }}>
582582
<DataView
583583
data={people}

‎apps/www/src/components/docs/footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ type DocsFooterProps = {
1010
export default function DocsFooter({ url }: DocsFooterProps) {
1111
const neighbours = findNeighbour(docs.pageTree, url);
1212
return (
13-
<Flex width='full' justify='between'>
13+
<Flex style={{ width: '100%' }} justify='between'>
1414
{neighbours.previous ? (
1515
<Link href={neighbours.previous.url}>
1616
<Button

‎apps/www/src/components/docs/search.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ export default function DocsSearch({ pageTree }: { pageTree: Root }) {
197197
<MagnifyingGlassIcon />
198198
</Dialog.Trigger>
199199
<Dialog.Content
200-
width={512}
200+
style={{ width: 512 }}
201201
showCloseButton={false}
202202
className={styles.searchContainer}
203203
>

‎apps/www/src/components/docs/sidebar.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,12 @@ export default function DocsSidebar({ pageTree, className }: Props) {
106106
return (
107107
<Sidebar open collapsible={false} className={cx(className, styles.sidebar)}>
108108
<Sidebar.Header className={styles.header}>
109-
<Flex align='center' gap={3} justify='between' width='full'>
109+
<Flex
110+
align='center'
111+
gap={3}
112+
justify='between'
113+
style={{ width: '100%' }}
114+
>
110115
<Link href='/'>
111116
<Logo onlyWordmark />
112117
</Link>

‎apps/www/src/components/playground/alert-dialog-examples.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function AlertDialogExamples() {
1111
<AlertDialog.Trigger render={<Button color='danger' />}>
1212
Delete Item
1313
</AlertDialog.Trigger>
14-
<AlertDialog.Content width='400px'>
14+
<AlertDialog.Content style={{ width: '400px' }}>
1515
<AlertDialog.Header>
1616
<AlertDialog.Title>Are you sure?</AlertDialog.Title>
1717
</AlertDialog.Header>
@@ -37,7 +37,7 @@ export function AlertDialogExamples() {
3737
<AlertDialog.Trigger render={<Button variant='outline' />}>
3838
Discard Changes
3939
</AlertDialog.Trigger>
40-
<AlertDialog.Content width={400}>
40+
<AlertDialog.Content style={{ width: 400 }}>
4141
<AlertDialog.Body>
4242
<AlertDialog.Title>Unsaved Changes</AlertDialog.Title>
4343
<AlertDialog.Description>

‎apps/www/src/components/playground/callout-examples.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export function CalloutExamples() {
1414
<Callout type='accent'>Accent Callout</Callout>
1515
<Callout type='attention'>Attention Callout</Callout>
1616
<Callout type='normal'>Normal Callout</Callout>
17-
<Callout type='success' outline>
17+
<Callout type='success' variant='outline'>
1818
With Outline Callout
1919
</Callout>
2020
<Callout dismissible onDismiss={() => alert('Dismissed!')}>

0 commit comments

Comments
 (0)