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
Prev Previous commit
Next Next commit
Pass appkit config to css function
We should not rely on a hook in a function
working, so better let the calling component
pass it.
  • Loading branch information
Arnei committed May 29, 2024

Verified

This commit was signed with the committer’s verified signature.
ChristianGruen Christian Grün
commit 9ccf24054d20b4392c2391b5bff08ab71b1679f2
20 changes: 13 additions & 7 deletions src/button.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { Interpolation, Theme } from "@emotion/react";
import { focusStyle, match, useAppkitConfig } from ".";
import { AppkitConfig, focusStyle, match, useAppkitConfig } from ".";

/**
* A mostly unstyled button used to build buttons. Always use this instead of
@@ -33,18 +33,24 @@ type ButtonProps = JSX.IntrinsicElements["button"] & {

/** 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>
),
({ kind = "normal", extraCss, children, ...rest }, ref) => {
const config = useAppkitConfig();

return (
<button ref={ref} type="button" css={css(config, 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 css = (
config: AppkitConfig,
kind: Kind,
extraCss: Interpolation<Theme> = {}
): Interpolation<Theme> => {
const notDisabledStyle = match(kind, {
"normal": () => ({
border: `1px solid ${config.colors.neutral40}`,
Loading