code-dot-org · levadadenys · May 21, 2024 · May 15, 2024 · May 15, 2024 · May 15, 2024
diff --git a/apps/src/componentLibrary/button/Button.story.tsx b/apps/src/componentLibrary/button/Button.story.tsx
@@ -98,15 +98,15 @@ GroupOfColorsOfButtons.args = {
       onClick: () => null,
     },
     {
-      text: 'Button Secondary Purple',
-      color: buttonColors.purple,
+      text: 'Button Secondary Black',
+      color: buttonColors.black,
       type: 'secondary',
       size: 'm',
       onClick: () => null,
     },
     {
-      text: 'Button Secondary Black',
-      color: buttonColors.black,
+      text: 'Button Secondary Gray',
+      color: buttonColors.gray,
       type: 'secondary',
       size: 'm',
       onClick: () => null,
@@ -165,15 +165,15 @@ GroupOfColorsOfButtons.args = {
     },
     {
       icon: {iconName: 'smile', iconStyle: 'solid'},
-      color: buttonColors.purple,
+      color: buttonColors.black,
       type: 'secondary',
       isIconOnly: true,
       size: 'm',
       onClick: () => null,
     },
     {
       icon: {iconName: 'smile', iconStyle: 'solid'},
-      color: buttonColors.black,
+      color: buttonColors.gray,
       type: 'secondary',
       isIconOnly: true,
       size: 'm',

diff --git a/apps/src/componentLibrary/button/Button.tsx b/apps/src/componentLibrary/button/Button.tsx
@@ -9,6 +9,7 @@ import {ButtonColor} from './types';
 export const buttonColors: {[key in ButtonColor]: ButtonColor} = {
   purple: 'purple',
   black: 'black',
+  gray: 'gray',
   white: 'white',
 };
 

diff --git a/apps/src/componentLibrary/button/CHANGELOG.md b/apps/src/componentLibrary/button/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.4.0]()
+
+* added background fill color to secondary black and white buttons
+* added ```gray``` secondary button
+* deprecated ```purple``` secondary button
+
 ## [0.3.0](https://github.com/code-dot-org/code-dot-org/pull/58469)
 
 * added support of all `aria-` attributes by `Button` components

diff --git a/apps/src/componentLibrary/button/LinkButton.story.tsx b/apps/src/componentLibrary/button/LinkButton.story.tsx
@@ -104,15 +104,15 @@ GroupOfColorsOfLinkButtons.args = {
       href: 'https://www.google.com',
     },
     {
-      text: 'Button Secondary Purple',
-      color: buttonColors.purple,
+      text: 'Button Secondary Black',
+      color: buttonColors.black,
       type: 'secondary',
       size: 'm',
       href: 'https://www.google.com',
     },
     {
-      text: 'Button Secondary Black',
-      color: buttonColors.black,
+      text: 'Button Secondary Gray',
+      color: buttonColors.gray,
       type: 'secondary',
       size: 'm',
       href: 'https://www.google.com',
@@ -171,15 +171,15 @@ GroupOfColorsOfLinkButtons.args = {
     },
     {
       icon: {iconName: 'smile', iconStyle: 'solid'},
-      color: buttonColors.purple,
+      color: buttonColors.black,
       type: 'secondary',
       isIconOnly: true,
       size: 'm',
       href: 'https://www.google.com',
     },
     {
       icon: {iconName: 'smile', iconStyle: 'solid'},
-      color: buttonColors.black,
+      color: buttonColors.gray,
       type: 'secondary',
       isIconOnly: true,
       size: 'm',

diff --git a/apps/src/componentLibrary/button/_baseButton/_BaseButton.story.tsx b/apps/src/componentLibrary/button/_baseButton/_BaseButton.story.tsx
@@ -133,15 +133,15 @@ GroupOfColorsOf_BaseButtons.args = {
       onClick: () => null,
     },
     {
-      text: 'Button Secondary Purple',
-      color: buttonColors.purple,
+      text: 'Button Secondary Black',
+      color: buttonColors.black,
       type: 'secondary',
       size: 'm',
       onClick: () => null,
     },
     {
-      text: 'Button Secondary Black',
-      color: buttonColors.black,
+      text: 'Button Secondary Gray',
+      color: buttonColors.gray,
       type: 'secondary',
       size: 'm',
       onClick: () => null,
@@ -200,15 +200,15 @@ GroupOfColorsOf_BaseButtons.args = {
     },
     {
       icon: {iconName: 'smile', iconStyle: 'solid'},
-      color: buttonColors.purple,
+      color: buttonColors.black,
       type: 'secondary',
       isIconOnly: true,
       size: 'm',
       onClick: () => null,
     },
     {
       icon: {iconName: 'smile', iconStyle: 'solid'},
-      color: buttonColors.black,
+      color: buttonColors.gray,
       type: 'secondary',
       isIconOnly: true,
       size: 'm',

diff --git a/apps/src/componentLibrary/button/_baseButton/_BaseButton.tsx b/apps/src/componentLibrary/button/_baseButton/_BaseButton.tsx
@@ -102,7 +102,19 @@ const checkButtonPropsForErrors = ({
   download,
   text,
   isIconOnly,
+  color,
+  type,
 }: _BaseButtonProps) => {
+  if (color === 'gray' && type !== 'secondary') {
+    throw new Error('Expect type prop to be secondary when color is gray');
+  }
+
+  if (color === 'purple' && type === 'secondary') {
+    console.warn(
+      'Warning: Button - Secondary Purple color is now deprecated. Please use different color or type. Secondary purple combination will be removed very soon.'
+    );
+  }
+
   if (useAsLink) {
     if (!href) {
       throw new Error('Expect href prop when useAsLink is true');
@@ -169,7 +181,6 @@ const BaseButton: React.FunctionComponent<_BaseButtonProps> = ({
   disabled = false,
   isPending = false,
   ariaLabel,
-
   size = 'm',
   type = 'primary',
   color = 'purple',
@@ -225,8 +236,9 @@ const BaseButton: React.FunctionComponent<_BaseButtonProps> = ({
         download,
         text,
         isIconOnly,
+        color,
       }),
-    [type, icon, useAsLink, onClick, href, download, text, isIconOnly]
+    [type, icon, useAsLink, onClick, href, download, text, isIconOnly, color]
   );
 
   /** Handling isPending state content & spinner show logic here.

diff --git a/apps/src/componentLibrary/button/_baseButton/_baseButton.module.scss b/apps/src/componentLibrary/button/_baseButton/_baseButton.module.scss
@@ -105,6 +105,7 @@ a.button-primary {
 
 .button-secondary,
 a.button-secondary {
+  // ! Warning!! Secondary purple button is deprecated and will be removed soon.
   &.button-purple {
     border: 1px solid $light_secondary_500;
     color: $light_secondary_500;
@@ -129,6 +130,7 @@ a.button-secondary {
 
   &.button-black {
     border: 1px solid $light_black;
+    background-color: $light_white;
     color: $light_black;
 
     &:hover {
@@ -149,8 +151,32 @@ a.button-secondary {
     }
   }
 
+  &.button-gray {
+    border: 1px solid $light_gray_400;
+    background-color: $light_white;
+    color: $light_black;
+
+    &:hover {
+      background-color: $light_gray_100;
+      border: 1px solid $light_gray_400;
+      color: $light_black;
+    }
+
+    &:active {
+      // !important is used here to override the ./apps/style/common.scss line 655 styles
+      border: 1px solid $light_gray_400 !important;
+    }
+
+    &:disabled, &[aria-disabled="true"] {
+      border-color: $light_gray_200 !important;
+      color: $light_gray_200;
+      background-color: unset;
+    }
+  }
+
   &.button-white {
     border: 1px solid $light_white;
+    background-color: $light_black;
     color: $light_white;
 
     &:hover {

diff --git a/apps/src/componentLibrary/button/types.ts b/apps/src/componentLibrary/button/types.ts
@@ -1,3 +1,3 @@
 export type ButtonType = 'primary' | 'secondary' | 'tertiary';
 
-export type ButtonColor = 'purple' | 'black' | 'white';
+export type ButtonColor = 'purple' | 'black' | 'gray' | 'white';
diff --git a/shared/css/color.scss b/shared/css/color.scss
@@ -199,6 +199,7 @@ $light_gray_50: #F7F8FA;
 $light_gray_100: #EAEBEB;
 $light_gray_200: #D4D5D7;
 $light_gray_300: #BFC1C3;
+$light_gray_400: #A9ACAF;
 $light_gray_500: #94979B;
 $light_gray_700: #6A6E73;
 $light_gray_800: #54595E;