-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add tablist utilities styles and examples (#171)
* feat: add tablist utilities styles and examples
- Loading branch information
Showing
10 changed files
with
538 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import SyntaxHighlighter from "react-syntax-highlighter"; | ||
| import React from "react"; | ||
| import { | ||
| Accordion, | ||
| AccordionHeader, | ||
| AccordionItem, | ||
| AccordionPanel, | ||
| } from "@fluentui/react-components"; | ||
|
|
||
| export const CodeBlock = ( | ||
| { codeString, title }: { codeString: string; title: string } | ||
| ) => { | ||
| return ( | ||
| <Accordion collapsible> | ||
| <AccordionItem value="1"> | ||
| <AccordionHeader>{title}</AccordionHeader> | ||
| <AccordionPanel> | ||
| <SyntaxHighlighter language="typescript"> | ||
| {codeString} | ||
| </SyntaxHighlighter> | ||
| </AccordionPanel> | ||
| </AccordionItem> | ||
| </Accordion> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 94 additions & 0 deletions
94
examples/src/stories/tab-list-utilities/tab-list-styled..tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import React from "react"; | ||
| import { | ||
| Tab, | ||
| TabList, | ||
| TabListProps, | ||
| TabProps, | ||
| } from "@fluentui/react-components"; | ||
| import { bundleIcon, HomeFilled, HomeRegular } from "@fluentui/react-icons"; | ||
| import { | ||
| useTabListStyles, | ||
| useTabStyles, | ||
| } from "@axiscommunications/fluent-styles"; | ||
| import { useTabListContext } from "./tab-list-utilities-page"; | ||
|
|
||
| export const codeBlockStyled = ` | ||
| ... | ||
| import { | ||
| useTabListStyles, | ||
| useTabStyles, | ||
| } from "@axiscommunications/fluent-styles"; | ||
| ... | ||
| //standard usage | ||
| const { rootStyle: tabListStyle } = useTabListStyles({ vertical: true/false }); | ||
| const { rootStyle: tabStyle } = useTabStyles({ selected: true/false }); | ||
| <Tab className={tabListStyle} {...TabListProps}> | ||
| <Tab className={tabStyle} {...TabProps}>tab1</Tab> | ||
| </Tab> | ||
| //not happy with style? all styles can be grabbed from styles prop | ||
| const { styles } = useTabListStyles(); | ||
| const newStyle = mergeClasses(styles.root, overrideStyles.root ...) | ||
| ... | ||
| `; | ||
|
|
||
| const HomeIcon = bundleIcon(HomeFilled, HomeRegular); | ||
|
|
||
| export type TTabListComponent = { | ||
| withText?: boolean; | ||
| } & TabListProps; | ||
|
|
||
| export function StyledTabListComponent( | ||
| { withText = true, ...props }: TTabListComponent | ||
| ) { | ||
| const { selectedTab, setSelectedTab } = useTabListContext(); | ||
| const { rootStyle } = useTabListStyles({ vertical: props.vertical }); | ||
|
|
||
| return ( | ||
| <TabList | ||
| selectedValue={selectedTab} | ||
| className={rootStyle} | ||
| defaultSelectedValue={selectedTab} | ||
| onTabSelect={(_, { value }) => { | ||
| setSelectedTab(value as unknown as string); | ||
| }} | ||
| {...props} | ||
| > | ||
| <StyledTabComponent | ||
| icon={<HomeIcon />} | ||
| value="tab1" | ||
| selected={selectedTab === "tab1"} | ||
| > | ||
| {withText && "First Tab"} | ||
| </StyledTabComponent> | ||
| <StyledTabComponent | ||
| icon={<HomeIcon />} | ||
| value="tab2" | ||
| selected={selectedTab === "tab2"} | ||
| > | ||
| {withText && "First Tab"} | ||
| </StyledTabComponent> | ||
| <StyledTabComponent | ||
| icon={<HomeIcon />} | ||
| value="tab3" | ||
| selected={selectedTab === "tab3"} | ||
| > | ||
| {withText && "First Tab"} | ||
| </StyledTabComponent> | ||
| </TabList> | ||
| ); | ||
| } | ||
|
|
||
| export type TStyledTabComponent = { | ||
| selected?: boolean; | ||
| } & TabProps; | ||
|
|
||
| function StyledTabComponent( | ||
| { selected, children, ...props }: TStyledTabComponent | ||
| ) { | ||
| const { rootStyle } = useTabStyles({ selected }); | ||
|
|
||
| return <Tab className={rootStyle} {...props}>{children}</Tab>; | ||
| } |
110 changes: 110 additions & 0 deletions
110
examples/src/stories/tab-list-utilities/tab-list-utilities-page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import React, { createContext, useContext, useState } from "react"; | ||
| import { | ||
| makeStyles, | ||
| mergeClasses, | ||
| shorthands, | ||
| Tab, | ||
| TabList, | ||
| tokens, | ||
| } from "@fluentui/react-components"; | ||
| import { PageHeader } from "../../components/page-header"; | ||
| import { useLayoutStyles, useScrollPageStyle } from "../../styles/page"; | ||
| import { SectionTitle } from "../../components/section-title"; | ||
| import { bundleIcon, HomeFilled, HomeRegular } from "@fluentui/react-icons"; | ||
| import { CodeBlock } from "../../components/code-block"; | ||
| import { | ||
| codeBlockStyled, | ||
| StyledTabListComponent, | ||
| TTabListComponent, | ||
| } from "./tab-list-styled."; | ||
|
|
||
| type TTabListContext = { | ||
| selectedTab: string; | ||
| setSelectedTab: (value: string) => void; | ||
| }; | ||
|
|
||
| const TabListContext = createContext<TTabListContext | null>(null); | ||
| export const useTabListContext = () => { | ||
| const context = useContext(TabListContext); | ||
| if (context === null) { | ||
| throw new Error("cant use context outside its provider"); | ||
| } | ||
| return context; | ||
| }; | ||
|
|
||
| const HomeIcon = bundleIcon(HomeFilled, HomeRegular); | ||
|
|
||
| const useTabListUtilitiesStyles = makeStyles({ | ||
| section: { | ||
| display: "flex", | ||
| flexDirection: "row", | ||
| flexWrap: "wrap", | ||
| ...shorthands.gap(tokens.spacingHorizontalXXL), | ||
| }, | ||
| group: { | ||
| display: "flex", | ||
| alignItems: "flex-start", | ||
| flexDirection: "column", | ||
| ...shorthands.gap(tokens.spacingHorizontalXS), | ||
| }, | ||
| }); | ||
|
|
||
| export const FluentUiTabStylesPage = () => { | ||
| const styles = useTabListUtilitiesStyles(); | ||
| const scrollPageStyle = useScrollPageStyle(); | ||
| const layoutStyles = useLayoutStyles(); | ||
| const [selectedTab, setSelectedTab] = useState("tab1"); | ||
|
|
||
| return ( | ||
| <div className={layoutStyles.grid}> | ||
| <TabListContext.Provider value={{ selectedTab, setSelectedTab }}> | ||
| <PageHeader className={layoutStyles.header} title="Tablist utilities" /> | ||
| <div | ||
| className={mergeClasses( | ||
| layoutStyles.content, | ||
| layoutStyles.sections, | ||
| scrollPageStyle | ||
| )} | ||
| > | ||
| <div className={styles.section}> | ||
| <div className={styles.group}> | ||
| <SectionTitle title={"TabList default"} /> | ||
| <TabListComponent /> | ||
| <TabListComponent withText={false} /> | ||
| <TabListComponent vertical /> | ||
| <TabListComponent withText={false} vertical /> | ||
| </div> | ||
|
|
||
| <div className={styles.group}> | ||
| <SectionTitle title={"TabList styled tabs"} /> | ||
| <StyledTabListComponent /> | ||
| <StyledTabListComponent withText={false} /> | ||
| <StyledTabListComponent vertical /> | ||
| <StyledTabListComponent withText={false} vertical /> | ||
|
|
||
| <CodeBlock codeString={codeBlockStyled} title={"code"} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </TabListContext.Provider> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| function TabListComponent({ withText = true, ...props }: TTabListComponent) { | ||
| const { selectedTab, setSelectedTab } = useTabListContext(); | ||
| return ( | ||
| <TabList | ||
| selectedValue={selectedTab} | ||
| defaultSelectedValue={selectedTab} | ||
| onTabSelect={(_, { value }) => { | ||
| setSelectedTab(value as unknown as string); | ||
| }} | ||
| {...props} | ||
| > | ||
| <Tab icon={<HomeIcon />} value="tab1">{withText && "First Tab"}</Tab> | ||
| <Tab icon={<HomeIcon />} value="tab2">{withText && "First Tab"}</Tab> | ||
| <Tab icon={<HomeIcon />} value="tab3">{withText && "First Tab"}</Tab> | ||
| </TabList> | ||
| ); | ||
| } |
Oops, something went wrong.