-
Notifications
You must be signed in to change notification settings - Fork 138
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
The `ui/components/shared/Button` component has long confused me. It exports a lot of component variants, many of which don't seem to be used directly (rather the base `Button` component is used with various combinations of props) and many of which don't actually work (combinations of attributes that don't produce usable styles). In addition to that, most of our newer DevTools code can't use these buttons because the `replay-next` package can't import from the legacy `ui` package. This PR adds a new `Button` component to `replay-next` that supports our two style variants (solid vs outlined) and colors (primary vs secondary). The API is more constrained (e.g. it doesn't try to support a dozen colors, when we only use two and it doesn't export a dozen components when there is, conceptually, only one button). ## Comparison screenshots Here is a side by side comparison of the old and new buttons. | Dark theme | Light theme | | :--- | :--- | |  |  | The new button component fixes some issues with the old one, some of which can be seen in the comparison above: * Legacy variants that should work, but don't (like secondary + outline) * Legacy hover states that don't work (secondary) * Disabled colors for dark theme * Add disabled state for outline variant ## Example replacements Below I've updated a couple of pages to use the new button component instead. | Before | After | | :--- | :--- | |  |  | |  |  | |  |  | |  |  | |  |  | |  |  | Note that by updating this page we fix the following problems: * Bright disabled button style on a dark theme page * Bright background on outline button (bad contrast– blue on white) * "Done" button is overlapped/hidden entirely when selecting elements. * Generally simplifies the code required to use our standard button UI/UX * Removes the only instance of a "red" button color in favor of a standard color; (this might be controversial and we could change this if needed) ## Follow up work to this PR - Update `replay-next` code to use these buttons instead of one-off re-implementing the styles everywhere - Gradually remove references to `ui/components/shared/Button` and replace with new buttons - Delete all `ui/components/shared/Button` components once references have been removed
- Loading branch information
Showing
9 changed files
with
102 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| .Button { | ||
| font-family: var(--font-family-default); | ||
| font-size: 0.875rem; | ||
| line-height: 1rem; | ||
| font-weight: 500; | ||
| padding: 0.5rem 0.75rem; | ||
| border: 1px solid transparent; | ||
| border-radius: 0.375rem; | ||
| display: inline-flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| gap: 1ch; | ||
| } | ||
| .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-color: 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: 1rem; | ||
| line-height: 1.5rem; | ||
| padding: 0.75rem 1.5rem; | ||
| border-radius: 0.375rem; | ||
| } | ||
| .Button[data-size="small"] { | ||
| font-size: 0.75rem; | ||
| line-height: 1rem; | ||
| padding: 0.375rem 0.625rem; | ||
| border-radius: 0.25rem; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { ButtonHTMLAttributes } from "react"; | ||
|
|
||
| import styles from "./Button.module.css"; | ||
|
|
||
| export function Button({ | ||
| className = "", | ||
| color = "primary", | ||
| size = "normal", | ||
| variant = "solid", | ||
| ...rest | ||
| }: ButtonHTMLAttributes<HTMLButtonElement> & { | ||
| color?: "primary" | "secondary"; | ||
| size?: "normal" | "large" | "small"; | ||
| variant?: "outline" | "solid"; | ||
| }) { | ||
| return ( | ||
| <button | ||
| className={`${className} ${styles.Button}`} | ||
| data-color={color} | ||
| data-size={size} | ||
| data-variant={variant} | ||
| {...rest} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters