Skip to content

Commit

Permalink
Shared button component (WIP)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bvaughn
bvaughn committed Feb 21, 2024
1 parent 4c2f864 commit fdd50b1
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 60 deletions.
50 changes: 50 additions & 0 deletions packages/replay-next/components/Button.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
.Button {
font-family: var(--font-family-default);
font-size: var(--font-size-regular);
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
}
.Button:disabled {
--accent-color: var(--background-color-disabled-button);
--accent-color-hover: var(--background-color-disabled-button);
--contrast-color: var(--color-disabled-button);

color: var(--color-dimmer);
}

.Button[data-color="primary"]:not(:disabled) {
--accent-color: var(--primary-accent);
--accent-color-hover: var(--primary-accent-hover);
--contrast-color: var(--color-primary-button);
}
.Button[data-color="secondary"]:not(:disabled) {
--accent-color: var(--secondary-accent);
--accent-color-hover: var(--secondary-accent-hover);
--contrast-color: var(--color-secondary-button);
}

.Button[data-variant="outline"] {
border: 1px solid var(--accent-color);
}
.Button[data-variant="outline"]:hover {
border-color: var(--accent-color-hover);
}
.Button[data-variant="solid"] {
background-color: var(--accent-color);
color: var(--contrast-color);
}
.Button[data-variant="solid"]:hover {
background-color: var(--accent-color-hover);
}

.Button[data-size="large"] {
font-size: var(--font-size-large);
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
}
.Button[data-size="small"] {
font-size: var(--font-size-small);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
24 changes: 24 additions & 0 deletions packages/replay-next/components/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { ButtonHTMLAttributes } from "react";

import styles from "./Button.module.css";

export function Button({
color,
size = "normal",
variant = "solid",
...rest
}: ButtonHTMLAttributes<HTMLButtonElement> & {
color?: "primary" | "secondary";
size?: "normal" | "large" | "small";
variant?: "outline" | "solid";
}) {
return (
<button
className={styles.Button}
data-color={color}
data-size={size}
data-variant={variant}
{...rest}
/>
);
}
6 changes: 3 additions & 3 deletions packages/replay-next/pages/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@
--color-link: var(--primary-accent);
--color-primary-button: #ffffff;
--color-secondary-button: #ffffff;
--color-disabled-button: #ffffff;
--color-disabled-button: var(--color-default);
--color-high-contrast-button: #ffffff;
--color-warning: #fce2a1;
--color-search-results: #d7d7db;
Expand Down Expand Up @@ -745,7 +745,7 @@
--background-color-contrast-5: #e1e6ed;

--background-color-default: #e9e9e9;
--background-color-disabled-button: #666666;
--background-color-disabled-button: #e6e7eb;
--background-color-error: #fcefee;
--background-color-highlight-change: mark;
--background-color-high-contrast-button: #f2f2f2;
Expand Down Expand Up @@ -777,7 +777,7 @@
--color-default: #223344;
--color-dim: rgba(135, 135, 137, 0.9);
--color-dimmer: #aaaaaa;
--color-disabled-button: var(--theme-base-100);
--color-disabled-button: var(--color-default);
--color-error: #ff0000;
--color-highlight-change: marktext;
--color-high-contrast-button: #000000;
Expand Down
156 changes: 99 additions & 57 deletions src/devtools/client/debugger/src/components/WelcomeBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,110 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

import React from "react";
import { Button } from "replay-next/components/Button";
import {
DisabledButton,
DisabledLgButton,
DisabledSmButton,
PrimaryButton,
PrimaryLgButton,
PrimarySmButton,
SecondaryButton,
SecondaryLgButton,
SecondarySmButton,
} from "ui/components/shared/Button";

import { setSelectedPrimaryPanel, toggleCommandPalette } from "ui/actions/layout";
import { useAppDispatch } from "ui/setup/hooks";
export default function WelcomeBox() {
return (
<div className="flex h-full w-full flex-col items-center overflow-hidden p-1">
OLD
<div className="flex flex-row gap-1">
<div className="flex flex-col items-start gap-1">
<PrimaryLgButton color="blue">PrimaryLgButton (blue)</PrimaryLgButton>
<PrimaryLgButton color="pink">PrimaryLgButton (pink)</PrimaryLgButton>
<SecondaryLgButton color="blue">SecondaryLgButton (blue)</SecondaryLgButton>
<DisabledLgButton>DisabledLgButton</DisabledLgButton>
</div>

import { toggleQuickOpen } from "../actions/quick-open";
<div className="flex flex-col items-start gap-1">
<PrimaryButton color="blue">PrimaryButton (blue)</PrimaryButton>
<PrimaryButton color="pink">PrimaryButton (blue)</PrimaryButton>
<SecondaryButton color="blue">SecondaryButton (blue)</SecondaryButton>
<SecondaryButton color="pink">SecondaryButton (pink)</SecondaryButton>
<DisabledButton>DisabledButton</DisabledButton>
</div>

export default function WelcomeBox() {
const dispatch = useAppDispatch();
const openCommandPalette = () => {
dispatch(toggleCommandPalette());
};
const openQuickOpen = () => {
dispatch(toggleQuickOpen());
};
const openFullTextSearch = () => {
dispatch(setSelectedPrimaryPanel("search"));
};
<div className="flex flex-col items-start gap-1">
<PrimarySmButton color="blue">PrimarySmButton (blue)</PrimarySmButton>
<PrimarySmButton color="pink">PrimarySmButton (pink)</PrimarySmButton>
<SecondarySmButton color="blue">SecondarySmButton (blue)</SecondarySmButton>
<DisabledSmButton>DisabledSmButton</DisabledSmButton>
</div>
</div>
<div className="flex h-full w-full flex-col items-center overflow-hidden p-1">
NEW
<div className="flex flex-row gap-1">
<div className="flex flex-col items-start gap-1">
<Button color="primary" size="large" variant="solid">
primary + solid
</Button>
<Button color="secondary" size="large" variant="solid">
secondary + solid
</Button>
<Button color="primary" disabled size="large" variant="solid">
primary + solid (disabled)
</Button>
<Button color="primary" size="large" variant="outline">
primary + outline
</Button>
<Button color="secondary" size="large" variant="outline">
secondary + outline
</Button>
<Button color="primary" disabled size="large" variant="outline">
primary + outline (disabled)
</Button>
</div>

return (
<div className="flex h-full w-full flex-col items-center overflow-hidden">
<div className="relative flex h-full w-full justify-center px-8 pt-24">
<div className="relative flex h-full w-full flex-col items-center text-sm">
<div className="flex w-full flex-col space-y-1 text-menuColor">
<div
className="group flex flex-row space-x-4 hover:cursor-pointer hover:text-menuHoverColor"
onClick={openCommandPalette}
>
<div className="w-full truncate pt-1 text-right">Command palette</div>
<div className="flex w-full flex-row">
<img src="/images/command.svg" /> <img src="/images/k.svg" />
</div>
</div>
<div
className="group flex flex-row space-x-4 hover:cursor-pointer hover:text-menuHoverColor"
onClick={openQuickOpen}
>
<div className="w-full pt-1 text-right">Go to file</div>
<div className="flex w-full flex-row">
<img src="/images/command.svg" /> <img src="/images/p.svg" />
</div>
</div>
<div
className="group flex flex-row space-x-4 hover:cursor-pointer hover:text-menuHoverColor"
onClick={openFullTextSearch}
>
<div className="w-full pt-1 text-right">Find in file</div>
<div className="flex w-full flex-row">
<img src="/images/command.svg" /> <img src="/images/shift.svg" />{" "}
<img src="/images/f.svg" />
</div>
</div>
<div className="flex flex-col items-start gap-1">
<Button color="primary" size="normal" variant="solid">
primary + solid
</Button>
<Button color="secondary" size="normal" variant="solid">
secondary + solid
</Button>
<Button color="primary" disabled size="normal" variant="solid">
primary + solid (disabled)
</Button>
<Button color="primary" size="normal" variant="outline">
primary + outline
</Button>
<Button color="secondary" size="normal" variant="outline">
secondary + outline
</Button>
<Button color="primary" disabled size="normal" variant="outline">
primary + outline (disabled)
</Button>
</div>
<div className="absolute bottom-16 flex w-full flex-row">
<div className="left-0 w-full">
<a href="https://docs.replay.io" className="hover:underline">
Docs
</a>
</div>
<div className="text-right hover:underline">
<a href="https://replay.io/discord">Discord</a>
</div>

<div className="flex flex-col items-start gap-1">
<Button color="primary" size="small" variant="solid">
primary + solid
</Button>
<Button color="secondary" size="small" variant="solid">
secondary + solid
</Button>
<Button color="primary" disabled size="small" variant="solid">
primary + solid (disabled)
</Button>
<Button color="primary" size="small" variant="outline">
primary + outline
</Button>
<Button color="secondary" size="small" variant="outline">
secondary + outline
</Button>
<Button color="primary" disabled size="small" variant="outline">
primary + outline (disabled)
</Button>
</div>
</div>
</div>
Expand Down

0 comments on commit fdd50b1

Please sign in to comment.