Merge remote-tracking branch 'origin/main'

This commit is contained in:
doryan04 2024-02-02 18:14:10 +04:00
commit fe273c2759
19 changed files with 791 additions and 1128 deletions

View File

@ -1,113 +1,24 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import Fabs from './components/fabs'; import { Button, Divider } from '../src/primitive-components/components';
import Badges from './components/badges';
import Radios from './components/radios';
import Buttons from './components/buttons';
import Switches from './components/switches';
import Checkboxes from './components/checkboxes';
import IconButtons from './components/icon-buttons';
import { TextFields } from './components/text-fields';
import {
ButtonLayout,
Divider,
SegmentedButtons,
} from '../src/primitive-components/components';
export default function Page() { export default function Page() {
return ( return (
<Fragment> <Fragment>
<div <div className={'m3 m3-wrapper'}>
style={{ <div>
display: 'flex', <Button>Label</Button>
flexDirection: 'column', </div>
justifyContent: 'center', <Divider orientation={'vertical'} variant={'full-width'} />
alignItems: 'center', <div>
overflowX: 'auto', <Button>Label</Button>
gap: '0em', </div>
}} <Divider orientation={'vertical'} variant={'inset'} />
> <div>
<h1>Google Material You UI kit</h1> <Button>Label</Button>
<div </div>
style={{ <Divider orientation={'vertical'} variant={'middle-inset'} />
display: 'flex', <div>
flexDirection: 'column', <Button disabled>Label</Button>
gap: '0.5em',
justifyContent: 'center',
alignItems: 'center',
}}
>
<div className={'m3 m3-wrapper'}>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<SegmentedButtons>
<ButtonLayout>Segment 1</ButtonLayout>
<ButtonLayout>Segment 2</ButtonLayout>
</SegmentedButtons>
</div>
</div>
<div
className={'m3 m3-wrapper'}
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
justifyContent: 'space-evenly',
alignItems: 'center',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<Buttons />
</div>
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<div
style={{
display: 'flex',
flexDirection: 'row',
padding: '25px',
}}
>
<IconButtons />
</div>
</div>
<div
className={'m3 m3-wrapper'}
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
justifyContent: 'space-evenly',
alignItems: 'center',
}}
>
<Checkboxes />
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<Radios />
<Divider
orientation={'vertical'}
variant={'middle-inset'}
/>
<Badges />
</div>
<Switches />
<TextFields />
<Fabs />
</div> </div>
</div> </div>
</Fragment> </Fragment>

View File

@ -18,7 +18,7 @@ const Badge = forwardRef<SVGSVGElement, BadgeProps>(
> >
{children && ( {children && (
<text x={'50%'} y={'50%'}> <text x={'50%'} y={'50%'}>
{children} {parseInt(children) > 999 ? '999+' : children}
</text> </text>
)} )}
</svg> </svg>

View File

@ -0,0 +1,20 @@
import React, { forwardRef, HTMLAttributes } from 'react';
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
variant?: 'outlined' | 'filled' | 'elevated';
}
const Card = forwardRef<HTMLDivElement, CardProps>(
({ variant = 'filled', ...props }, ref) => {
const classes =
`m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
return (
<div {...props} className={classes} ref={ref}>
{props.children}
</div>
);
},
);
export default Card;

View File

@ -1,26 +1,26 @@
hr.m3.m3-divider hr.m3.m3-divider
border: none border: none
outline: 0.5px solid var(--md-sys-color-outline-variant) outline: 0.5px solid var(--md-sys-color-outline-variant)
margin-inline: 4px
position: relative position: relative
margin: 0
&.vertical &.vertical
height: 100% height: auto
writing-mode: vertical-lr
&.inset &.inset
margin-top: 16px margin-inline-start: 16px
&.middle-inset &.middle-inset
margin-bottom: 16px margin-inline: 16px
margin-top: 16px
&.horizontal &.horizontal
width: 100% width: auto
writing-mode: horizontal-tb
&.inset &.inset
margin-left: 16px margin-inline-start: 16px
&.middle-inset &.middle-inset
margin-left: 16px margin-inline: 16px
margin-right: 16px

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -25,7 +25,6 @@ html
user-select: none user-select: none
.m3.m3-wrapper .m3.m3-wrapper
width: 100%
position: relative position: relative
display: block display: block
background-color: var(--md-sys-color-surface) background-color: var(--md-sys-color-surface)