- Buttons are now round.

- Add new size `larger`. - Increase font-sizes of buttons. - Increase height of `large` size to 50px.
StenaIT · Sep 4, 2023 · 598a5a8 · 598a5a8
1 parent eb073bc
commit 598a5a8
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 22 deletions.
diff --git 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,16 +203,33 @@
 
   &.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 {
       --current-icon-height: var(--swui-button-icon-height-large-icon-only);
     }
   }
 
+  &.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
@@ -9,7 +9,7 @@ import { Icon } from "../icon/Icon";
 import { Story } from "@storybook/react";
 import { stenaCheck } from "../../../icons/ui/IconsUi";
 
-const buttonSizes: Array<ButtonSize> = ["small", "medium", "large"];
+const buttonSizes: Array<ButtonSize> = ["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
@@ -83,6 +83,7 @@ export const PrimaryButton = forwardRef<HTMLButtonElement, PrimaryButtonProps>(
           spinnerClassName={spinnerClassName}
           leftWrapperClassName={leftWrapperClassName}
           rightWrapperClassName={rightWrapperClassName}
+          size={size}
         />
       </Button>
     );

diff --git 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
@@ -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
@@ -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<ButtonContentProps> = ({
@@ -35,11 +37,14 @@ export const ButtonContent: React.FC<ButtonContentProps> = ({
   spinnerClassName,
   leftWrapperClassName,
   rightWrapperClassName,
+  size = "medium",
 }) => {
   return (
     <>
       {(success || loading || leftIcon || left) && (
-        <div className={cx(styles.leftWrapper, leftWrapperClassName)}>
+        <div
+          className={cx(styles.leftWrapper, styles[size], leftWrapperClassName)}
+        >
           {success ? (
             <FontAwesomeIcon
               icon={stenaCheck}
@@ -71,7 +76,13 @@ export const ButtonContent: React.FC<ButtonContentProps> = ({
       )}
 
       {(right || rightIcon) && (
-        <div className={cx(styles.rightWrapper, rightWrapperClassName)}>
+        <div
+          className={cx(
+            styles.rightWrapper,
+            styles[size],
+            rightWrapperClassName
+          )}
+        >
           {right ? (
             right
           ) : rightIcon ? (

diff --git 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 */