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

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>

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>
);
});

View File

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

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"
}

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

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

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

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)