fix: <Toast> use color - text-color-fixed-light (#1623)

mondaycom · Oct 15, 2023 · d666059 · d666059
1 parent fdae6a1
commit d666059
Show file tree

Hide file tree

Showing 15 changed files with 161 additions and 25 deletions.
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -194,6 +194,23 @@ $disabled-on-primary-color-opacity: 0.5;
   color: var(--text-color-on-primary);
 }
 
+.kindPrimary.colorFixedLight {
+  background: var(--text-color-fixed-light);
+}
+
+.kindPrimary.colorFixedLightActive,
+.kindPrimary.colorFixedLight:hover,
+.kindPrimary.colorFixedLight:focus {
+  background-color: #e6e9ef;
+  backdrop-filter: brightness(85%);
+  @include focus-style-on-primary();
+}
+
+.kindPrimary.colorFixedLight.disabled {
+  opacity: $disabled-on-primary-color-opacity;
+  color: var(--text-color-fixed-light);
+}
+
 .kindPrimary.button.disabled {
   background: var(--disabled-background-color);
   color: var(--disabled-text-color);
@@ -285,6 +302,23 @@ $disabled-on-primary-color-opacity: 0.5;
   color: var(--text-color-on-primary);
 }
 
+.kindSecondary.colorFixedLight {
+  border-color: var(--text-color-fixed-light);
+  color: var(--text-color-fixed-light);
+}
+
+.kindSecondary.colorFixedLightActive,
+.kindSecondary.colorFixedLight:hover,
+.kindSecondary.colorFixedLight:focus {
+  backdrop-filter: brightness(85%);
+  @include focus-style-on-primary();
+}
+
+.kindSecondary.colorFixedLight.disabled {
+  opacity: $disabled-on-primary-color-opacity;
+  color: var(--text-color-fixed-light);
+}
+
 .kindSecondary.disabled {
   border-color: var(--disabled-background-color);
   color: var(--disabled-text-color);
@@ -361,6 +395,22 @@ $disabled-on-primary-color-opacity: 0.5;
   color: var(--text-color-on-primary);
 }
 
+.kindTertiary.colorFixedLight {
+  color: var(--text-color-fixed-light);
+}
+
+.kindTertiary.colorFixedLightActive,
+.kindTertiary.colorFixedLight:hover,
+.kindTertiary.colorFixedLight:focus {
+  backdrop-filter: brightness(85%);
+  @include focus-style-on-primary();
+}
+
+.kindTertiary.colorFixedLight.disabled {
+  opacity: $disabled-on-primary-color-opacity;
+  color: var(--text-color-fixed-light);
+}
+
 .kindTertiary.colorOnInvertedBackground {
   color: var(--text-color-on-inverted);
 }

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -168,7 +168,7 @@ const Button: VibeComponent<ButtonProps, unknown> & {
       debounceTime: UPDATE_CSS_VARIABLES_DEBOUNCE
     });
     useEffect(() => {
-      if (color !== ButtonColor.ON_PRIMARY_COLOR) return;
+      if (color !== ButtonColor.ON_PRIMARY_COLOR && color !== ButtonColor.FIXED_LIGHT) return;
       if (kind !== ButtonType.PRIMARY) return;
       if (!buttonRef.current) return;
 

diff --git a/src/components/Button/ButtonConstants.ts b/src/components/Button/ButtonConstants.ts
@@ -12,7 +12,9 @@ export enum ButtonColor {
   NEGATIVE = "negative",
   ON_PRIMARY_COLOR = "on-primary-color",
   ON_INVERTED_BACKGROUND = "on-inverted-background",
-  BRAND = "brand"
+  BRAND = "brand",
+  FIXED_LIGHT = "fixed-light"
+  // FIXED_DARK = "fixed-dark"
 }
 
 export const OLD_BUTTON_SIZES = {

diff --git a/src/components/Button/__tests__/__snapshots__/button-snapshot-tests.jest.js.snap b/src/components/Button/__tests__/__snapshots__/button-snapshot-tests.jest.js.snap
@@ -64,6 +64,24 @@ exports[`Button renders correctly renders Button color- brand 1`] = `
 </button>
 `;
 
+exports[`Button renders correctly renders Button color- fixed-light 1`] = `
+<button
+  aria-busy={false}
+  aria-disabled={false}
+  aria-pressed={false}
+  className="button sizeMedium kindPrimary colorFixedLight"
+  data-testid="button"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onMouseDown={[Function]}
+  onMouseUp={[Function]}
+  type="button"
+>
+  Button
+</button>
+`;
+
 exports[`Button renders correctly renders Button color- negative 1`] = `
 <button
   aria-busy={false}

diff --git a/src/components/Text/__stories__/Text.stories.mdx b/src/components/Text/__stories__/Text.stories.mdx
@@ -124,6 +124,24 @@ Text component comes in four colors: primary, secondary, on-primary and on-inver
       >
         On inverted text
       </Text>
+      <Text
+        element="div"
+        className={cx(styles.smallRectangle)}
+        style={{ backgroundColor: "black" }}
+        align={Text.align.CENTER}
+        color={Text.colors.FIXED_LIGHT}
+      >
+        Fixed light
+      </Text>
+      <Text
+        element="div"
+        className={cx(styles.smallRectangle)}
+        style={{ backgroundColor: "whitesmoke" }}
+        align={Text.align.CENTER}
+        color={Text.colors.FIXED_DARK}
+      >
+        Fixed dark
+      </Text>
     </Flex>
   </Story>
 </Canvas>
@@ -230,15 +248,37 @@ A Text component with a link skin can be used to create a link within running te
         </Link>
         inside running text on an inverted color
       </Text>
+      <Text
+        element="div"
+        ellipsis={false}
+        className={cx(styles.mediumRectangle)}
+        style={{ backgroundColor: "black" }}
+        align={Text.align.CENTER}
+        color={Text.colors.FIXED_LIGHT}
+      >
+        This is the story of a <a href="/?path=/docs/foundations-typography--page">link</a> inside running text with
+        fixed light color
+      </Text>
+      <Text
+        element="div"
+        ellipsis={false}
+        className={cx(styles.mediumRectangle)}
+        style={{ backgroundColor: "whitesmoke" }}
+        align={Text.align.CENTER}
+        color={Text.colors.FIXED_DARK}
+      >
+        This is the story of a <a href="/?path=/docs/foundations-typography--page">link</a> inside running text with
+        fixed dark color
+      </Text>
     </Flex>
   </Story>
 </Canvas>
 
 <Tip>
-  If you need to place a link outside of the textual flow, please use our{" "}
-  <Link href="/?path=/docs/navigation-link--overview" size={Link.sizes.SMALL} withoutSpacing>
+  If you need to place a link outside of the textual flow, please use our
+  <Link href="/?path=/docs/navigation-link--overview" size={Link.sizes.SMALL}>
     Link
-  </Link>{" "}
+  </Link>
   component.
 </Tip>
 

diff --git a/src/components/Text/__stories__/Text.stories.module.scss b/src/components/Text/__stories__/Text.stories.module.scss
@@ -1,20 +1,21 @@
 @mixin spacing {
   padding: var(--sb-spacing-small);
 }
+
 .primaryBackground {
-  @include spacing;
   background-color: var(--sb-primary-color);
 }
 
 .invertedBackground {
-  @include spacing;
   background-color: var(--sb-inverted-color-background);
 }
 
 .smallRectangle {
+  @include spacing;
   width: 150px;
 }
 
 .mediumRectangle {
+  @include spacing;
   width: 420px;
 }
diff --git a/src/components/Toast/Toast.module.scss b/src/components/Toast/Toast.module.scss
@@ -18,6 +18,7 @@
   display: flex;
   min-width: 200px;
   border-radius: var(--border-radius-small);
+  color: var(--text-color-fixed-light)
 }
 
 .icon {

diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -125,7 +125,7 @@ const Toast: FC<ToastProps> & { types?: typeof ToastType; actionTypes?: typeof T
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.TOAST, id)}
         type={Text.types.TEXT2}
         element="div"
-        color={Text.colors.ON_PRIMARY}
+        color={Text.colors.FIXED_LIGHT}
         className={classNames}
         role="alert"
         aria-live="polite"
@@ -149,7 +149,7 @@ const Toast: FC<ToastProps> & { types?: typeof ToastType; actionTypes?: typeof T
             onClick={handleClose}
             size={Button.sizes.SMALL}
             kind={Button.kinds.TERTIARY}
-            color={Button.colors.ON_PRIMARY_COLOR}
+            color={Button.colors.FIXED_LIGHT}
             ariaLabel="close-toast"
           >
             <Icon iconType={Icon.type.SVG} clickable={false} icon={CloseSmall} iconSize="20px" ignoreFocusStyle />

diff --git a/src/components/Toast/ToastButton/ToastButton.tsx b/src/components/Toast/ToastButton/ToastButton.tsx
@@ -20,7 +20,7 @@ const ToastButton: FC<ToastButtonProps> = ({ className, id, "data-testid": dataT
       dataTestId={dataTestId || getTestId(ComponentDefaultTestId.TOAST_BUTTON, id)}
       className={className}
       size={Button.sizes.SMALL}
-      color={Button.colors.ON_PRIMARY_COLOR}
+      color={Button.colors.FIXED_LIGHT}
     />
   );
 };

diff --git a/src/components/Toast/__tests__/__snapshots__/toast-snapshot-tests.jest.js.snap b/src/components/Toast/__tests__/__snapshots__/toast-snapshot-tests.jest.js.snap
@@ -5,7 +5,7 @@ exports[`Toast renders correctly (renders nothing) with empty props 1`] = `null`
 exports[`Toast renders correctly and don't renders close button if closeable=false 1`] = `
 <div
   aria-live="polite"
-  className="typography onPrimary start singleLineEllipsis text text2Normal toast typeNormal"
+  className="typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal"
   data-testid="toast"
   role="alert"
 >
@@ -46,7 +46,7 @@ exports[`Toast renders correctly when icon is hidden 1`] = `null`;
 exports[`Toast renders correctly when open is true 1`] = `
 <div
   aria-live="polite"
-  className="typography onPrimary start singleLineEllipsis text text2Normal toast typeNormal"
+  className="typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal"
   data-testid="toast"
   role="alert"
 >
@@ -82,7 +82,7 @@ exports[`Toast renders correctly when open is true 1`] = `
     aria-disabled={false}
     aria-label="close-toast"
     aria-pressed={false}
-    className="closeButton button sizeSmall kindTertiary colorOnPrimaryColor"
+    className="closeButton button sizeSmall kindTertiary colorFixedLight"
     data-testid="button"
     onBlur={[Function]}
     onClick={[Function]}
@@ -115,7 +115,7 @@ exports[`Toast renders correctly when open is true 1`] = `
 exports[`Toast renders correctly with button 1`] = `
 <div
   aria-live="polite"
-  className="typography onPrimary start singleLineEllipsis text text2Normal toast typeNormal"
+  className="typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal"
   data-testid="toast"
   role="alert"
 >
@@ -153,7 +153,7 @@ exports[`Toast renders correctly with button 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-pressed={false}
-      className="actionButton button sizeSmall kindSecondary colorOnPrimaryColor"
+      className="actionButton button sizeSmall kindSecondary colorFixedLight"
       data-testid="toast-button"
       onBlur={[Function]}
       onClick={[Function]}
@@ -170,7 +170,7 @@ exports[`Toast renders correctly with button 1`] = `
     aria-disabled={false}
     aria-label="close-toast"
     aria-pressed={false}
-    className="closeButton button sizeSmall kindTertiary colorOnPrimaryColor"
+    className="closeButton button sizeSmall kindTertiary colorFixedLight"
     data-testid="button"
     onBlur={[Function]}
     onClick={[Function]}
@@ -203,7 +203,7 @@ exports[`Toast renders correctly with button 1`] = `
 exports[`Toast renders correctly with button and link 1`] = `
 <div
   aria-live="polite"
-  className="typography onPrimary start singleLineEllipsis text text2Normal toast typeNormal"
+  className="typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal"
   data-testid="toast"
   role="alert"
 >
@@ -259,7 +259,7 @@ exports[`Toast renders correctly with button and link 1`] = `
       aria-busy={false}
       aria-disabled={false}
       aria-pressed={false}
-      className="actionButton button sizeSmall kindSecondary colorOnPrimaryColor"
+      className="actionButton button sizeSmall kindSecondary colorFixedLight"
       data-testid="toast-button"
       onBlur={[Function]}
       onClick={[Function]}
@@ -276,7 +276,7 @@ exports[`Toast renders correctly with button and link 1`] = `
     aria-disabled={false}
     aria-label="close-toast"
     aria-pressed={false}
-    className="closeButton button sizeSmall kindTertiary colorOnPrimaryColor"
+    className="closeButton button sizeSmall kindTertiary colorFixedLight"
     data-testid="button"
     onBlur={[Function]}
     onClick={[Function]}
@@ -309,7 +309,7 @@ exports[`Toast renders correctly with button and link 1`] = `
 exports[`Toast renders correctly with link 1`] = `
 <div
   aria-live="polite"
-  className="typography onPrimary start singleLineEllipsis text text2Normal toast typeNormal"
+  className="typography fixedLight start singleLineEllipsis text text2Normal toast typeNormal"
   data-testid="toast"
   role="alert"
 >
@@ -366,7 +366,7 @@ exports[`Toast renders correctly with link 1`] = `
     aria-disabled={false}
     aria-label="close-toast"
     aria-pressed={false}
-    className="closeButton button sizeSmall kindTertiary colorOnPrimaryColor"
+    className="closeButton button sizeSmall kindTertiary colorFixedLight"
     data-testid="button"
     onBlur={[Function]}
     onClick={[Function]}
@@ -399,7 +399,7 @@ exports[`Toast renders correctly with link 1`] = `
 exports[`Toast renders correctly with negative type 1`] = `
 <div
   aria-live="polite"
-  className="typography onPrimary start singleLineEllipsis text text2Normal toast typeNegative"
+  className="typography fixedLight start singleLineEllipsis text text2Normal toast typeNegative"
   data-testid="toast"
   role="alert"
 >
@@ -435,7 +435,7 @@ exports[`Toast renders correctly with negative type 1`] = `
     aria-disabled={false}
     aria-label="close-toast"
     aria-pressed={false}
-    className="closeButton button sizeSmall kindTertiary colorOnPrimaryColor"
+    className="closeButton button sizeSmall kindTertiary colorFixedLight"
     data-testid="button"
     onBlur={[Function]}
     onClick={[Function]}

diff --git a/src/components/Typography/Typography.module.scss b/src/components/Typography/Typography.module.scss
@@ -12,7 +12,8 @@
     }
   }
 
-  &:disabled, &[aria-disabled="true"]  {
+  &:disabled,
+  &[aria-disabled="true"] {
     color: var(--disabled-text-color);
   }
 }
@@ -41,6 +42,22 @@
   }
 }
 
+.fixedLight {
+  color: var(--text-color-fixed-light);
+  a {
+    color: var(--text-color-fixed-light);
+    text-decoration: underline;
+  }
+}
+
+.fixedDark {
+  color: var(--text-color-fixed-dark);
+  a {
+    color: var(--text-color-fixed-dark);
+    text-decoration: underline;
+  }
+}
+
 .start {
   text-align: start;
 }