doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: base styles for segmented buttons

This commit is contained in:
doryan 2024-02-08 12:49:46 +04:00
parent 22d0139231
commit acb9112c95
13 changed files with 906 additions and 1892 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
app/page.tsx
View File

@ -8,6 +8,10 @@ import { CardHeader } from '../src/primitive-components/card/card-header';
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Button } from '../src/primitive-components/button-components/button/button';
import { Typography } from '../src/primitive-components/typography/typography';
import {
ButtonLayout,
SegmentedButtons,
} from '../src/primitive-components/components';
export default function Page() {
return (
@ -21,15 +25,10 @@ export default function Page() {
padding: '8px',
}}
>
<div style={{ display: 'flex', gap: '8px', maxWidth: '90vw' }}>
<div style={{ display: 'flex', gap: '8px', maxWidth: '512px' }}>
<Card variant={'outlined'}>
<CardHeader>
<Typography.h1> Header-1 </Typography.h1>
<Typography.h2> Header-2 </Typography.h2>
<Typography.h3> Header-3 </Typography.h3>
<Typography.h4> Header-4 </Typography.h4>
<Typography.h5> Header-5 </Typography.h5>
<Typography.h6> Header-6 </Typography.h6>
</CardHeader>
<CardActionArea>
<CardMedia src={testImage1.src} type={'img'} />
@ -50,88 +49,14 @@ export default function Page() {
</CardBody>
</CardActionArea>
<CardFooter>
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardMedia src={testImage1.src} type={'img'} />
<CardActionArea>
<CardBody>
<h4>
<strong>Sub-header</strong>
</h4>
<p>
Lorem ipsum dolor sit amet, consecrate
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</CardBody>
</CardActionArea>
<CardFooter>
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardActionArea>
<CardMedia src={testImage1.src} type={'img'} />
<CardBody>
<h4>
<strong>Sub-header</strong>
</h4>
<p>
Lorem ipsum dolor sit amet, consecrate
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</CardBody>
</CardActionArea>
<CardFooter>
<Button>label</Button>
</CardFooter>
</Card>
<Card variant={'elevated'}>
<CardHeader>
<h1>Header</h1>
</CardHeader>
<CardMedia src={testImage1.src} type={'img'} />
<CardActionArea>
<CardBody>
<h4>
<strong>Sub-header</strong>
</h4>
<p>
Lorem ipsum dolor sit amet, consecrate
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</CardBody>
</CardActionArea>
<CardFooter>
<Button>label</Button>
<div className={'flex flex-row gap-3'}>
<Button>label</Button>
<SegmentedButtons>
<ButtonLayout>Label 1</ButtonLayout>
<ButtonLayout>Label 2</ButtonLayout>
<ButtonLayout>Label 3</ButtonLayout>
</SegmentedButtons>
</div>
</CardFooter>
</Card>
</div>

15
src/primitive-components/button-components/segmented-buttons/segmented-buttons.tsx
View File

@ -1,4 +1,4 @@
import React, { forwardRef } from 'react';
import React, { cloneElement, forwardRef, ReactElement } from 'react';
import { SegmentedButtonProps } from './segmented-buttons.types';
export const SegmentedButtons = forwardRef<
@ -9,12 +9,21 @@ export const SegmentedButtons = forwardRef<
throw 'You must build segmented button with 2 or more buttton';
}
const buttons = children.map((button: ReactElement, index) => {
const classes =
`m3-button-segment ${button.props.className ?? ''}`.trimEnd();
return cloneElement(button, {
className: classes,
key: index,
});
});
return (
<div
className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
ref={ref}
>
{children}
{buttons}
</div>
);
});
});

BIN
src/styles/.sass-cache/63ebf5d4d886187bdbae74a940af2682bc8cb5f1/segmented-button.sassc Normal file
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/card.sassc
View File

Binary file not shown.

BIN
src/styles/.sass-cache/dea5f55dc4d726c922f4841b8139fc62e62f2286/generics.sassc
View File

Binary file not shown.

BIN
src/styles/button-styles/.sass-cache/63ebf5d4d886187bdbae74a940af2682bc8cb5f1/segmented-button.sassc Normal file
View File

Binary file not shown.

4
src/styles/button-styles/segmented-button.css Normal file
View File

@ -0,0 +1,4 @@
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
width: max-content; }
/*# sourceMappingURL=segmented-button.css.map */

7
src/styles/button-styles/segmented-button.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AACI,yDAA+B;EAC3B,KAAK,EAAE,WAAW",
"sources": ["segmented-button.sass"],
"names": [],
"file": "segmented-button.css"
}

38
src/styles/button-styles/segmented-button.sass Normal file
View File

@ -0,0 +1,38 @@
div.m3.m3-segmented-buttons
display: flex
flex-direction: row
outline-offset: -1px
width: min-content
border-radius: 20px
& > button.m3.m3-button-segment
width: max-content
border-radius: 0
box-sizing: border-box
height: 40px
&
border: 1px solid var(--md-sys-color-outline)
border-right: 0.5px
border-left: 0.5px
border-left-style: solid
border-right-style: solid
border-left-color: var(--md-sys-color-outline)
border-right-color: var(--md-sys-color-outline)
min-width: 107px
&:first-child
border: 1px solid var(--md-sys-color-outline)
border-right: 0.5px
border-right-style: solid
border-right-color: var(--md-sys-color-outline)
min-width: 108px - 0.5px
border-radius: 20px 0 0 20px
&:last-child
border: 1px solid var(--md-sys-color-outline)
border-left: 0.5px
border-left-style: solid
border-left-color: var(--md-sys-color-outline)
min-width: 108px - 0.5px
border-radius: 0 20px 20px 0

4
src/styles/card.sass
View File

@ -3,7 +3,7 @@
$padding: 16px
@function padding-calculating($has-padding)
@if($has-padding == true)
@if $has-padding == true
@return $padding
@else
@return 0px
@ -19,7 +19,7 @@ div.m3.m3-card > .m3-card-action-area:first-child > .m3-card-action-area-content
padding: padding-calculating(false)
border-radius: 12px !important
:is(div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media).m3
div.m3-card-footer, header.m3-card-header, section.m3-card-body, .m3-card-media.m3
padding: padding-calculating(true)
display: block
box-sizing: border-box

2614
src/styles/generics.css
View File

File diff suppressed because it is too large Load Diff

8
src/styles/generics.css.map
View File

File diff suppressed because one or more lines are too long

7
src/styles/generics.sass
View File

@ -11,15 +11,16 @@
@import "button-styles/fabs"
@import "button-styles/button"
@import "button-styles/icon-button"
@import "button-styles/segmented-button"
@import "input-styles/radio"
@import "input-styles/swtich"
@import "input-styles/checkbox"
@import "input-styles/text-field"
@import "./themes/tokens"
@import "./themes/colors.module"
@import "./themes/typography.module"
@import "./themes/tokens.css"
@import "./themes/colors.module.css"
@import "./themes/typography.module.css"
@import "./themes/theme.dark.css" (prefers-color-scheme: dark)
@import "./themes/theme.light.css" (prefers-color-scheme: light)