From 598a5a8ad4371ad7ee49ab801a76bb8720008792 Mon Sep 17 00:00:00 2001 From: Mattias Andersson Date: Mon, 4 Sep 2023 11:14:54 +0200 Subject: [PATCH] - Buttons are now round. - Add new size `larger`. - Increase font-sizes of buttons. - Increase height of `large` size to 50px. --- .../components/ui/buttons/Button.module.css | 45 ++++++++++++++----- .../components/ui/buttons/Button.stories.tsx | 2 +- .../components/ui/buttons/PrimaryButton.tsx | 1 + .../ui/buttons/common/ButtonCommon.ts | 2 +- .../buttons/common/ButtonContent.module.css | 8 ++++ .../ui/buttons/common/ButtonContent.tsx | 15 ++++++- packages/theme/src/styles/default-theme.css | 16 +++---- 7 files changed, 67 insertions(+), 22 deletions(-) diff --git a/packages/elements/src/components/ui/buttons/Button.module.css b/packages/elements/src/components/ui/buttons/Button.module.css index d648c15d3..8506c121e 100644 --- a/packages/elements/src/components/ui/buttons/Button.module.css +++ b/packages/elements/src/components/ui/buttons/Button.module.css @@ -6,8 +6,8 @@ --swui-button-text-color: var(--swui-white); --swui-button-text-decoration: none; --swui-button-letter-spacing: var(--swui-field-letter-spacing); - --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px); - --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px); + --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 3px); + --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 3 - 1px); /* Text */ --swui-button-text-color-focus: var(--swui-button-text-color); @@ -30,10 +30,12 @@ /* Icon */ --swui-button-icon-height-small: 1.2rem; --swui-button-icon-height-small-icon-only: 1.2rem; - --swui-button-icon-height-medium: 1.6rem; - --swui-button-icon-height-medium-icon-only: 1.6rem; - --swui-button-icon-height-large: 1.6rem; - --swui-button-icon-height-large-icon-only: 2.4rem; + --swui-button-icon-height-medium: 2rem; + --swui-button-icon-height-medium-icon-only: 2rem; + --swui-button-icon-height-large: 2rem; + --swui-button-icon-height-large-icon-only: 2rem; + --swui-button-icon-height-larger: 2rem; + --swui-button-icon-height-larger-icon-only: 2.4rem; --swui-button-icon-color: var(--swui-white); --swui-button-icon-color-focus: var(--swui-button-icon-color); @@ -57,7 +59,8 @@ --swui-button-icon-only-size-small: 24px; --swui-button-icon-only-size-medium: 32px; --swui-button-icon-only-size-large: 40px; - --swui-button-border-radius-icon-only: var(--swui-border-radius); + --swui-button-icon-only-size-larger: 72px; + --swui-button-border-radius-icon-only: 9999px; /* Background */ --swui-button-background-color: var(--swui-primary-action-color); @@ -82,7 +85,7 @@ /* Border */ --swui-button-border-color: var(--swui-button-background-color); - --swui-button-border-radius: var(--swui-border-radius); + --swui-button-border-radius: 9999px; --swui-button-border-color-focus: var(--swui-button-background-color-focus); --swui-button-border-color-hover: var(--swui-button-background-color-hover); --swui-button-border-color-active: var(--swui-button-background-color-active); @@ -175,6 +178,11 @@ width: var(--swui-button-icon-only-size-large); height: var(--swui-button-icon-only-size-large); } + + &.larger { + width: var(--swui-button-icon-only-size-larger); + height: var(--swui-button-icon-only-size-larger); + } } /* @@ -195,9 +203,9 @@ &.large { --current-line-height: 2.4rem; - --swui-button-padding-vertical: calc(var(--swui-metrics-space) - 1px); + --swui-button-padding-vertical: calc(var(--swui-metrics-space) * 2 - 4px); --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px); - --current-text-size: 1.6rem; + --current-text-size: 1.8rem; --current-icon-height: var(--swui-button-icon-height-large); &.iconButton { @@ -205,6 +213,23 @@ } } + &.larger { + --swui-button-padding-vertical: 24px; + --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 6 - 1px); + + --current-text-size: 2rem; + --current-line-height: 2.4rem; + --swui-button-font-weight: 500; + + --swui-button-box-shadow-focus: unset; + + --current-icon-height: var(--swui-button-icon-height-larger); + + &.iconButton { + --current-icon-height: var(--swui-button-icon-height-larger-icon-only); + } + } + &:hover { --current-background-color: var(--swui-button-background-color-hover); --current-border-color: var(--swui-button-border-color-hover); diff --git a/packages/elements/src/components/ui/buttons/Button.stories.tsx b/packages/elements/src/components/ui/buttons/Button.stories.tsx index 276eefbae..bcf1d1b0d 100644 --- a/packages/elements/src/components/ui/buttons/Button.stories.tsx +++ b/packages/elements/src/components/ui/buttons/Button.stories.tsx @@ -9,7 +9,7 @@ import { Icon } from "../icon/Icon"; import { Story } from "@storybook/react"; import { stenaCheck } from "../../../icons/ui/IconsUi"; -const buttonSizes: Array = ["small", "medium", "large"]; +const buttonSizes: Array = ["small", "medium", "large", "larger"]; export default { title: "elements/Buttons", diff --git a/packages/elements/src/components/ui/buttons/PrimaryButton.tsx b/packages/elements/src/components/ui/buttons/PrimaryButton.tsx index 4cfc6d724..23b21159f 100644 --- a/packages/elements/src/components/ui/buttons/PrimaryButton.tsx +++ b/packages/elements/src/components/ui/buttons/PrimaryButton.tsx @@ -83,6 +83,7 @@ export const PrimaryButton = forwardRef( spinnerClassName={spinnerClassName} leftWrapperClassName={leftWrapperClassName} rightWrapperClassName={rightWrapperClassName} + size={size} /> ); diff --git a/packages/elements/src/components/ui/buttons/common/ButtonCommon.ts b/packages/elements/src/components/ui/buttons/common/ButtonCommon.ts index 72408d32d..739cca54e 100644 --- a/packages/elements/src/components/ui/buttons/common/ButtonCommon.ts +++ b/packages/elements/src/components/ui/buttons/common/ButtonCommon.ts @@ -1,7 +1,7 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import { ReactNode } from "react"; -export type ButtonSize = "medium" | "small" | "large"; +export type ButtonSize = "medium" | "small" | "large" | "larger"; export type ButtonVariant = "normal" | "danger" | "success"; export interface CommonButtonProps { diff --git a/packages/elements/src/components/ui/buttons/common/ButtonContent.module.css b/packages/elements/src/components/ui/buttons/common/ButtonContent.module.css index 1126f96ea..a8ce477e8 100644 --- a/packages/elements/src/components/ui/buttons/common/ButtonContent.module.css +++ b/packages/elements/src/components/ui/buttons/common/ButtonContent.module.css @@ -13,10 +13,18 @@ .leftWrapper:not(:last-child) { margin-right: var(--swui-metrics-indent); + + &.larger { + margin-right: calc(var(--swui-metrics-indent) * 2); + } } .rightWrapper:not(:first-child) { margin-left: var(--swui-metrics-indent); + + &.larger { + margin-left: calc(var(--swui-metrics-indent) * 2); + } } .spinnerLeft { diff --git a/packages/elements/src/components/ui/buttons/common/ButtonContent.tsx b/packages/elements/src/components/ui/buttons/common/ButtonContent.tsx index 93e0a51ce..bea8205df 100644 --- a/packages/elements/src/components/ui/buttons/common/ButtonContent.tsx +++ b/packages/elements/src/components/ui/buttons/common/ButtonContent.tsx @@ -6,6 +6,7 @@ import { InputSpinner } from "../../spinner/InputSpinner"; import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import styles from "./ButtonContent.module.css"; import { stenaCheck } from "../../../../icons/ui/IconsUi"; +import { ButtonSize } from "./ButtonCommon"; export interface ButtonContentProps { label?: string; @@ -20,6 +21,7 @@ export interface ButtonContentProps { spinnerClassName?: string; leftWrapperClassName?: string; rightWrapperClassName?: string; + size?: ButtonSize; } export const ButtonContent: React.FC = ({ @@ -35,11 +37,14 @@ export const ButtonContent: React.FC = ({ spinnerClassName, leftWrapperClassName, rightWrapperClassName, + size = "medium", }) => { return ( <> {(success || loading || leftIcon || left) && ( -
+
{success ? ( = ({ )} {(right || rightIcon) && ( -
+
{right ? ( right ) : rightIcon ? ( diff --git a/packages/theme/src/styles/default-theme.css b/packages/theme/src/styles/default-theme.css index fdb388220..b26ec3fc5 100644 --- a/packages/theme/src/styles/default-theme.css +++ b/packages/theme/src/styles/default-theme.css @@ -35,14 +35,14 @@ --swui-font-buttons: var(--swui-font-primary); --swui-font-input: var(--swui-font-primary); --swui-font-size-inputs: 1.4rem; - --swui-font-size-large: 1.6rem; - --swui-line-height-large: 2.4rem; - --swui-font-size-medium: 1.4rem; - --swui-line-height-medium: 1.6rem; - --swui-font-size-small: 1.2rem; - --swui-line-height-small: 1.6rem; - --swui-font-size-smaller: 1rem; - --swui-line-height-smaller: 1.6rem; + --swui-font-size-large: 1.8rem; + --swui-line-height-large: 2.6rem; + --swui-font-size-medium: 1.6rem; + --swui-line-height-medium: 1.8rem; + --swui-font-size-small: 1.4rem; + --swui-line-height-small: 1.8rem; + --swui-font-size-smaller: 1.2rem; + --swui-line-height-smaller: 1.8rem; --swui-font-weight-inputs: 400; /* Text */