BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Update themed components with refs and css

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-10 21:09:36 -05:00
parent 456feed128
commit 2e54b81d8f
72 changed files with 1147 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
lib/component/button/Button.tsx
View File

@@ -4,8 +4,7 @@ import { forwardRef } from "react";
const Button = forwardRef<HTMLButtonElement, ButtonProps>((
{
const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
className,
type="button",
rounding = "lg",
@@ -15,52 +14,53 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((
disabled,
...buttonProps
}, ref ) => {
return (
<button
data-testid="mattrixwv-button"
ref={ref}
type={type}
{...buttonProps}
disabled={disabled}
className={clsx(
className,
//Focus
"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
//Rounding
{
"rounded-sm": rounding === "sm",
"rounded-md": rounding === "md",
"rounded-lg": rounding === "lg",
"rounded-full": rounding === "full"
},
//Size and shape
{
"p-0": size === "xs" && shape === "square",
"p-1": size === "sm" && shape === "square",
"p-2": size === "md" && shape === "square",
"p-3": size === "lg" && shape === "square",
"p-4": size === "xl" && shape === "square",
return (
<button
data-testid="mattrixwv-button"
ref={ref}
type={type}
{...buttonProps}
disabled={disabled}
className={clsx(
className,
//Focus
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
//Rounding
{
"rounded-sm": rounding === "sm",
"rounded-md": rounding === "md",
"rounded-lg": rounding === "lg",
"rounded-full": rounding === "full"
},
//Size and shape
{
"p-0": size === "xs" && shape === "square",
"p-1": size === "sm" && shape === "square",
"p-2": size === "md" && shape === "square",
"p-3": size === "lg" && shape === "square",
"p-4": size === "xl" && shape === "square",
"px-1 py-0": size === "xs" && shape === "rectangle",
"px-2 py-1": size === "sm" && shape === "rectangle",
"px-4 py-2": size === "md" && shape === "rectangle",
"px-6 py-3": size === "lg" && shape === "rectangle",
"px-8 py-4": size === "xl" && shape === "rectangle",
},
//Variant
{
"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
"border-none": variant === "ghost" || variant === "icon"
},
//Disabled
{
"cursor-pointer": !disabled,
"cursor-not-allowed opacity-75": disabled
}
)}
/>
);
}
);
"px-1 py-0": size === "xs" && shape === "rectangle",
"px-2 py-1": size === "sm" && shape === "rectangle",
"px-4 py-2": size === "md" && shape === "rectangle",
"px-6 py-3": size === "lg" && shape === "rectangle",
"px-8 py-4": size === "xl" && shape === "rectangle",
},
//Variant
{
"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
"border-none": variant === "ghost" || variant === "icon"
},
//Disabled
{
"cursor-pointer": !disabled,
"cursor-not-allowed opacity-75": disabled
}
)}
/>
);
});
Button.displayName = "Button";
export default Button;