Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Accordion styleOverride and Story #1107

Closed
wants to merge 2 commits into from
Closed

Add Accordion styleOverride and Story #1107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bb2a42
Add Accordion styleOverride and Story
NataliaVizintini May 10, 2023
fc9bdd8
Remove fixed height value
NataliaVizintini May 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/pretty-owls-pay.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@comet/admin-theme": patch
NataliaVizintini marked this conversation as resolved.
Show resolved Hide resolved
---

Add Accordion styleOverride and Story
22 changes: 22 additions & 0 deletions packages/admin/admin-stories/src/docs/components/Accordion/Accordion.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Canvas, Meta, Source, Story } from "@storybook/addon-docs";

import dedent from "ts-dedent";

<Meta title="Docs/Components/Accordion" />

# Accordion

> Accordion allows user to show or hide content sections.
>
> \- [MUI Docs](https://mui.com/material-ui/react-accordion/)
The Comet Admin `Accordion` extends [Material UI's `Accordion`](https://mui.com/material-ui/react-accordion) by adding a custom style.

#### Props

The Accordion component accepts all props from the Material UI Accordion component.

#### Example

<Canvas>
<Story id="stories-components-accordion--basicaccordion" />
</Canvas>
31 changes: 31 additions & 0 deletions packages/admin/admin-stories/src/docs/components/Accordion/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import { Accordion, AccordionDetails, AccordionSummary, Grid, Typography } from "@mui/material";
import { storiesOf } from "@storybook/react";
import * as React from "react";

storiesOf("stories/components/Accordion", module).add("BasicAccordion", () => {
return (
<Accordion defaultExpanded>
<AccordionSummary expandIcon={<ArrowForwardIosSharpIcon />}>
<Grid container spacing={4} alignItems="center" justifyContent="space-between">
<Grid item>
<Typography variant="h5" sx={{ textTransform: "uppercase", fontWeight: "medium" }}>
This is a basic accordion
</Typography>
<Typography variant="body2" color="textSecondary">
Support Text
</Typography>
</Grid>
<Grid item>
<Typography variant="subtitle2">End Adornment</Typography>
</Grid>
</Grid>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
);
});
38 changes: 38 additions & 0 deletions packages/admin/admin-theme/src/componentsTheme/MuiAccordion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { accordionDetailsClasses, accordionSummaryClasses } from "@mui/material";

import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
import { GetMuiComponentTheme } from "./getComponentsTheme";

export const getMuiAccordion: GetMuiComponentTheme<"MuiAccordion"> = (component, { palette }) => ({
...component,
defaultProps: {
square: true,
disableGutters: true,
elevation: 0,
...component?.defaultProps,
},
styleOverrides: mergeOverrideStyles<"MuiAccordion">(component?.styleOverrides, {
root: {
border: `solid ${palette.divider}`,
"&:not(:last-child)": {
marginBottom: "20px",
},
"&:before": {
display: "none",
},
[`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]: {
transform: "rotate(90deg)",
},
[`& .${accordionSummaryClasses.root}`]: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jamesricky Shouldn't summary and details styles be styled in their respective components themes?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, good point 👍🏼

display: "flex",
flexDirection: "row-reverse",
padding: "20px",
gap: "20px",
},
[`& .${accordionDetailsClasses.root}`]: {
borderTop: `solid ${palette.divider}`,
padding: "40px",
},
},
}),
});
2 changes: 2 additions & 0 deletions packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Shadows } from "@mui/material/styles/shadows";
import { ZIndex } from "@mui/material/styles/zIndex";
import { Spacing } from "@mui/system";

import { getMuiAccordion } from "./MuiAccordion";
import { getMuiAppBar } from "./MuiAppBar";
import { getMuiAutocomplete } from "./MuiAutocomplete";
import { getMuiButton } from "./MuiButton";
Expand Down Expand Up @@ -56,6 +57,7 @@ export type GetMuiComponentTheme<ClassesName extends keyof ComponentNameToClassK

export const getComponentsTheme = (components: Components, themeData: ThemeData): ThemeOptions["components"] => ({
...components,
MuiAccordion: getMuiAccordion(components.MuiAccordion, themeData),
MuiAppBar: getMuiAppBar(components.MuiAppBar, themeData),
MuiAutocomplete: getMuiAutocomplete(components.MuiAutocomplete, themeData),
MuiButton: getMuiButton(components.MuiButton, themeData),
Expand Down