Skip to content

Commit bd47899

Browse files
jinlee93booc0mtaco
jinlee93
authored and
booc0mtaco
committed
refactor(toolbar)!: remove component (#1683)
* refactor(toolbar)!: remove component * refactor(toolbar)!: remove the subcomponents too * fix: remove some padding
1 parent 669081d commit bd47899

File tree

14 files changed

+92
-547
lines changed

14 files changed

+92
-547
lines changed

‎.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx

+14-20
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@ import {
3232
TableHeaderCell,
3333
TableRow,
3434
Text,
35-
Toolbar,
36-
ToolbarItem,
3735
} from '../../../src';
3836

3937
import type { NewState } from '../../../src/components/DragDrop/DragDrop';
@@ -431,19 +429,17 @@ export const CoursePlannerEdit = () => {
431429
emptyContent: container1EmptyContent(),
432430
header: (
433431
<DragDropContainerHeader>
434-
<Toolbar className="!mb-4" variant="bare">
435-
<ToolbarItem>
436-
<Heading as="h2" size="title-sm" variant="neutral-strong">
437-
Available projects
438-
</Heading>
439-
</ToolbarItem>
440-
<ToolbarItem align="right">
432+
<div className="mb-4 flex items-center gap-4">
433+
<Heading as="h2" size="title-sm" variant="neutral-strong">
434+
Available projects
435+
</Heading>
436+
<div className="ml-auto">
441437
<Button variant="icon">
442438
<Icon name="add" purpose="decorative" />
443439
Add project
444440
</Button>
445-
</ToolbarItem>
446-
</Toolbar>
441+
</div>
442+
</div>
447443
</DragDropContainerHeader>
448444
),
449445
},
@@ -452,19 +448,17 @@ export const CoursePlannerEdit = () => {
452448
emptyContent: container2EmptyContent(),
453449
header: (
454450
<DragDropContainerHeader>
455-
<Toolbar className="!mb-4" variant="bare">
456-
<ToolbarItem>
457-
<Heading as="h2" size="title-sm" variant="neutral-strong">
458-
Planned projects
459-
</Heading>
460-
</ToolbarItem>
461-
<ToolbarItem align="right">
451+
<div className="mb-4 flex items-center gap-4">
452+
<Heading as="h2" size="title-sm" variant="neutral-strong">
453+
Planned projects
454+
</Heading>
455+
<div className="ml-auto">
462456
<Button variant="icon">
463457
<Icon name="add" purpose="decorative" />
464458
Add project
465459
</Button>
466-
</ToolbarItem>
467-
</Toolbar>
460+
</div>
461+
</div>
468462
</DragDropContainerHeader>
469463
),
470464
},

‎.storybook/pages/FeedbackOverview/FeedbackOverview.module.css

-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
@import '../../../src/design-tokens/mixins.css';
22

3-
.feedback-overview__toolbar {
4-
padding-bottom: var(--eds-size-2);
5-
}
6-
73
.feedback-overview__card-header {
84
margin-bottom: var(--eds-size-1);
95
font: var(--eds-theme-typography-title-md);

‎.storybook/pages/FeedbackOverview/FeedbackOverview.tsx

+14-26
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ import {
1414
Table,
1515
Text,
1616
TimelineNav,
17-
Toolbar,
18-
ToolbarItem,
1917
} from '../../../src';
2018

2119
import breakpoint from '../../../src/design-tokens/tier-1-definitions/breakpoints';
@@ -208,16 +206,11 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
208206
<Tab title="Feedback">
209207
<TimelineNav activeIndex={activeIndex}>
210208
<TimelineNav.Panel title="Overview">
211-
<Toolbar
212-
className={styles['feedback-overview__toolbar']}
213-
variant="bare"
214-
>
215-
<ToolbarItem>
216-
<Heading as="h2" size="headline-md">
217-
Feedback Overview
218-
</Heading>
219-
</ToolbarItem>
220-
<ToolbarItem align="right">
209+
<div className="flex items-center gap-4 pb-4">
210+
<Heading as="h2" size="headline-md">
211+
Feedback Overview
212+
</Heading>
213+
<div className="ml-auto">
221214
<Button size="md" status="brand" variant="secondary">
222215
<Icon
223216
name="filter-list"
@@ -226,8 +219,8 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
226219
/>
227220
Filters
228221
</Button>
229-
</ToolbarItem>
230-
</Toolbar>
222+
</div>
223+
</div>
231224
{isTable && (
232225
<Table>
233226
<Table.Header>
@@ -405,16 +398,11 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
405398
}
406399
variant="number"
407400
>
408-
<Toolbar
409-
className={styles['feedback-overview__toolbar']}
410-
variant="bare"
411-
>
412-
<ToolbarItem>
413-
<Heading as="h2" size="h3">
414-
Checkpoint Progress
415-
</Heading>
416-
</ToolbarItem>
417-
<ToolbarItem align="right">
401+
<div className="flex items-center gap-4 pb-4">
402+
<Heading as="h2" size="h3">
403+
Checkpoint Progress
404+
</Heading>
405+
<div className="ml-auto">
418406
<Button size="md" status="brand" variant="secondary">
419407
<Icon
420408
name="filter-list"
@@ -423,8 +411,8 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
423411
/>
424412
Filters
425413
</Button>
426-
</ToolbarItem>
427-
</Toolbar>
414+
</div>
415+
</div>
428416
{isTable && (
429417
<Table>
430418
<Table.Header>

‎src/components/DragDrop/DragDrop.stories.tsx

+36-45
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
Heading,
1111
Icon,
1212
Text,
13-
Toolbar,
1413
} from '../..';
1514
import styles from './DragDrop.stories.module.css';
1615

@@ -91,11 +90,11 @@ export const Default: StoryObj<Args> = {
9190
itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
9291
header: (
9392
<DragDropContainerHeader>
94-
<Toolbar>
93+
<div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
9594
<Heading as="h5" size="h5">
9695
Available Projects
9796
</Heading>
98-
</Toolbar>
97+
</div>
9998
</DragDropContainerHeader>
10099
),
101100
},
@@ -298,11 +297,11 @@ export const Default: StoryObj<Args> = {
298297
),
299298
header: (
300299
<DragDropContainerHeader>
301-
<Toolbar>
300+
<div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
302301
<Heading as="h5" size="h5">
303302
Selected Projects
304303
</Heading>
305-
</Toolbar>
304+
</div>
306305
</DragDropContainerHeader>
307306
),
308307
},
@@ -365,11 +364,11 @@ export const HoveredHandle: StoryObj<Args> = {
365364
itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
366365
header: (
367366
<DragDropContainerHeader>
368-
<Toolbar>
367+
<div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
369368
<Heading as="h5" size="h5">
370369
Available Projects
371370
</Heading>
372-
</Toolbar>
371+
</div>
373372
</DragDropContainerHeader>
374373
),
375374
},
@@ -492,11 +491,11 @@ export const HoveredHandle: StoryObj<Args> = {
492491
),
493492
header: (
494493
<DragDropContainerHeader>
495-
<Toolbar>
494+
<div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
496495
<Heading as="h5" size="h5">
497496
Selected Projects
498497
</Heading>
499-
</Toolbar>
498+
</div>
500499
</DragDropContainerHeader>
501500
),
502501
},
@@ -520,19 +519,17 @@ const InteractiveDragDrop = () => {
520519
itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
521520
header: (
522521
<DragDropContainerHeader>
523-
<Toolbar className="!mb-4" variant="bare">
524-
<Toolbar.Item>
525-
<Heading as="h2" size="title-sm" variant="neutral-strong">
526-
Available projects
527-
</Heading>
528-
</Toolbar.Item>
529-
<Toolbar.Item align="right">
522+
<div className="bg-neutral-subtle mb-4 flex items-center gap-4">
523+
<Heading as="h2" size="title-sm" variant="neutral-strong">
524+
Available projects
525+
</Heading>
526+
<div className="ml-auto">
530527
<Button variant="icon">
531528
<Icon name="add" purpose="decorative" />
532529
Add project
533530
</Button>
534-
</Toolbar.Item>
535-
</Toolbar>
531+
</div>
532+
</div>
536533
</DragDropContainerHeader>
537534
),
538535
},
@@ -543,19 +540,17 @@ const InteractiveDragDrop = () => {
543540
itemIds: [],
544541
header: (
545542
<DragDropContainerHeader>
546-
<Toolbar className="!mb-4" variant="bare">
547-
<Toolbar.Item>
548-
<Heading as="h2" size="title-sm" variant="neutral-strong">
549-
Planned projects
550-
</Heading>
551-
</Toolbar.Item>
552-
<Toolbar.Item align="right">
543+
<div className="bg-neutral-subtle mb-4 flex items-center gap-4">
544+
<Heading as="h2" size="title-sm" variant="neutral-strong">
545+
Planned projects
546+
</Heading>
547+
<div className="ml-auto">
553548
<Button variant="icon">
554549
<Icon name="add" purpose="decorative" />
555550
Add project
556551
</Button>
557-
</Toolbar.Item>
558-
</Toolbar>
552+
</div>
553+
</div>
559554
</DragDropContainerHeader>
560555
),
561556
},
@@ -566,19 +561,17 @@ const InteractiveDragDrop = () => {
566561
itemIds: [],
567562
header: (
568563
<DragDropContainerHeader>
569-
<Toolbar className="!mb-4" variant="bare">
570-
<Toolbar.Item>
571-
<Heading as="h2" size="title-sm" variant="neutral-strong">
572-
Planned projects
573-
</Heading>
574-
</Toolbar.Item>
575-
<Toolbar.Item align="right">
564+
<div className="bg-neutral-subtle mb-4 flex items-center gap-4">
565+
<Heading as="h2" size="title-sm" variant="neutral-strong">
566+
Planned projects
567+
</Heading>
568+
<div className="ml-auto">
576569
<Button variant="icon">
577570
<Icon name="add" purpose="decorative" />
578571
Add project
579572
</Button>
580-
</Toolbar.Item>
581-
</Toolbar>
573+
</div>
574+
</div>
582575
</DragDropContainerHeader>
583576
),
584577
},
@@ -589,19 +582,17 @@ const InteractiveDragDrop = () => {
589582
itemIds: [],
590583
header: (
591584
<DragDropContainerHeader>
592-
<Toolbar className="!mb-4" variant="bare">
593-
<Toolbar.Item>
594-
<Heading as="h2" size="title-sm" variant="neutral-strong">
595-
Planned projects
596-
</Heading>
597-
</Toolbar.Item>
598-
<Toolbar.Item align="right">
585+
<div className="bg-neutral-subtle mb-4 flex items-center gap-4 p-0">
586+
<Heading as="h2" size="title-sm" variant="neutral-strong">
587+
Planned projects
588+
</Heading>
589+
<div className="ml-auto">
599590
<Button variant="icon">
600591
<Icon name="add" purpose="decorative" />
601592
Add project
602593
</Button>
603-
</Toolbar.Item>
604-
</Toolbar>
594+
</div>
595+
</div>
605596
</DragDropContainerHeader>
606597
),
607598
},

0 commit comments

Comments
 (0)