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

RENAMED: From checkbox-layout -> input-layout 

ADDED: Slider componnet (without styles and functionality)
CHANGED: segmented-button styles
This commit is contained in:
doryan04 2024-02-12 21:55:58 +04:00
parent d94e1b7360
commit 6493687fdf
10 changed files with 44 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/page.tsx
View File

@ -11,6 +11,7 @@ import { CardActionArea } from '../src/primitive-components/card/card-action-are
import { Button } from '../src/primitive-components/button-components/button/button';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
import {Slider} from "../src/primitive-components/input-components/slider/slider";
export default function Page() {
return (
@ -69,6 +70,7 @@ export default function Page() {
</SegmentButton>
<SegmentButton>Label 3</SegmentButton>
</SegmentedButtons>
<Slider />
<Checkbox />
</div>
</CardFooter>

4
src/primitive-components/input-components/checkbox/checkbox.tsx
View File

@ -4,7 +4,7 @@ import { bool } from 'prop-types';
import { CheckboxProps } from './checkbox.types';
import { RippleEffect } from '../../ripple/ripple-effect';
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { InputLayout } from '../input-layout/input-layout';
import {
forwardRef,
useEffect,
@ -37,7 +37,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
return (
<label {...events} className={extraClassStyles}>
<CheckBoxLayout
<InputLayout
{...props}
indeterminate={props.indeterminate}
ref={checkboxRef}

6
src/primitive-components/input-components/checkbox-layout/check-box-layout.tsx → src/primitive-components/input-components/input-layout/input-layout.tsx
View File

@ -7,9 +7,9 @@ import React, {
useRef,
} from 'react';
import { bool, string } from 'prop-types';
import { CheckboxLayoutProps } from './checkbox-layout.types';
import { InputLayoutProps } from './input-layout.types';
export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
export const InputLayout = forwardRef<HTMLInputElement, InputLayoutProps>(
({ indeterminate, typeInput, type, ...props }, ref) => {
const checkboxRef = useRef<HTMLInputElement>(null);
@ -37,7 +37,7 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
},
);
CheckBoxLayout.propTypes = {
InputLayout.propTypes = {
typeInput: string,
indeterminate: bool,
};

2
src/primitive-components/input-components/checkbox-layout/checkbox-layout.types.ts → src/primitive-components/input-components/input-layout/input-layout.types.ts
View File

@ -1,6 +1,6 @@
import { InputHTMLAttributes } from 'react';
export interface CheckboxLayoutProps
export interface InputLayoutProps
extends InputHTMLAttributes<HTMLInputElement> {
indeterminate?: boolean;
typeInput?: string;

4
src/primitive-components/input-components/radio/radio.tsx
View File

@ -5,7 +5,7 @@ import { RadioProps } from './radio.types';
import { RippleEffect } from '../../ripple/ripple-effect';
import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { InputLayout } from '../input-layout/input-layout';
/**
* Radio component
@ -23,7 +23,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
return (
<div {...events} className={extraClassStyles}>
<CheckBoxLayout {...props} ref={ref} type={'radio'} />
<InputLayout {...props} ref={ref} type={'radio'} />
<span className={'m3 m3-radio-state-layer'} />
<svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
<circle

9
src/primitive-components/input-components/slider/slider.tsx Normal file
View File

@ -0,0 +1,9 @@
import React, { forwardRef, HTMLAttributes } from 'react';
import { InputLayout } from '../input-layout/input-layout';
export const Slider = forwardRef<
HTMLInputElement,
HTMLAttributes<HTMLInputElement>
>((props, ref) => {
return <InputLayout ref={ref} type={'range'} />;
});

6
src/primitive-components/input-components/switch/switch.tsx
View File

@ -3,8 +3,8 @@
import { bool } from 'prop-types';
import React, { forwardRef } from 'react';
import { SwitchMainProps } from './switch.types';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
import { InputLayout } from '../input-layout/input-layout';
import { LabelPlacement } from '../input-layout/input-layout.types';
/**
* Switch component
@ -16,7 +16,7 @@ export const Switch = forwardRef<
SwitchMainProps & LabelPlacement
>(({ icon, selected = false, ...props }, ref) => (
<div className={'m3 m3-switch'}>
<CheckBoxLayout
<InputLayout
{...props}
className={`m3 ${props.className ?? ''}`.trimEnd()}
ref={ref}

23
src/styles/button-styles/segmented-button.sass
View File

@ -7,25 +7,22 @@ div.m3.m3-segmented-buttons
box-sizing: border-box
border-collapse: collapse
& > button.m3.m3-button-segment
margin: 0 -0.5px 0 -0.5px
& > button.m3.m3-button-segment:first-child
border-radius: 20px 0 0 20px
& > button.m3.m3-button-segment:last-child
border-radius: 0 20px 20px 0
& > button.m3.m3-button-segment
height: 40px
display: flex
min-width: 108px
border-radius: 0
width: max-content
padding-inline: 10px
margin: 0 -0.5px 0 -0.5px
background-color: transparent
border: 1px solid var(--md-sys-color-outline)
&
border-radius: 0
background-color: transparent
&:first-child
border-radius: 20px 0 0 20px
&:last-child
border-radius: 0 20px 20px 0
& > span
color: var(--md-sys-color-on-surface)
@ -36,10 +33,10 @@ div.m3.m3-segmented-buttons
&.selected
background-color: var(--md-sys-color-secondary-container)
&.selected > span
& > span
color: var(--md-sys-color-on-secondary-container)
&.selected > svg > text
& > text
fill: var(--md-sys-color-on-secondary-container)
& > span.m3.m3-button-segment-state-layer

22
src/styles/generics.css
View File

@ -731,7 +731,15 @@ div.m3.m3-segmented-buttons {
border-collapse: collapse;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
height: 40px;
display: flex;
min-width: 108px;
border-radius: 0;
width: max-content;
padding-inline: 10px;
margin: 0 -0.5px 0 -0.5px;
background-color: transparent;
border: 1px solid var(--md-sys-color-outline);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
border-radius: 20px 0 0 20px;
@ -739,18 +747,6 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child {
border-radius: 0 20px 20px 0;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
height: 40px;
display: flex;
min-width: 108px;
width: max-content;
padding-inline: 10px;
border: 1px solid var(--md-sys-color-outline);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
border-radius: 0;
background-color: transparent;
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
color: var(--md-sys-color-on-surface);
}
@ -763,7 +759,7 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span {
color: var(--md-sys-color-on-secondary-container);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > svg > text {
div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span > text {
fill: var(--md-sys-color-on-secondary-container);
}
div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {

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

File diff suppressed because one or more lines are too long