From a601179b9e238c5e1de2b5ceb53435b2e8b4d4d0 Mon Sep 17 00:00:00 2001 From: Mattias Andersson Date: Tue, 5 Sep 2023 13:55:38 +0200 Subject: [PATCH] - Buttons are now round. (#583) --- .../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 ++++++- .../src/components/ui/chip/Chip.module.css | 11 +++-- .../elements/src/components/ui/chip/Chip.tsx | 16 +++---- .../src/components/ui/tag/Tag.module.css | 2 +- packages/theme/src/styles/default-theme.css | 22 ++++----- 10 files changed, 87 insertions(+), 37 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/elements/src/components/ui/chip/Chip.module.css b/packages/elements/src/components/ui/chip/Chip.module.css index e5ab4df4b..f93ba96c8 100644 --- a/packages/elements/src/components/ui/chip/Chip.module.css +++ b/packages/elements/src/components/ui/chip/Chip.module.css @@ -2,11 +2,11 @@ /* Theme vars */ --swui-chip-font-size: var(--swui-font-size-small); --swui-chip-line-height: var(--swui-line-height-small); - --swui-chip-font-weight: var(--swui-font-weight-text); + --swui-chip-font-weight: var(--swui-font-weight-text-bold); --swui-chip-font-family: var(--swui-font-primary); --swui-chip-letter-spacing: var(--swui-text-letter-spacing); --swui-chip-height: 24px; - --swui-chip-border-radius: var(--swui-border-radius); + --swui-chip-border-radius: 99rem; /* State vars */ --current-text-color: var(--swui-white); @@ -35,7 +35,12 @@ .label { white-space: nowrap; - padding: 0 var(--swui-metrics-space); + padding: 0 calc(var(--swui-metrics-space) * 2); + + &.removable { + padding: 0 var(--swui-metrics-space) 0 + calc(var(--swui-metrics-indent) * 2); + } } button { diff --git a/packages/elements/src/components/ui/chip/Chip.tsx b/packages/elements/src/components/ui/chip/Chip.tsx index 0eefbda72..132b9b00d 100644 --- a/packages/elements/src/components/ui/chip/Chip.tsx +++ b/packages/elements/src/components/ui/chip/Chip.tsx @@ -31,25 +31,25 @@ export const Chip: React.FC = ({ onClick(); } }; + + const removableStyle = onClickRemove ? styles.removable : undefined; + return (
{onClick ? ( ) : ( -
{label}
+
+ {label} +
)} {onClickRemove && ( diff --git a/packages/elements/src/components/ui/tag/Tag.module.css b/packages/elements/src/components/ui/tag/Tag.module.css index 3fe5d2c4d..9ca52bdc0 100644 --- a/packages/elements/src/components/ui/tag/Tag.module.css +++ b/packages/elements/src/components/ui/tag/Tag.module.css @@ -7,7 +7,7 @@ --swui-tag-letter-spacing: var(--swui-text-letter-spacing); --swui-tag-height-normal: 24px; --swui-tag-height-small: 16px; - --swui-tag-border-radius: 10rem; + --swui-tag-border-radius: var(--swui-border-radius); --swui-tag-bg-color: var(--lhds-color-blue-100); --swui-tag-text-color: var(--lhds-color-blue-800); --swui-tag-icon-label-indent: var(--swui-metrics-indent); diff --git a/packages/theme/src/styles/default-theme.css b/packages/theme/src/styles/default-theme.css index fdb388220..4b7bc02d0 100644 --- a/packages/theme/src/styles/default-theme.css +++ b/packages/theme/src/styles/default-theme.css @@ -34,15 +34,15 @@ --swui-font-weight-link: 400; --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-inputs: 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 */ @@ -78,7 +78,7 @@ --swui-field-box-size-large: 32px; --swui-field-box-size-medium: 24px; --swui-field-box-size-small: 16px; - --swui-field-border-radius: 4px; + --swui-field-border-radius: 8px; --swui-field-icon-color: var(--swui-text-primary-color); --swui-field-icon-size: 13px; --swui-field-indicator-active-color: var(--swui-white); @@ -86,7 +86,7 @@ --swui-field-placeholder-color: var(--lhds-color-ui-500); /* Borders */ - --swui-border-radius: 4px; + --swui-border-radius: 8px; /* Shadows */ --swui-shadow-modal: rgba(0, 0, 0, 0.2) 0px 0px 10px 4px;