Skip to content

Commit 400d6e3

Browse files
ze-floze-flo
authored
feat(chrome)!: removes Subnav component (#1787)
1 parent 0996d8f commit 400d6e3

27 files changed

+110
-963
lines changed

‎docs/migration.md‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,11 @@ consider additional positioning prop support on a case-by-case basis.
5555

5656
#### @zendeskgarden/react-chrome
5757

58-
- Removed `Sidebar`: UI no longer recommended by Garden
58+
- Removed `Sidebar` and `Subnav`: UI no longer recommended by Garden
5959
- Removed `PRODUCT` type export. Use `IHeaderItemProps['product']` instead.
6060
- Removed `hasFooter` prop for `Body` (no replacement needed)
6161
- The following React component types have changed:
6262
- Removed `IBodyProps` type export.
63-
- Renamed `ICollapsibleSubNavItemProps` type export to `ISubNavCollapsibleItemProps`.
6463
- `Header.ItemIcon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`
6564
- `Nav.ItemIcon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`
6665
- Subcomponent exports have been deprecated and will be removed in a future major version. Update
@@ -73,9 +72,6 @@ consider additional positioning prop support on a case-by-case basis.
7372
- `NavItem` -> `Nav.Item`
7473
- `NavItemIcon` -> `Nav.ItemIcon`
7574
- `NavItemText` -> `Nav.ItemText`
76-
- `CollapsibleSubNavItem` -> `SubNav.CollapsibleItem`
77-
- `SubNavItem` -> `SubNav.Item`
78-
- `SubNavItemText` -> `SubNav.ItemText`
7975
- Added `Nav.List` as a semantic wrapper for `Nav.Item`. See the
8076
[README](../packages/chrome/README.md#usages) for details.
8177

‎package-lock.json‎

Lines changed: 98 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/chrome/README.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
1515

1616
```jsx
1717
import { ThemeProvider } from '@zendeskgarden/react-theming';
18-
import { Chrome, Nav, SubNav, Body, Header, Content, Main } from '@zendeskgarden/react-chrome';
18+
import { Chrome, Nav, Body, Header, Content, Main } from '@zendeskgarden/react-chrome';
1919
import ConnectIcon from '@zendeskgarden/icons/src/26/relationshape-connect.svg';
2020
import BrandmarkIcon from '@zendeskgarden/svg-icons/src/26/zendesk.svg';
2121

@@ -43,12 +43,6 @@ import BrandmarkIcon from '@zendeskgarden/svg-icons/src/26/zendesk.svg';
4343
<Nav.ItemText>Brandmark</Nav.ItemText>
4444
</Nav.Item>
4545
</Nav>
46-
<SubNav>
47-
<SubNav.Item isCurrent>
48-
<SubNav.ItemText>Subnav 1</SubNav.ItemText>
49-
</SubNav.Item>
50-
...
51-
</SubNav>
5246
<Body>
5347
<Header>...</Header>
5448
<Content>

‎packages/chrome/demo/chrome.stories.mdx‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
Nav,
1111
Sheet,
1212
SkipNav,
13-
SubNav,
1413
PRODUCTS
1514
} from '@zendeskgarden/react-chrome';
1615
import { ChromeStory } from './stories/ChromeStory';
@@ -46,11 +45,7 @@ import README from '../README.md';
4645
'Nav.ItemIcon': Nav.ItemIcon,
4746
'Nav.ItemText': Nav.ItemText,
4847
Sheet,
49-
SkipNav,
50-
SubNav,
51-
'SubNav.CollapsibleItem': SubNav.CollapsibleItem,
52-
'SubNav.Item': SubNav.Item,
53-
'SubNav.ItemText': SubNav.ItemText
48+
SkipNav
5449
}}
5550
/>
5651

@@ -71,8 +66,6 @@ import README from '../README.md';
7166
isWrapped: false,
7267
hasLogo: true,
7368
hasBrandmark: true,
74-
hasSubNav: false,
75-
subNavItems: SUB_NAV_ITEMS,
7669
hasHeader: true,
7770
headerItems: HEADER_ITEMS,
7871
hasFooter: true,
@@ -90,14 +83,11 @@ import README from '../README.md';
9083
isFluid: { control: 'boolean' },
9184
skipNav: { name: 'children', table: { category: 'SkipNav' } },
9285
isExpanded: { name: 'Nav isExpanded', table: { category: 'Story' } },
93-
isWrapped: { name: 'Nav/SubNav isWrapped', table: { category: 'Story' } },
86+
isWrapped: { name: 'Nav isWrapped', table: { category: 'Story' } },
9487
hasNav: { name: 'Nav', table: { category: 'Story' } },
9588
navItems: { name: 'Nav.Item[]', table: { category: 'Story' } },
9689
hasLogo: { name: 'Nav hasLogo', table: { category: 'Story' } },
9790
hasBrandmark: { name: 'Nav hasBrandmark', table: { category: 'Story' } },
98-
hasSubNav: { name: 'SubNav', table: { category: 'Story' } },
99-
subNavItems: { name: 'SubNav.Item[]', table: { category: 'Story' } },
100-
subNavMaxWidth: { name: 'SubNav max-width', control: 'number', table: { category: 'Story' } },
10191
hasHeader: { name: 'Header', table: { category: 'Story' } },
10292
headerItems: { name: 'Header.Item[]', table: { category: 'Story' } },
10393
hasFooter: { name: 'Footer', table: { category: 'Story' } },
@@ -128,9 +118,8 @@ import README from '../README.md';
128118
>
129119
{args => {
130120
const updateArgs = useArgs()[1];
131-
const handleNavClick = ({ hasSubNav }) => updateArgs({ hasSubNav: hasSubNav || false });
132121
const handleSheetClick = () => updateArgs({ isSheetOpen: false });
133-
return <ChromeStory {...args} onSheetClick={handleSheetClick} onNavClick={handleNavClick} />;
122+
return <ChromeStory {...args} onSheetClick={handleSheetClick} />;
134123
}}
135124
</Story>
136125
</Canvas>

‎packages/chrome/demo/stories/ChromeStory.tsx‎

Lines changed: 4 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,10 @@ import {
3939
INavItemProps,
4040
Main,
4141
Nav,
42-
SkipNav,
43-
SubNav
42+
SkipNav
4443
} from '@zendeskgarden/react-chrome';
4544
import { Button } from '@zendeskgarden/react-buttons';
46-
import { IFooterItem, IHeaderItem, INavItem, ISubNavItem } from './types';
45+
import { IFooterItem, IHeaderItem, INavItem } from './types';
4746
import { SheetComponent } from './SheetStory';
4847
import { Product } from '../../src/types';
4948

@@ -78,12 +77,8 @@ interface IArgs extends IChromeProps {
7877
skipNav: string;
7978
hasNav: boolean;
8079
navItems: INavItem[];
81-
onNavClick: ({ hasSubNav }: Record<string, boolean | undefined>) => void;
8280
hasLogo: boolean;
8381
hasBrandmark: boolean;
84-
hasSubNav: boolean;
85-
subNavItems: ISubNavItem[];
86-
subNavMaxWidth: number;
8782
hasHeader: boolean;
8883
headerItems: IHeaderItem[];
8984
hasFooter: boolean;
@@ -104,12 +99,8 @@ export const ChromeStory: Story<IArgs> = ({
10499
skipNav,
105100
hasNav,
106101
navItems,
107-
onNavClick,
108102
hasLogo,
109103
hasBrandmark,
110-
hasSubNav,
111-
subNavItems,
112-
subNavMaxWidth,
113104
hasHeader,
114105
headerItems,
115106
hasFooter,
@@ -126,7 +117,6 @@ export const ChromeStory: Story<IArgs> = ({
126117
...args
127118
}) => {
128119
const [currentNav, setCurrentNav] = useState(0);
129-
const [currentSubNav, setCurrentSubNav] = useState(0);
130120

131121
return (
132122
<Chrome {...args} style={{ margin: `-${DEFAULT_THEME.space.xl}` }}>
@@ -146,8 +136,6 @@ export const ChromeStory: Story<IArgs> = ({
146136
isCurrent={currentNav === index}
147137
onClick={() => {
148138
setCurrentNav(index);
149-
setCurrentSubNav(0);
150-
onNavClick({ hasSubNav: item.hasSubNav });
151139
}}
152140
>
153141
<Nav.ItemIcon>{NAV_ICONS[index] || <NavIcon />}</Nav.ItemIcon>
@@ -165,36 +153,10 @@ export const ChromeStory: Story<IArgs> = ({
165153
)}
166154
</Nav>
167155
)}
168-
{hasSubNav && (
169-
<SubNav style={{ maxWidth: subNavMaxWidth }}>
170-
{subNavItems.map((item, index) =>
171-
item.items ? (
172-
<SubNav.CollapsibleItem key={index} header={item.text}>
173-
{item.items.map((subItem, subIndex) => (
174-
<SubNav.Item
175-
key={subIndex}
176-
isCurrent={currentSubNav === parseFloat(`${index}.${subIndex}`)}
177-
onClick={() => setCurrentSubNav(parseFloat(`${index}.${subIndex}`))}
178-
>
179-
<SubNav.ItemText isWrapped={isWrapped}>{subItem}</SubNav.ItemText>
180-
</SubNav.Item>
181-
))}
182-
</SubNav.CollapsibleItem>
183-
) : (
184-
<SubNav.Item
185-
key={index}
186-
isCurrent={currentSubNav === index}
187-
onClick={() => setCurrentSubNav(index)}
188-
>
189-
<SubNav.ItemText isWrapped={isWrapped}>{item.text}</SubNav.ItemText>
190-
</SubNav.Item>
191-
)
192-
)}
193-
</SubNav>
194-
)}
156+
195157
<Body>
196158
{hasHeader && (
197-
<Header isStandalone={!(hasNav || hasSubNav)}>
159+
<Header isStandalone={!hasNav}>
198160
{hasLogo && (
199161
<Header.Item hasLogo product={product}>
200162
<Header.ItemIcon>

‎packages/chrome/demo/stories/SubNavCollapsibleItem.tsx‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

0 commit comments

Comments
 (0)