Skip to content

Commit

Permalink
[core] Remove Material UI dependency (#585)
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaldudak
michaldudak authored Sep 6, 2024
1 parent c3f4e65 commit 14fd987
Show file tree
Hide file tree
Showing 31 changed files with 434 additions and 857 deletions.
25 changes: 21 additions & 4 deletions docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import * as React from 'react';
import * as Checkbox from '@base_ui/react/Checkbox';
import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
import * as Field from '@base_ui/react/Field';
import Check from '@mui/icons-material/Check';

export default function UnstyledCheckboxIndeterminateGroup() {
return (
Expand All @@ -16,23 +15,23 @@ export default function UnstyledCheckboxIndeterminateGroup() {
<Field.Root>
<Checkbox.Root className="Checkbox" name="red">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
<CheckIcon className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Red</Field.Label>
</Field.Root>
<Field.Root>
<Checkbox.Root className="Checkbox" name="green">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
<CheckIcon className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Green</Field.Label>
</Field.Root>
<Field.Root>
<Checkbox.Root className="Checkbox" name="blue">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
<CheckIcon className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Blue</Field.Label>
Expand Down Expand Up @@ -150,3 +149,21 @@ function Styles() {
</style>
);
}

function CheckIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
{...props}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
/>
</svg>
);
}
25 changes: 21 additions & 4 deletions docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/css/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import * as React from 'react';
import * as Checkbox from '@base_ui/react/Checkbox';
import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
import * as Field from '@base_ui/react/Field';
import Check from '@mui/icons-material/Check';

export default function UnstyledCheckboxIndeterminateGroup() {
return (
Expand All @@ -16,23 +15,23 @@ export default function UnstyledCheckboxIndeterminateGroup() {
<Field.Root>
<Checkbox.Root className="Checkbox" name="red">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
<CheckIcon className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Red</Field.Label>
</Field.Root>
<Field.Root>
<Checkbox.Root className="Checkbox" name="green">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
<CheckIcon className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Green</Field.Label>
</Field.Root>
<Field.Root>
<Checkbox.Root className="Checkbox" name="blue">
<Checkbox.Indicator className="Checkbox-indicator">
<Check className="Check" />
<CheckIcon className="Check" />
</Checkbox.Indicator>
</Checkbox.Root>
<Field.Label className="Checkbox-label">Blue</Field.Label>
Expand Down Expand Up @@ -150,3 +149,21 @@ function Styles() {
</style>
);
}

function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
{...props}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
/>
</svg>
);
}
19 changes: 17 additions & 2 deletions docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { css, styled } from '@mui/system';
import * as BaseCheckbox from '@base_ui/react/Checkbox';
import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
import * as Field from '@base_ui/react/Field';
import Check from '@mui/icons-material/Check';

export default function UnstyledCheckboxIndeterminateGroup() {
return (
Expand Down Expand Up @@ -107,7 +106,23 @@ const Checkbox = styled(BaseCheckbox.Root)(
`,
);

const CheckIcon = styled(Check)`
const CheckIcon = styled(function CheckIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
{...props}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
/>
</svg>
);
})`
height: 100%;
width: 100%;
`;
Expand Down
19 changes: 17 additions & 2 deletions docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/system/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { css, styled } from '@mui/system';
import * as BaseCheckbox from '@base_ui/react/Checkbox';
import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
import * as Field from '@base_ui/react/Field';
import Check from '@mui/icons-material/Check';

export default function UnstyledCheckboxIndeterminateGroup() {
return (
Expand Down Expand Up @@ -107,7 +106,23 @@ const Checkbox = styled(BaseCheckbox.Root)(
`,
);

const CheckIcon = styled(Check)`
const CheckIcon = styled(function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
{...props}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
/>
</svg>
);
})`
height: 100%;
width: 100%;
`;
Expand Down
27 changes: 22 additions & 5 deletions docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { useTheme } from '@mui/system';
import * as BaseCheckbox from '@base_ui/react/Checkbox';
import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
import * as Field from '@base_ui/react/Field';
import Check from '@mui/icons-material/Check';

function classNames(...classes) {
return classes.filter(Boolean).join(' ');
Expand Down Expand Up @@ -41,23 +40,23 @@ export default function UnstyledCheckboxIntroduction() {
<Label>
<Checkbox name="red">
<Indicator>
<Check className="w-full h-full" />
<CheckIcon className="w-full h-full" />
</Indicator>
</Checkbox>
Red
</Label>
<Label>
<Checkbox name="green">
<Indicator>
<Check className="w-full h-full" />
<CheckIcon className="w-full h-full" />
</Indicator>
</Checkbox>
Green
</Label>
<Label>
<Checkbox name="blue">
<Indicator>
<Check className="w-full h-full" />
<CheckIcon className="w-full h-full" />
</Indicator>
</Checkbox>
Blue
Expand Down Expand Up @@ -113,7 +112,7 @@ const Indicator = React.forwardRef(function Indicator(props, ref) {
)
}
>
<Check className="w-full h-full" />
<CheckIcon className="w-full h-full" />
</BaseCheckbox.Indicator>
);
});
Expand All @@ -124,3 +123,21 @@ Indicator.propTypes = {
*/
className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
};

function CheckIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
{...props}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
/>
</svg>
);
}
27 changes: 22 additions & 5 deletions docs/data/components/checkbox-group/UnstyledCheckboxGroupIntroduction/tailwind/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useTheme } from '@mui/system';
import * as BaseCheckbox from '@base_ui/react/Checkbox';
import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
import * as Field from '@base_ui/react/Field';
import Check from '@mui/icons-material/Check';

function classNames(...classes: Array<string | undefined | null | false>) {
return classes.filter(Boolean).join(' ');
Expand Down Expand Up @@ -40,23 +39,23 @@ export default function UnstyledCheckboxIntroduction() {
<Label>
<Checkbox name="red">
<Indicator>
<Check className="w-full h-full" />
<CheckIcon className="w-full h-full" />
</Indicator>
</Checkbox>
Red
</Label>
<Label>
<Checkbox name="green">
<Indicator>
<Check className="w-full h-full" />
<CheckIcon className="w-full h-full" />
</Indicator>
</Checkbox>
Green
</Label>
<Label>
<Checkbox name="blue">
<Indicator>
<Check className="w-full h-full" />
<CheckIcon className="w-full h-full" />
</Indicator>
</Checkbox>
Blue
Expand Down Expand Up @@ -108,8 +107,26 @@ const Indicator = React.forwardRef<HTMLSpanElement, BaseCheckbox.IndicatorProps>
)
}
>
<Check className="w-full h-full" />
<CheckIcon className="w-full h-full" />
</BaseCheckbox.Indicator>
);
},
);

function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
{...props}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
/>
</svg>
);
}
35 changes: 31 additions & 4 deletions docs/data/components/checkbox-group/UnstyledCheckboxGroupNested.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import * as BaseCheckbox from '@base_ui/react/Checkbox';
import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';
import * as Field from '@base_ui/react/Field';
import { styled } from '@mui/system';
import HorizontalRule from '@mui/icons-material/HorizontalRule';
import Check from '@mui/icons-material/Check';

const colors = ['red', 'green', 'blue'];

Expand Down Expand Up @@ -99,12 +97,41 @@ const Checkbox = styled(BaseCheckbox.Root)(
`,
);

const HorizontalRuleIcon = styled(HorizontalRule)`
const HorizontalRuleIcon = styled(function HorizontalRuleIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
{...props}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path d="M4 11h16v2H4z" fill="currentColor" />
</svg>
);
})`
height: 100%;
width: 100%;
`;

const CheckIcon = styled(Check)`
const CheckIcon = styled(function CheckIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
{...props}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
fill="currentColor"
/>
</svg>
);
})`
height: 100%;
width: 100%;
`;
Expand Down
Loading

0 comments on commit 14fd987

Please sign in to comment.