Small buttons (#303)

- Refactors the button component to accept a buttonOuter prop - Removed the theme from the NewComponentButton as pulls styles from the app class - Styling for the small button, with larger hit area ----- To use the `btn--small` in the future just need to pass the `buttonOuter` to the `Button` and `btn--small` class ----- Video as no review app: https://user-images.githubusercontent.com/14238047/209164727-63b36ed7-754f-4d1d-8d80-b240cb63f9f7.mov
RaspberryPiFoundation · Dec 22, 2022 · 6618416 · 6618416
1 parent d6da7fa
commit 6618416
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Message prompting users to login or save if they make non-autosaved changes (#291)
 - Unit tests for the autosave trigger (#291)
 - Project not found and access denied modals shown on project loading error (#298)
+- Styling for small buttons (#303)
 
 ## Changed
 

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -5,7 +5,7 @@ import { confirmAlert } from 'react-confirm-alert';
 import 'react-confirm-alert/src/react-confirm-alert.css';
 
 const Button = (props) => {
-  const { className, onClickHandler, ButtonIcon, buttonImage, buttonImageAltText, buttonText, disabled, confirmText } = props;
+  const { className, onClickHandler, ButtonIcon, buttonImage, buttonImageAltText, buttonText, buttonOuter, disabled, confirmText } = props;
 
   var buttonClass="btn"
   buttonClass = (className ? buttonClass += ` ${className}`: buttonClass)
@@ -30,13 +30,23 @@ const Button = (props) => {
     });
   }
 
-  return (
-    <button className={buttonClass} disabled={disabled} onClick={onButtonClick}>
+  const button = (
+    <button className={buttonClass} disabled={disabled} onClick={buttonOuter ? null : onButtonClick}>
       { buttonImage ? <img src={buttonImage} alt={buttonImageAltText}/> : null }
       { ButtonIcon ? <ButtonIcon /> : null }
       { buttonText ? <span>{buttonText}</span> : null }
     </button>
-  )
+  );
+
+  if (buttonOuter) {
+    return (
+      <div className='btn-outer' onClick={onButtonClick}>
+        {button}
+      </div>
+    )
+  }
+
+  return button;
 };
 
 export default Button;

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -17,7 +17,7 @@
     }
   }
 
-  &:active {
+  &:active, .btn-outer:active & {
     background-color: $active-bg;
     @content;
   }
@@ -31,12 +31,12 @@
     }
   }
 
-  &:focus-visible {
+  &:focus-visible, .btn-outer:focus-visible & {
     background-color: $focus-bg;
     @content;
   }
 
-  &:hover {
+  &:hover, .btn-outer:hover & {
     background-color: $hover-bg;
     @content;
   }
@@ -58,6 +58,12 @@
   text-decoration: none;
   width: fit-content;
 
+  &:disabled {
+    background-color: $rpf-darkmode-grey32;
+    color: $rpf-white;
+    cursor: default;
+  }
+
   &:focus-visible {
     border: 3px solid $rpf-brand-raspberry;
     outline: none;
@@ -67,14 +73,11 @@
     margin-right: var(--spacing-1);
   }
 
-  &:disabled {
-    background-color: $rpf-darkmode-grey32;
-    color: $rpf-white;
-    cursor: default;
+  &--small {
+    padding: var(--spacing-four);
   }
 
   // Variants
-
   &--primary {
     $colours: $rpf-teal, $rpf-teal-tint-25, $rpf-teal-tint-75, $rpi-grey-70, $rpf-teal, $rpf-teal-shade-20;
     @include button-styling($colours...);
@@ -112,13 +115,71 @@
   }
 }
 
+.btn-outer {
+  background: transparent;
+  cursor: pointer;
+  padding: var(--spacing-eight) 0;
+
+  &:focus-visible {
+    outline: none;
+
+    .btn {
+      border: 3px solid $rpf-brand-raspberry;
+    }
+  }
+}
+
 .font-size-large {
   .btn svg {
     margin-right: var(--spacing-2);
   }
 }
 
 .--dark {
+  .btn-outer {
+    &:hover {
+      .btn--primary {
+        background-color: $rpf-teal-tint-25;
+      }
+
+      .btn--secondary {
+        background-color: $rpf-darkmode-grey22;
+      }
+
+      .btn--tertiary {
+        background-color: inherit;
+      }
+    }
+
+    &:active {
+      .btn--primary {
+        background-color: $rpf-teal-tint-75;
+      }
+
+      .btn--secondary {
+        background-color: $rpf-darkmode-grey22;
+      }
+
+      .btn--tertiary {
+        background-color: inherit;
+      }
+    }
+
+    &:focus-visible {
+      .btn--primary {
+        background-color: $rpf-teal-tint-50;
+      }
+
+      .btn--secondary {
+        background-color: $rpf-darkmode-grey32;
+      }
+
+      .btn--tertiary {
+        background-color: inherit;
+      }
+    }
+  }
+
   .btn--primary {
     $colours: $rpf-teal-tint-50, $rpf-teal-tint-75, $rpf-darkmode-grey80, $rpf-darkmode-grey22, $rpf-teal-tint-50, $rpf-teal-tint-25;
     @include button-styling($colours...);

diff --git a/src/components/Editor/NewComponentButton/NewComponentButton.js b/src/components/Editor/NewComponentButton/NewComponentButton.js
@@ -9,7 +9,6 @@ import Button from '../../Button/Button'
 import NameErrorMessage from '../ErrorMessage/NameErrorMessage';
 import { CloseIcon, NewFileIcon } from '../../../Icons';
 import { validateFileName } from '../../../utils/componentNameValidation';
-import { useCookies } from 'react-cookie';
 import { useTranslation } from 'react-i18next';
 
 const NewComponentButton = () => {
@@ -20,10 +19,6 @@ const NewComponentButton = () => {
     const projectComponents = useSelector((state) => state.editor.project.components);
     const componentNames = projectComponents.map(component => `${component.name}.${component.extension}`)
 
-    const [cookies] = useCookies(['fontSize', 'theme'])
-    const isDarkMode = cookies.theme==="dark" || (!cookies.theme && window.matchMedia("(prefers-color-scheme:dark)").matches)
-    const theme = isDarkMode ? "dark" : "light"
-
     const closeModal = () => setIsOpen(false);
     const showModal = () => {
       dispatch(setNameError(""));
@@ -40,8 +35,8 @@ const NewComponentButton = () => {
     }
 
     return (
-      <div className={`--${theme}`}>
-        <Button buttonText={t('filePane.newFileButton')} ButtonIcon={NewFileIcon} onClickHandler={showModal} className="btn--primary proj-new-component-button" />
+      <div>
+        <Button buttonText={t('filePane.newFileButton')} ButtonIcon={NewFileIcon} buttonOuter onClickHandler={showModal} className="btn--primary btn--small proj-new-component-button" />
 
         <Modal
           isOpen={modalIsOpen}

diff --git a/src/editor-spacing.scss b/src/editor-spacing.scss
@@ -1,3 +1,5 @@
 :root, :host {
-  --spacing-half: calc(0.5rem * var(--spacing-multiplier))
+  --spacing-half: calc(0.5rem * var(--spacing-multiplier));
+  --spacing-eight: calc(var(--spacing-1) / 1.25);
+  --spacing-four: calc(var(--spacing-eight) / 2);
 }