From 699897f71bb68f9d17bb046c4d8ec846b631609a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Barnab=C3=A1s=20Moln=C3=A1r?= <38168628+barnabasmolnar@users.noreply.github.com> Date: Thu, 12 Jan 2023 13:06:00 +0100 Subject: [PATCH] feat: generic button export (#6092) Co-authored-by: dwelle --- src/components/Button.scss | 8 +++++ src/components/Button.tsx | 35 +++++++++++++++++++ src/components/CollabButton.scss | 33 +++++++---------- src/components/CollabButton.tsx | 7 ++-- src/components/dropdownMenu/DropdownMenu.scss | 2 +- src/css/styles.scss | 2 +- src/css/theme.scss | 4 +-- src/css/variables.module.scss | 26 ++++++++------ .../excalidraw/example/CustomFooter.tsx | 10 ++++++ src/packages/excalidraw/index.tsx | 1 + 10 files changed, 90 insertions(+), 38 deletions(-) create mode 100644 src/components/Button.scss create mode 100644 src/components/Button.tsx diff --git a/src/components/Button.scss b/src/components/Button.scss new file mode 100644 index 000000000..1ad22cb80 --- /dev/null +++ b/src/components/Button.scss @@ -0,0 +1,8 @@ +@import "../css/theme"; + +.excalidraw { + .excalidraw-button { + @include outlineButtonStyles; + overflow: hidden; + } +} diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 000000000..3303c3ebf --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,35 @@ +import "./Button.scss"; + +interface ButtonProps extends React.HTMLAttributes { + type?: "button" | "submit" | "reset"; + onSelect: () => any; + children: React.ReactNode; + className?: string; +} + +/** + * A generic button component that follows Excalidraw's design system. + * Style can be customised using `className` or `style` prop. + * Accepts all props that a regular `button` element accepts. + */ +export const Button = ({ + type = "button", + onSelect, + children, + className = "", + ...rest +}: ButtonProps) => { + return ( + + ); +}; diff --git a/src/components/CollabButton.scss b/src/components/CollabButton.scss index 4e09d11c7..94e52d531 100644 --- a/src/components/CollabButton.scss +++ b/src/components/CollabButton.scss @@ -2,29 +2,22 @@ .excalidraw { .collab-button { - @include outlineButtonStyles; - width: var(--lg-button-size); - height: var(--lg-button-size); + --button-bg: var(--color-primary); + --button-color: white; + --button-border: var(--color-primary); + + --button-width: var(--lg-button-size); + --button-height: var(--lg-button-size); + + --button-hover-bg: var(--color-primary-darker); + --button-hover-border: var(--color-primary-darker); + + --button-active-bg: var(--color-primary-darker); - svg { - width: var(--lg-icon-size); - height: var(--lg-icon-size); - } - background-color: var(--color-primary); - border-color: var(--color-primary); - color: white; flex-shrink: 0; - &:hover { - background-color: var(--color-primary-darker); - border-color: var(--color-primary-darker); - } - - &:active { - background-color: var(--color-primary-darker); - } - - &.active { + // double .active to force specificity + &.active.active { background-color: #0fb884; border-color: #0fb884; diff --git a/src/components/CollabButton.tsx b/src/components/CollabButton.tsx index d63444a2c..345213839 100644 --- a/src/components/CollabButton.tsx +++ b/src/components/CollabButton.tsx @@ -3,6 +3,7 @@ import { UsersIcon } from "./icons"; import "./CollabButton.scss"; import clsx from "clsx"; +import { Button } from "./Button"; const CollabButton = ({ isCollaborating, @@ -14,10 +15,10 @@ const CollabButton = ({ onClick: () => void; }) => { return ( - + ); }; diff --git a/src/components/dropdownMenu/DropdownMenu.scss b/src/components/dropdownMenu/DropdownMenu.scss index 28a812876..ff94f4920 100644 --- a/src/components/dropdownMenu/DropdownMenu.scss +++ b/src/components/dropdownMenu/DropdownMenu.scss @@ -73,7 +73,7 @@ } &:hover { - background-color: var(--button-hover); + background-color: var(--button-hover-bg); text-decoration: none; } diff --git a/src/css/styles.scss b/src/css/styles.scss index df259bb59..42c111c3d 100644 --- a/src/css/styles.scss +++ b/src/css/styles.scss @@ -408,7 +408,7 @@ pointer-events: all; &:hover { - background-color: var(--button-hover); + background-color: var(--button-hover-bg); } &:active { diff --git a/src/css/theme.scss b/src/css/theme.scss index aaa8da5b5..ebf713983 100644 --- a/src/css/theme.scss +++ b/src/css/theme.scss @@ -35,7 +35,7 @@ --shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05), 0px 0px 3.12708px rgba(0, 0, 0, 0.0798), 0px 0px 0.931014px rgba(0, 0, 0, 0.1702); - --button-hover: var(--color-gray-10); + --button-hover-bg: var(--color-gray-10); --default-border-color: var(--color-gray-30); --default-button-size: 2rem; @@ -135,7 +135,7 @@ --popup-text-inverted-color: #2c2c2c; --select-highlight-color: #{$oc-blue-4}; --text-primary-color: var(--color-gray-40); - --button-hover: var(--color-gray-80); + --button-hover-bg: var(--color-gray-80); --default-border-color: var(--color-gray-80); --shadow-island: 0px 13px 33px rgba(0, 0, 0, 0.07), 0px 4.13px 9.94853px rgba(0, 0, 0, 0.0456112), diff --git a/src/css/variables.module.scss b/src/css/variables.module.scss index 5a367ffe3..39bf4e293 100644 --- a/src/css/variables.module.scss +++ b/src/css/variables.module.scss @@ -39,11 +39,11 @@ .ToolIcon__icon { &:hover { - background: var(--button-hover); + background: var(--button-hover-bg); } &:active { - background: var(--button-hover); + background: var(--button-hover-bg); border: 1px solid var(--color-primary-darkest); } } @@ -54,24 +54,25 @@ justify-content: center; align-items: center; padding: 0.625rem; - width: var(--default-button-size); - height: var(--default-button-size); + width: var(--button-width, var(--default-button-size)); + height: var(--button-height, var(--default-button-size)); box-sizing: border-box; border-width: 1px; border-style: solid; - border-color: var(--default-border-color); + border-color: var(--button-border, var(--default-border-color)); border-radius: var(--border-radius-lg); cursor: pointer; - background-color: transparent; - color: var(--text-primary-color); + background-color: var(--button-bg, var(--island-bg-color)); + color: var(--button-color, var(--text-primary-color)); &:hover { - background-color: var(--button-hover); + background-color: var(--button-hover-bg); + border-color: var(--button-hover-border, var(--default-border-color)); } &:active { - background-color: var(--button-hover); - border-color: var(--color-primary-darkest); + background-color: var(--button-active-bg); + border-color: var(--button-active-border, var(--color-primary-darkest)); } &.active { @@ -83,7 +84,10 @@ } svg { - color: var(--color-primary-darker); + color: var(--button-color, var(--color-primary-darker)); + + width: var(--button-width, var(--lg-icon-size)); + height: var(--button-height, var(--lg-icon-size)); } } } diff --git a/src/packages/excalidraw/example/CustomFooter.tsx b/src/packages/excalidraw/example/CustomFooter.tsx index e6f3ff42e..fbc2ea732 100644 --- a/src/packages/excalidraw/example/CustomFooter.tsx +++ b/src/packages/excalidraw/example/CustomFooter.tsx @@ -1,5 +1,7 @@ import { ExcalidrawImperativeAPI } from "../../../types"; import { MIME_TYPES } from "../entry"; +import { Button } from "../../../components/Button"; + const COMMENT_SVG = ( { return ( <> +