Skip to content

Commit

Permalink
refactor(toolbar)!: remove component (#1683)
Browse files Browse the repository at this point in the history 
* refactor(toolbar)!: remove component

* refactor(toolbar)!: remove the subcomponents too

* fix: remove some padding
  • Loading branch information
@jinlee93 @booc0mtaco
jinlee93 authored and booc0mtaco committed Jul 19, 2023
1 parent 669081d commit bd47899
Show file tree
Hide file tree
Showing 14 changed files with 92 additions and 547 deletions.
34 changes: 14 additions & 20 deletions .storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ import {
TableHeaderCell,
TableRow,
Text,
Toolbar,
ToolbarItem,
} from '../../../src';

import type { NewState } from '../../../src/components/DragDrop/DragDrop';
Expand Down Expand Up @@ -431,19 +429,17 @@ export const CoursePlannerEdit = () => {
emptyContent: container1EmptyContent(),
header: (
<DragDropContainerHeader>
<Toolbar className="!mb-4" variant="bare">
<ToolbarItem>
<Heading as="h2" size="title-sm" variant="neutral-strong">
Available projects
</Heading>
</ToolbarItem>
<ToolbarItem align="right">
<div className="mb-4 flex items-center gap-4">
<Heading as="h2" size="title-sm" variant="neutral-strong">
Available projects
</Heading>
<div className="ml-auto">
<Button variant="icon">
<Icon name="add" purpose="decorative" />
Add project
</Button>
</ToolbarItem>
</Toolbar>
</div>
</div>
</DragDropContainerHeader>
),
},
Expand All @@ -452,19 +448,17 @@ export const CoursePlannerEdit = () => {
emptyContent: container2EmptyContent(),
header: (
<DragDropContainerHeader>
<Toolbar className="!mb-4" variant="bare">
<ToolbarItem>
<Heading as="h2" size="title-sm" variant="neutral-strong">
Planned projects
</Heading>
</ToolbarItem>
<ToolbarItem align="right">
<div className="mb-4 flex items-center gap-4">
<Heading as="h2" size="title-sm" variant="neutral-strong">
Planned projects
</Heading>
<div className="ml-auto">
<Button variant="icon">
<Icon name="add" purpose="decorative" />
Add project
</Button>
</ToolbarItem>
</Toolbar>
</div>
</div>
</DragDropContainerHeader>
),
},
Expand Down
4 changes: 0 additions & 4 deletions .storybook/pages/FeedbackOverview/FeedbackOverview.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
@import '../../../src/design-tokens/mixins.css';

.feedback-overview__toolbar {
padding-bottom: var(--eds-size-2);
}

.feedback-overview__card-header {
margin-bottom: var(--eds-size-1);
font: var(--eds-theme-typography-title-md);
Expand Down
40 changes: 14 additions & 26 deletions .storybook/pages/FeedbackOverview/FeedbackOverview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ import {
Table,
Text,
TimelineNav,
Toolbar,
ToolbarItem,
} from '../../../src';

import breakpoint from '../../../src/design-tokens/tier-1-definitions/breakpoints';
Expand Down Expand Up @@ -208,16 +206,11 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
<Tab title="Feedback">
<TimelineNav activeIndex={activeIndex}>
<TimelineNav.Panel title="Overview">
<Toolbar
className={styles['feedback-overview__toolbar']}
variant="bare"
>
<ToolbarItem>
<Heading as="h2" size="headline-md">
Feedback Overview
</Heading>
</ToolbarItem>
<ToolbarItem align="right">
<div className="flex items-center gap-4 pb-4">
<Heading as="h2" size="headline-md">
Feedback Overview
</Heading>
<div className="ml-auto">
<Button size="md" status="brand" variant="secondary">
<Icon
name="filter-list"
Expand All @@ -226,8 +219,8 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
/>
Filters
</Button>
</ToolbarItem>
</Toolbar>
</div>
</div>
{isTable && (
<Table>
<Table.Header>
Expand Down Expand Up @@ -405,16 +398,11 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
}
variant="number"
>
<Toolbar
className={styles['feedback-overview__toolbar']}
variant="bare"
>
<ToolbarItem>
<Heading as="h2" size="h3">
Checkpoint Progress
</Heading>
</ToolbarItem>
<ToolbarItem align="right">
<div className="flex items-center gap-4 pb-4">
<Heading as="h2" size="h3">
Checkpoint Progress
</Heading>
<div className="ml-auto">
<Button size="md" status="brand" variant="secondary">
<Icon
name="filter-list"
Expand All @@ -423,8 +411,8 @@ export const FeedbackOverview = ({ activeIndex = 0 }: Props) => {
/>
Filters
</Button>
</ToolbarItem>
</Toolbar>
</div>
</div>
{isTable && (
<Table>
<Table.Header>
Expand Down
81 changes: 36 additions & 45 deletions src/components/DragDrop/DragDrop.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
Heading,
Icon,
Text,
Toolbar,
} from '../..';
import styles from './DragDrop.stories.module.css';

Expand Down Expand Up @@ -91,11 +90,11 @@ export const Default: StoryObj<Args> = {
itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
header: (
<DragDropContainerHeader>
<Toolbar>
<div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
<Heading as="h5" size="h5">
Available Projects
</Heading>
</Toolbar>
</div>
</DragDropContainerHeader>
),
},
Expand Down Expand Up @@ -298,11 +297,11 @@ export const Default: StoryObj<Args> = {
),
header: (
<DragDropContainerHeader>
<Toolbar>
<div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
<Heading as="h5" size="h5">
Selected Projects
</Heading>
</Toolbar>
</div>
</DragDropContainerHeader>
),
},
Expand Down Expand Up @@ -365,11 +364,11 @@ export const HoveredHandle: StoryObj<Args> = {
itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
header: (
<DragDropContainerHeader>
<Toolbar>
<div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
<Heading as="h5" size="h5">
Available Projects
</Heading>
</Toolbar>
</div>
</DragDropContainerHeader>
),
},
Expand Down Expand Up @@ -492,11 +491,11 @@ export const HoveredHandle: StoryObj<Args> = {
),
header: (
<DragDropContainerHeader>
<Toolbar>
<div className="bg-neutral-subtle flex items-center gap-4 px-4 py-2">
<Heading as="h5" size="h5">
Selected Projects
</Heading>
</Toolbar>
</div>
</DragDropContainerHeader>
),
},
Expand All @@ -520,19 +519,17 @@ const InteractiveDragDrop = () => {
itemIds: ['item-1', 'item-2', 'item-3', 'item-4', 'item-5'],
header: (
<DragDropContainerHeader>
<Toolbar className="!mb-4" variant="bare">
<Toolbar.Item>
<Heading as="h2" size="title-sm" variant="neutral-strong">
Available projects
</Heading>
</Toolbar.Item>
<Toolbar.Item align="right">
<div className="bg-neutral-subtle mb-4 flex items-center gap-4">
<Heading as="h2" size="title-sm" variant="neutral-strong">
Available projects
</Heading>
<div className="ml-auto">
<Button variant="icon">
<Icon name="add" purpose="decorative" />
Add project
</Button>
</Toolbar.Item>
</Toolbar>
</div>
</div>
</DragDropContainerHeader>
),
},
Expand All @@ -543,19 +540,17 @@ const InteractiveDragDrop = () => {
itemIds: [],
header: (
<DragDropContainerHeader>
<Toolbar className="!mb-4" variant="bare">
<Toolbar.Item>
<Heading as="h2" size="title-sm" variant="neutral-strong">
Planned projects
</Heading>
</Toolbar.Item>
<Toolbar.Item align="right">
<div className="bg-neutral-subtle mb-4 flex items-center gap-4">
<Heading as="h2" size="title-sm" variant="neutral-strong">
Planned projects
</Heading>
<div className="ml-auto">
<Button variant="icon">
<Icon name="add" purpose="decorative" />
Add project
</Button>
</Toolbar.Item>
</Toolbar>
</div>
</div>
</DragDropContainerHeader>
),
},
Expand All @@ -566,19 +561,17 @@ const InteractiveDragDrop = () => {
itemIds: [],
header: (
<DragDropContainerHeader>
<Toolbar className="!mb-4" variant="bare">
<Toolbar.Item>
<Heading as="h2" size="title-sm" variant="neutral-strong">
Planned projects
</Heading>
</Toolbar.Item>
<Toolbar.Item align="right">
<div className="bg-neutral-subtle mb-4 flex items-center gap-4">
<Heading as="h2" size="title-sm" variant="neutral-strong">
Planned projects
</Heading>
<div className="ml-auto">
<Button variant="icon">
<Icon name="add" purpose="decorative" />
Add project
</Button>
</Toolbar.Item>
</Toolbar>
</div>
</div>
</DragDropContainerHeader>
),
},
Expand All @@ -589,19 +582,17 @@ const InteractiveDragDrop = () => {
itemIds: [],
header: (
<DragDropContainerHeader>
<Toolbar className="!mb-4" variant="bare">
<Toolbar.Item>
<Heading as="h2" size="title-sm" variant="neutral-strong">
Planned projects
</Heading>
</Toolbar.Item>
<Toolbar.Item align="right">
<div className="bg-neutral-subtle mb-4 flex items-center gap-4 p-0">
<Heading as="h2" size="title-sm" variant="neutral-strong">
Planned projects
</Heading>
<div className="ml-auto">
<Button variant="icon">
<Icon name="add" purpose="decorative" />
Add project
</Button>
</Toolbar.Item>
</Toolbar>
</div>
</div>
</DragDropContainerHeader>
),
},
Expand Down
Loading

0 comments on commit bd47899

Please sign in to comment.