Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add modals from Tobira #5

Merged
merged 19 commits into from
May 29, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Remove styledButton.tsx
Move code over to button.tsx
Arnei committed May 28, 2024
commit 52cf16c8b7631cdbf76f1d626cff5929677aa9ab
85 changes: 85 additions & 0 deletions src/button.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React from "react";
import { Interpolation, Theme } from "@emotion/react";
import { focusStyle, match, useAppkitConfig } from ".";

/**
* A mostly unstyled button used to build buttons. Always use this instead of
@@ -20,3 +22,86 @@ export const ProtoButton = React.forwardRef<HTMLButtonElement, JSX.IntrinsicElem
{...rest}
>{children}</button>,
);

/** The kind of buttons a "Button" can be. Used for styling */
export type Kind = "normal" | "danger" | "happy";

type ButtonProps = JSX.IntrinsicElements["button"] & {
kind?: Kind;
extraCss?: Interpolation<Theme>;
};

/** A styled button */
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ kind = "normal", extraCss, children, ...rest }, ref) => (
<button ref={ref} type="button" css={css(kind, extraCss)} {...rest}>{children}</button>
),
);

/**
* Returns css for different types of buttons.
* Comes in the kinds "normal", "danger" and "happy".
*/
const css = (kind: Kind, extraCss: Interpolation<Theme> = {}): Interpolation<Theme> => {
const config = useAppkitConfig();

const notDisabledStyle = match(kind, {
"normal": () => ({
border: `1px solid ${config.colors.neutral40}`,
color: config.colors.neutral90,
"&:hover, &:focus-visible": {
border: `1px solid ${config.colors.neutral60}`,
backgroundColor: config.colors.neutral15,
},
}),

"danger": () => ({
border: `1px solid ${config.colors.danger4}`,
color: config.colors.danger4,
"&:hover, &:focus-visible": {
border: `1px solid ${config.colors.danger5}`,
backgroundColor: config.colors.danger4,
color: config.colors.danger0, // danger0BwInverted
},
}),

"happy": () => ({
border: `1px solid ${config.colors.happy4}`,
color: config.colors.happy1, // happy0BwInverted
backgroundColor: config.colors.happy3,
"&:hover, &:focus-visible": {
border: `1px solid ${config.colors.happy5}`,
backgroundColor: config.colors.happy4,
color: config.colors.happy0, // happy1BwInverted
},
}),

...focusStyle(config, { offset: -1 }),
});

return {
borderRadius: 8,
display: "inline-flex",
alignItems: "center",
padding: "7px 14px",
gap: 12,
whiteSpace: "nowrap",
backgroundColor: config.colors.neutral10,
transition: "background-color 0.15s, border-color 0.15s",
textDecoration: "none",
"& > svg": {
fontSize: 20,
},
"&:disabled": {
border: `1px solid ${config.colors.neutral25}`,
color: config.colors.neutral40,
},
"&:not([disabled])": {
cursor: "pointer",
...notDisabledStyle,
},
...extraCss as Record<string, unknown>,
};
};

export const buttonStyle = css;
1 change: 0 additions & 1 deletion src/index.tsx
Original file line number Diff line number Diff line change
@@ -12,7 +12,6 @@ export * from "./header";
export * from "./spinner";
export * from "./util";
export * from "./modal";
export * from "./styledButton";


/**
85 changes: 0 additions & 85 deletions src/styledButton.tsx

This file was deleted.