Skip to content

Commit 595cf98

Browse files
axis-d0opaxis-d0op
authored
chore: improve example ux (#564)
1 parent ea9bfbb commit 595cf98

18 files changed

Lines changed: 459 additions & 409 deletions

‎examples/src/components/navigation-menu/navigation-footer.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,23 @@ export const navigationFooterClassNames = {
1919
const useStyles = makeStyles({
2020
root: {
2121
width: "100%",
22-
backgroundImage: `linear-gradient(90deg,${tokens.colorNeutralBackground1}0%,${tokens.colorNeutralBackground3}95%)`,
22+
backgroundColor: "transparent",
23+
boxShadow: "none",
24+
...shorthands.padding(tokens.spacingVerticalXS, 0),
25+
":hover": {
26+
backgroundColor: tokens.colorNeutralBackground1Hover,
27+
},
2328
":hover #gitIcon": {
24-
transform: "scale(1.5) rotate(15deg)",
25-
...shorthands.transition("all", "250ms"),
29+
transform: "scale(1.15) rotate(10deg)",
2630
},
2731
},
28-
title: {
29-
...shorthands.margin(0, 0, "12px"),
30-
},
31-
description: {
32-
...shorthands.margin(0, 0, "12px"),
33-
},
3432
caption: {
3533
color: tokens.colorNeutralForeground3,
3634
},
35+
gitIcon: {
36+
transitionDuration: tokens.durationNormal,
37+
transitionProperty: "transform",
38+
},
3739
});
3840

3941
export function useNavigationFooterStyles() {
@@ -49,16 +51,16 @@ export function NavigationFooter() {
4951
<Card data-testid={componentId} className={rootStyle}>
5052
<CardHeader
5153
image={
52-
<Link href={GitHubUrls.home} id="gitIcon">
54+
<Link href={GitHubUrls.home} id="gitIcon" className={styles.gitIcon}>
5355
<svg
5456
aria-hidden="true"
55-
height="24"
57+
height="20"
5658
version="1.1"
5759
viewBox="0 0 16 16"
58-
width="24"
60+
width="20"
5961
>
6062
<path
61-
fill={tokens.colorBrandForeground1}
63+
fill={tokens.colorNeutralForeground3}
6264
fillRule="evenodd"
6365
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
6466
></path>

‎examples/src/components/navigation-menu/navigation-menu.item.tsx‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
MenuItemProps,
44
makeStyles,
55
mergeClasses,
6+
shorthands,
67
tokens,
78
} from "@fluentui/react-components";
89

@@ -13,10 +14,36 @@ export const navigationMenuItemClassNames = {
1314

1415
const useStyles = makeStyles({
1516
root: {
16-
backgroundImage: `linear-gradient(90deg,${tokens.colorNeutralBackground1}0%,${tokens.colorNeutralBackground3}95%)`,
17+
...shorthands.borderRadius(tokens.borderRadiusMedium),
18+
...shorthands.padding(
19+
tokens.spacingVerticalSNudge,
20+
tokens.spacingHorizontalM
21+
),
22+
minHeight: "unset",
23+
color: tokens.colorNeutralForeground2,
24+
backgroundColor: "transparent",
25+
":hover": {
26+
backgroundColor: tokens.colorNeutralBackground1Hover,
27+
color: tokens.colorNeutralForeground1,
28+
},
1729
},
1830
selected: {
19-
backgroundImage: `linear-gradient(90deg,${tokens.colorNeutralBackground1}100%,${tokens.colorNeutralBackground3}0%)`,
31+
backgroundColor: tokens.colorNeutralBackground1,
32+
color: tokens.colorNeutralForeground1,
33+
fontWeight: tokens.fontWeightSemibold,
34+
"::before": {
35+
content: '""',
36+
position: "absolute",
37+
left: "0",
38+
top: "25%",
39+
height: "50%",
40+
width: "3px",
41+
...shorthands.borderRadius(tokens.borderRadiusCircular),
42+
backgroundColor: tokens.colorBrandForeground1,
43+
},
44+
":hover": {
45+
backgroundColor: tokens.colorNeutralBackground1,
46+
},
2047
},
2148
});
2249

‎examples/src/components/navigation-menu/navigation-menu.tsx‎

Lines changed: 117 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
import {
2-
Accordion,
3-
AccordionHeader,
4-
AccordionItem,
5-
AccordionPanel,
6-
Button,
7-
DrawerBody,
8-
DrawerFooter,
9-
DrawerHeader,
10-
InlineDrawer,
2+
Caption1,
3+
Link,
4+
NavCategory,
5+
NavCategoryItem,
6+
NavDrawer,
7+
NavDrawerBody,
8+
NavDrawerFooter,
9+
NavItem,
10+
NavSubItem,
11+
NavSubItemGroup,
1112
makeStyles,
1213
mergeClasses,
1314
shorthands,
1415
tokens,
1516
} from "@fluentui/react-components";
16-
import { HomeFilled, HomeRegular, bundleIcon } from "@fluentui/react-icons";
17-
import { useNavigate } from "react-router-dom";
18-
import { RouteCategory } from "../../routing/route-map";
17+
import {
18+
BeachRegular,
19+
DarkThemeRegular,
20+
IconsRegular,
21+
PuzzlePieceRegular,
22+
SlideTextRegular,
23+
} from "@fluentui/react-icons";
24+
import { useCallback } from "react";
25+
import { useLocation, useNavigate } from "react-router-dom";
26+
import { GitHubUrls } from "../../constants/constants";
1927
import { routes } from "../../routing/routes";
20-
import { NavigationFooter } from "./navigation-footer";
21-
import { NavigationMenuList } from "./navigation-menu-list";
22-
23-
const HomeIcon = bundleIcon(HomeFilled, HomeRegular);
2428

2529
const componentId = "navigation-menu";
2630
export const navigationMenuClassNames = {
@@ -30,46 +34,46 @@ export const navigationMenuClassNames = {
3034
const useStyles = makeStyles({
3135
root: {
3236
height: "100%",
33-
width: "300px",
37+
width: "280px",
3438
...shorthands.border(0),
3539
},
3640
body: {
37-
backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground3}, ${tokens.colorNeutralBackground3}),
38-
linear-gradient(to top, ${tokens.colorNeutralBackground3}, ${tokens.colorNeutralBackground3}),
39-
linear-gradient(to top, ${tokens.colorNeutralBackground3}, ${tokens.colorNeutralBackground3}),
40-
linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground3})`,
41-
backgroundColor: tokens.colorNeutralBackground3,
42-
backgroundSize: "100% 2px, 100% 2px, 94% 1px, 100% 0px",
43-
...shorthands.margin(0),
44-
...shorthands.padding(
45-
tokens.spacingVerticalXS,
46-
tokens.spacingVerticalS,
47-
tokens.spacingVerticalXS,
48-
tokens.spacingVerticalS
49-
),
50-
":first-child": {
51-
paddingTop: "unset",
52-
},
41+
...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalS),
5342
},
54-
header: {
55-
...shorthands.margin(0),
56-
...shorthands.padding(
57-
tokens.spacingVerticalXS,
58-
tokens.spacingVerticalS,
59-
tokens.spacingVerticalXS,
60-
tokens.spacingVerticalS
43+
subItemGroup: {
44+
...shorthands.borderLeft(
45+
tokens.strokeWidthThin,
46+
"solid",
47+
tokens.colorNeutralStroke2
6148
),
62-
backgroundColor: tokens.colorNeutralBackground3,
49+
marginLeft: "28px",
50+
"& .fui-NavSubItem": {
51+
fontSize: tokens.fontSizeBase200,
52+
color: tokens.colorNeutralForeground3,
53+
},
54+
"& .fui-NavSubItem:hover": {
55+
color: tokens.colorNeutralForeground1,
56+
},
57+
"& .fui-NavSubItem[aria-current='page']": {
58+
color: tokens.colorNeutralForeground1,
59+
fontWeight: tokens.fontWeightSemibold,
60+
},
6361
},
6462
footer: {
65-
...shorthands.margin(0),
66-
...shorthands.padding(
67-
tokens.spacingVerticalM,
68-
tokens.spacingVerticalS,
69-
tokens.spacingVerticalXS,
70-
tokens.spacingVerticalS
71-
),
72-
backgroundColor: tokens.colorNeutralBackground3,
63+
display: "flex",
64+
alignItems: "center",
65+
...shorthands.gap(tokens.spacingHorizontalS),
66+
...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalL),
67+
},
68+
footerIcon: {
69+
transitionDuration: tokens.durationNormal,
70+
transitionProperty: "transform",
71+
":hover": {
72+
transform: "scale(1.15) rotate(10deg)",
73+
},
74+
},
75+
footerText: {
76+
color: tokens.colorNeutralForeground3,
7377
},
7478
});
7579

@@ -82,51 +86,77 @@ export function useNavigationMenuStyles() {
8286
export function NavigationMenu({ ...rest }) {
8387
const { styles, rootStyle } = useNavigationMenuStyles();
8488
const navigate = useNavigate();
89+
const { pathname } = useLocation();
90+
91+
const handleNavSelect = useCallback(
92+
(_: unknown, data: { value: string }) => {
93+
navigate(data.value);
94+
},
95+
[navigate]
96+
);
8597

8698
return (
87-
<InlineDrawer
99+
<NavDrawer
88100
data-testid={componentId}
89-
position={"start"}
90101
open={true}
102+
type="inline"
91103
className={rootStyle}
104+
selectedValue={pathname}
105+
onNavItemSelect={handleNavSelect}
106+
defaultOpenCategories={["components", "styles"]}
107+
multiple
92108
{...rest}
93109
>
94-
<DrawerHeader className={styles.header}>
95-
<div>
96-
<Button
97-
appearance="transparent"
98-
icon={<HomeIcon />}
99-
onClick={() => navigate(routes.Home)}
110+
<NavDrawerBody className={styles.body}>
111+
<NavItem icon={<DarkThemeRegular />} value={routes.Theme}>
112+
Themes
113+
</NavItem>
114+
<NavItem icon={<IconsRegular />} value={routes.IconCatalog}>
115+
Icons
116+
</NavItem>
117+
<NavItem icon={<BeachRegular />} value={routes.Illustrations}>
118+
Illustrations
119+
</NavItem>
120+
121+
<NavCategory value="components">
122+
<NavCategoryItem icon={<PuzzlePieceRegular />}>
123+
Components
124+
</NavCategoryItem>
125+
<NavSubItemGroup className={styles.subItemGroup}>
126+
<NavSubItem value={routes.Stepper}>Stepper</NavSubItem>
127+
<NavSubItem value={routes.Slider}>Slider</NavSubItem>
128+
<NavSubItem value={routes.PasswordInput}>Password input</NavSubItem>
129+
<NavSubItem value={routes.EmptyView}>Empty view</NavSubItem>
130+
</NavSubItemGroup>
131+
</NavCategory>
132+
133+
<NavCategory value="styles">
134+
<NavCategoryItem icon={<SlideTextRegular />}>Styles</NavCategoryItem>
135+
<NavSubItemGroup className={styles.subItemGroup}>
136+
<NavSubItem value={routes.mainMenu}>Main menu</NavSubItem>
137+
<NavSubItem value={routes.TableUtilities}>Table</NavSubItem>
138+
<NavSubItem value={routes.TabListUtilities}>Tablist</NavSubItem>
139+
</NavSubItemGroup>
140+
</NavCategory>
141+
</NavDrawerBody>
142+
<NavDrawerFooter className={styles.footer}>
143+
<Link href={GitHubUrls.home} className={styles.footerIcon}>
144+
<svg
145+
aria-hidden="true"
146+
height="20"
147+
version="1.1"
148+
viewBox="0 0 16 16"
149+
width="20"
100150
>
101-
fluent components
102-
</Button>
103-
</div>
104-
</DrawerHeader>
105-
<DrawerBody className={styles.body}>
106-
<Accordion multiple defaultOpenItems={["1", "2", "3"]}>
107-
<AccordionItem value="1">
108-
<AccordionHeader size="small">Misc</AccordionHeader>
109-
<AccordionPanel>
110-
<NavigationMenuList category={RouteCategory.MISC} />
111-
</AccordionPanel>
112-
</AccordionItem>
113-
<AccordionItem value="2">
114-
<AccordionHeader size="small">Components</AccordionHeader>
115-
<AccordionPanel>
116-
<NavigationMenuList category={RouteCategory.COMPONENT} />
117-
</AccordionPanel>
118-
</AccordionItem>
119-
<AccordionItem value="3">
120-
<AccordionHeader size="small">Styles</AccordionHeader>
121-
<AccordionPanel>
122-
<NavigationMenuList category={RouteCategory.STYLE} />
123-
</AccordionPanel>
124-
</AccordionItem>
125-
</Accordion>
126-
</DrawerBody>
127-
<DrawerFooter className={styles.footer}>
128-
<NavigationFooter />
129-
</DrawerFooter>
130-
</InlineDrawer>
151+
<path
152+
fill={tokens.colorNeutralForeground3}
153+
fillRule="evenodd"
154+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
155+
/>
156+
</svg>
157+
</Link>
158+
<Caption1 className={styles.footerText}>@axiscommunications</Caption1>
159+
</NavDrawerFooter>
160+
</NavDrawer>
131161
);
132162
}

‎examples/src/components/story/story-code-block-accordion.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
shorthands,
88
tokens,
99
} from "@fluentui/react-components";
10+
import { CodeRegular } from "@fluentui/react-icons";
1011
import { StoryCodeBlock } from "./story-code-block";
1112
import { CopyButton } from "./story-code-copy";
1213

@@ -15,13 +16,22 @@ const useStyles = makeStyles({
1516
position: "relative",
1617
backgroundColor: tokens.colorNeutralBackground1,
1718
...shorthands.borderRadius(tokens.borderRadiusLarge),
19+
...shorthands.border(
20+
tokens.strokeWidthThin,
21+
"solid",
22+
tokens.colorNeutralStroke2
23+
),
1824
},
1925
copyBootstrap: {
2026
position: "absolute",
2127
zIndex: 5,
2228
top: "5px",
2329
right: "5px",
2430
},
31+
header: {
32+
fontSize: tokens.fontSizeBase200,
33+
color: tokens.colorNeutralForeground3,
34+
},
2535
});
2636

2737
export const StoryCodeBlockAccordion = ({
@@ -47,7 +57,9 @@ export const StoryCodeBlockAccordion = ({
4757
className={styles.copyBootstrap}
4858
codeString={codeString}
4959
/>
50-
<AccordionHeader>{title}</AccordionHeader>
60+
<AccordionHeader className={styles.header} icon={<CodeRegular />}>
61+
{title}
62+
</AccordionHeader>
5163
<AccordionPanel>
5264
<StoryCodeBlock codeString={codeString} canCopy={false} />
5365
</AccordionPanel>

0 commit comments

Comments
 (0)