From f4dc2918299750e07803f8b9fe579b4159504584 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Thu, 30 Jan 2025 15:16:47 +0100 Subject: [PATCH 01/18] Added tokens to DxcAlert --- packages/lib/src/alert/Alert.tsx | 205 +++++++++++++++---------------- packages/lib/src/index.ts | 2 +- 2 files changed, 98 insertions(+), 109 deletions(-) diff --git a/packages/lib/src/alert/Alert.tsx b/packages/lib/src/alert/Alert.tsx index e2ed56bc3f..275612543e 100644 --- a/packages/lib/src/alert/Alert.tsx +++ b/packages/lib/src/alert/Alert.tsx @@ -18,20 +18,20 @@ const AlertContainer = styled.div<{ display: flex; flex-direction: column; gap: ${CoreTokens.spacing_8}; - ${(props) => - (props.mode === "modal" || props.mode === "inline") && `border-radius: ${CoreTokens.border_radius_medium};`}; + ${(props) => (props.mode === "modal" || props.mode === "inline") && `border-radius: var(--border-radius-s);`}; padding: ${(props) => props.mode === "modal" - ? CoreTokens.spacing_24 + ? "var(--spacing-padding-l)" : props.mode === "inline" - ? CoreTokens.spacing_12 - : `${CoreTokens.spacing_8} ${CoreTokens.spacing_12}`}; + ? "var(--spacing-padding-s)" + : "var(--spacing-padding-xs) var(--spacing-padding-s)"}; + background-color: ${(props) => - (props.mode === "modal" && props.theme.modalBackgroundColor) || - (props.semantic === "info" && props.theme.infoBackgroundColor) || - (props.semantic === "success" && props.theme.successBackgroundColor) || - (props.semantic === "warning" && props.theme.warningBackgroundColor) || - (props.semantic === "error" && props.theme.errorBackgroundColor)}; + (props.mode === "modal" && "var(--color-absolutes-white)") || + (props.semantic === "info" && "var(--color-bg-secondary-lighter)") || + (props.semantic === "success" && "var(--color-bg-success-lighter)") || + (props.semantic === "warning" && "var(--color-bg-warning-lighter)") || + (props.semantic === "error" && "var(--color-bg-error-lighter)")}; overflow: hidden; `; @@ -39,28 +39,28 @@ const TitleContainer = styled.div<{ mode: AlertPropsType["mode"]; semantic: Aler flex-grow: 1; display: flex; align-items: center; - gap: ${CoreTokens.spacing_8}; + gap: var(--spacing-gap-s); color: ${(props) => - (props.semantic === "info" && props.theme.infoIconColor) || - (props.semantic === "success" && props.theme.successIconColor) || - (props.semantic === "warning" && props.theme.warningIconColor) || - (props.semantic === "error" && props.theme.errorIconColor)}; - font-size: ${(props) => props.theme.iconSize}; + (props.semantic === "info" && "var(--color-bg-secondary-strong)") || + (props.semantic === "success" && "var(--color-bg-success-strong)") || + (props.semantic === "warning" && "var(--color-bg-warning-strong)") || + (props.semantic === "error" && "var(--color-bg-error-strong)")}; + font-size: var(--height-s); overflow: hidden; `; const typographyStyles = css` - font-family: ${(props) => props.theme.fontFamily}; - font-size: ${(props) => props.theme.fontSize}; - font-style: ${(props) => props.theme.fontStyle}; - font-weight: ${(props) => props.theme.fontWeight}; - color: ${(props) => props.theme.fontColor}; + font-family: var(--typography-font-family); + font-style: normal; + color: var(--color-fg-neutral-dark); + font-weight: var(--typography-helper-text-regular); + line-height: normal; `; const Title = styled.span<{ mode: AlertPropsType["mode"] }>` ${typographyStyles} - ${(props) => props.mode === "modal" && `font-size: ${props.theme.modalTitleFontSize}`}; - font-weight: ${(props) => props.theme.modalTitleFontWeight}; + font-size: ${(props) => (props.mode === "modal" ? "var(--typography-title-xl)" : "var(--typography-title-s)")}; + font-weight: var(--typography-title-bold); `; const Message = styled.div<{ mode: AlertPropsType["mode"] }>` @@ -68,15 +68,17 @@ const Message = styled.div<{ mode: AlertPropsType["mode"] }>` white-space: ${(props) => props.mode === "banner" && "nowrap"}; text-overflow: ${(props) => props.mode === "banner" && "ellipsis"}; overflow: ${(props) => props.mode === "banner" && "hidden"}; - + font-size: var(--typography-helper-text-m); > strong { - font-weight: ${(props) => props.theme.modalTitleFontWeight}; + font-weight: var(--typography-title-bold); + font-size: var(--typography-title-s); } `; const NavigationText = styled.span` ${typographyStyles} white-space: nowrap; + font-size: var(--typography-helper-text-s); `; const Actions = memo( @@ -137,7 +139,6 @@ export default function DxcAlert({ const [currentIndex, setCurrentIndex] = useState(0); const id = useId(); - const colorsTheme = useContext(HalstackContext); const translatedLabels = useContext(HalstackLanguageContext); const handleNextOnClick = () => { @@ -158,90 +159,78 @@ export default function DxcAlert({ }, [currentIndex, messages, handlePrevOnClick]); return ( - - - - - - {getIcon(semantic)} - {mode === "banner" ? ( - - {title} - {messages.length > 0 && <> - {messages[currentIndex]?.text}} - - ) : ( - - {title} - - )} - - {mode === "banner" && ( - - )} - {messages.length > 1 && ( - - - - {currentIndex + 1} of {messages.length} - - - - )} - {closable && ( - - {mode !== "modal" && } - 1 - ? translatedLabels.alert.closeMessageActionTitle - : translatedLabels.alert.closeAlertActionTitle - } - onClick={handleOnClose} - /> - + + + + + {getIcon(semantic)} + {mode === "banner" ? ( + + {title} + {messages.length > 0 && <> - {messages[currentIndex]?.text}} + + ) : ( + + {title} + )} - - {mode === "modal" && } - {mode !== "banner" && ( - <> - {messages.length > 0 && ( - - {messages[currentIndex]?.text} - - )} - + {mode === "banner" && ( + + )} + {messages.length > 1 && ( + + + + {currentIndex + 1} of {messages.length} + + + + )} + {closable && ( + + {mode !== "modal" && } + 1 + ? translatedLabels.alert.closeMessageActionTitle + : translatedLabels.alert.closeAlertActionTitle + } + onClick={handleOnClose} /> - + )} - - - + + {mode === "modal" && } + {mode !== "banner" && ( + <> + {messages.length > 0 && ( + + {messages[currentIndex]?.text} + + )} + + + )} + + ); } diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index fd0fc86ca5..3ded437d20 100644 --- a/packages/lib/src/index.ts +++ b/packages/lib/src/index.ts @@ -1,5 +1,5 @@ import "./styles/fonts.css"; -// import "./styles/variables.css"; +import "./styles/variables.css"; export { default as DxcAccordion } from "./accordion/Accordion"; export { default as DxcAccordionGroup } from "./accordion-group/AccordionGroup"; From 5b801cdd8c6fc889d4cfbdeb3550676459f8c23b Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Fri, 31 Jan 2025 10:53:14 +0100 Subject: [PATCH 02/18] Reimplementation of the Alert and ActionIcon component with new CSS variables --- packages/lib/src/action-icon/ActionIcon.tsx | 32 +++++++++------------ packages/lib/src/alert/Alert.tsx | 8 ++---- 2 files changed, 16 insertions(+), 24 deletions(-) diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index f243c98acd..4542badbe0 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -11,19 +11,13 @@ const ActionIcon = styled.button` align-items: center; justify-content: center; flex-shrink: 0; - border-radius: 2px; - width: 24px; - height: 24px; + border-radius: var(--border-radius-xs); + width: var(--height-s); + height: var(--height-s); + border: var(--border-width-m) var(--border_solid) var(--color_transparent); ${(props) => (props.disabled ? `cursor: not-allowed;` : `cursor: pointer;`)} - box-shadow: 0 0 0 2px transparent; - background-color: ${(props) => - props.disabled - ? (props.theme.disabledActionBackgroundColor ?? CoreTokens.color_transparent) - : (props.theme.actionBackgroundColor ?? CoreTokens.color_transparent)}; - color: ${(props) => - props.disabled - ? (props.theme.disabledActionIconColor ?? CoreTokens.color_grey_500) - : (props.theme.actionIconColor ?? CoreTokens.color_grey_900)}; + background-color: var(--color_transparent); + color: ${(props) => (props.disabled ? "var(--color_grey_500)" : "var(--color_grey_900)")}; ${(props) => !props.disabled && @@ -31,20 +25,20 @@ const ActionIcon = styled.button` &:focus, &:focus-visible { outline: none; - box-shadow: 0 0 0 2px ${props.theme.focusActionBorderColor ?? CoreTokens.color_blue_600}; - color: ${props.theme.focusActionIconColor ?? CoreTokens.color_grey_900}; + border: var(--border-width-m) var(--border_solid) var(--border-color-secondary-medium); + color: var(--color_grey_900); } &:hover { - background-color: ${props.theme.hoverActionBackgroundColor ?? CoreTokens.color_grey_100}; - color: ${props.theme.hoverActionIconColor ?? CoreTokens.color_grey_900}; + background-color: var(--color-bg-alpha-light); + color: var(--color_grey_900); } &:active { - background-color: ${props.theme.activeActionBackgroundColor ?? CoreTokens.color_grey_300}; - color: ${props.theme.activeActionIconColor ?? CoreTokens.color_grey_900}; + background-color: var(--color-bg-alpha-light); + color: var(--color_grey_900); } `} - font-size: 16px; + font-size: 16px; > svg { width: 16px; height: 16px; diff --git a/packages/lib/src/alert/Alert.tsx b/packages/lib/src/alert/Alert.tsx index 275612543e..3fcf5c9a23 100644 --- a/packages/lib/src/alert/Alert.tsx +++ b/packages/lib/src/alert/Alert.tsx @@ -7,8 +7,7 @@ import DxcDivider from "../divider/Divider"; import DxcActionIcon from "../action-icon/ActionIcon"; import DxcFlex from "../flex/Flex"; import ModalAlertWrapper from "./ModalAlertWrapper"; -import CoreTokens from "../common/coreTokens"; -import HalstackContext, { HalstackLanguageContext } from "../HalstackContext"; +import { HalstackLanguageContext } from "../HalstackContext"; const AlertContainer = styled.div<{ semantic: AlertPropsType["semantic"]; @@ -17,7 +16,7 @@ const AlertContainer = styled.div<{ box-sizing: border-box; display: flex; flex-direction: column; - gap: ${CoreTokens.spacing_8}; + gap: ${(props) => (props.mode === "banner" ? "var(--spacing-gap-m)" : "var(--spacing-gap-s)")}; ${(props) => (props.mode === "modal" || props.mode === "inline") && `border-radius: var(--border-radius-s);`}; padding: ${(props) => props.mode === "modal" @@ -51,10 +50,9 @@ const TitleContainer = styled.div<{ mode: AlertPropsType["mode"]; semantic: Aler const typographyStyles = css` font-family: var(--typography-font-family); - font-style: normal; + font-style: var(--type_normal); color: var(--color-fg-neutral-dark); font-weight: var(--typography-helper-text-regular); - line-height: normal; `; const Title = styled.span<{ mode: AlertPropsType["mode"] }>` From 4b2154813549e3f18aa0de193107bbf8e3e56780 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Fri, 31 Jan 2025 10:56:30 +0100 Subject: [PATCH 03/18] Removed unused imports --- packages/lib/src/action-icon/ActionIcon.tsx | 1 - packages/lib/src/alert/Alert.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index 4542badbe0..1d10bc2754 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -1,7 +1,6 @@ import { forwardRef } from "react"; import ActionIconPropsTypes, { RefType } from "./types"; import styled from "styled-components"; -import CoreTokens from "../common/coreTokens"; import DxcIcon from "../icon/Icon"; import { Tooltip } from "../tooltip/Tooltip"; diff --git a/packages/lib/src/alert/Alert.tsx b/packages/lib/src/alert/Alert.tsx index 3fcf5c9a23..0bc5849b78 100644 --- a/packages/lib/src/alert/Alert.tsx +++ b/packages/lib/src/alert/Alert.tsx @@ -1,4 +1,4 @@ -import styled, { css, ThemeProvider } from "styled-components"; +import styled, { css } from "styled-components"; import { useState, memo, useId, useEffect, useCallback, useContext } from "react"; import AlertPropsType from "./types"; import DxcIcon from "../icon/Icon"; From f4863c196db872e19e2b5bce479454a9e47ab175 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Fri, 31 Jan 2025 11:26:06 +0100 Subject: [PATCH 04/18] Fixed tokens --- packages/lib/src/action-icon/ActionIcon.tsx | 20 +++++++++----------- packages/lib/src/alert/Alert.stories.tsx | 1 - packages/lib/src/alert/Alert.tsx | 4 ++-- 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index 1d10bc2754..2802993589 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -13,10 +13,10 @@ const ActionIcon = styled.button` border-radius: var(--border-radius-xs); width: var(--height-s); height: var(--height-s); - border: var(--border-width-m) var(--border_solid) var(--color_transparent); + border: var(--border-width-m) var(--border-style-default) transparent; ${(props) => (props.disabled ? `cursor: not-allowed;` : `cursor: pointer;`)} - background-color: var(--color_transparent); - color: ${(props) => (props.disabled ? "var(--color_grey_500)" : "var(--color_grey_900)")}; + background-color: transparent; + color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")}; ${(props) => !props.disabled && @@ -24,23 +24,21 @@ const ActionIcon = styled.button` &:focus, &:focus-visible { outline: none; - border: var(--border-width-m) var(--border_solid) var(--border-color-secondary-medium); - color: var(--color_grey_900); + border: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + color: var(--color-fg-neutral-dark); } &:hover { background-color: var(--color-bg-alpha-light); - color: var(--color_grey_900); + color: var(--color-fg-neutral-dark); } &:active { background-color: var(--color-bg-alpha-light); - color: var(--color_grey_900); + color: var(--color-fg-neutral-dark); } `} - - font-size: 16px; + font-size: var(--height-xxs); > svg { - width: 16px; - height: 16px; + height: var(--height-xxs); } `; diff --git a/packages/lib/src/alert/Alert.stories.tsx b/packages/lib/src/alert/Alert.stories.tsx index b67c366eec..0e582fc398 100644 --- a/packages/lib/src/alert/Alert.stories.tsx +++ b/packages/lib/src/alert/Alert.stories.tsx @@ -309,7 +309,6 @@ const AlertSuccess = () => ( message={message} primaryAction={{ label: "Primary action", onClick: () => {} }} secondaryAction={{ label: "Secondary action", onClick: () => {} }} - closable={false} /> ); diff --git a/packages/lib/src/alert/Alert.tsx b/packages/lib/src/alert/Alert.tsx index 0bc5849b78..79629ead72 100644 --- a/packages/lib/src/alert/Alert.tsx +++ b/packages/lib/src/alert/Alert.tsx @@ -26,7 +26,7 @@ const AlertContainer = styled.div<{ : "var(--spacing-padding-xs) var(--spacing-padding-s)"}; background-color: ${(props) => - (props.mode === "modal" && "var(--color-absolutes-white)") || + (props.mode === "modal" && "var(--color-bg-neutral-lightest)") || (props.semantic === "info" && "var(--color-bg-secondary-lighter)") || (props.semantic === "success" && "var(--color-bg-success-lighter)") || (props.semantic === "warning" && "var(--color-bg-warning-lighter)") || @@ -50,7 +50,7 @@ const TitleContainer = styled.div<{ mode: AlertPropsType["mode"]; semantic: Aler const typographyStyles = css` font-family: var(--typography-font-family); - font-style: var(--type_normal); + font-style: var(--font-style-normal); color: var(--color-fg-neutral-dark); font-weight: var(--typography-helper-text-regular); `; From ca32367c74a3b52e3d65de930a9b205d2bba7382 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Fri, 31 Jan 2025 11:50:38 +0100 Subject: [PATCH 05/18] Removed width prop --- packages/lib/src/action-icon/ActionIcon.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index 2802993589..28af3f5989 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -11,7 +11,6 @@ const ActionIcon = styled.button` justify-content: center; flex-shrink: 0; border-radius: var(--border-radius-xs); - width: var(--height-s); height: var(--height-s); border: var(--border-width-m) var(--border-style-default) transparent; ${(props) => (props.disabled ? `cursor: not-allowed;` : `cursor: pointer;`)} From 92964b39c96b1a8ecb440841edc70b6ed4a901bf Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Mon, 3 Feb 2025 11:50:46 +0100 Subject: [PATCH 06/18] Fixed styles for focus --- packages/lib/src/action-icon/ActionIcon.tsx | 7 ++----- packages/lib/src/alert/Alert.tsx | 2 +- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index 28af3f5989..407d7b396a 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -12,9 +12,7 @@ const ActionIcon = styled.button` flex-shrink: 0; border-radius: var(--border-radius-xs); height: var(--height-s); - border: var(--border-width-m) var(--border-style-default) transparent; ${(props) => (props.disabled ? `cursor: not-allowed;` : `cursor: pointer;`)} - background-color: transparent; color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")}; ${(props) => @@ -22,9 +20,8 @@ const ActionIcon = styled.button` ` &:focus, &:focus-visible { - outline: none; - border: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); - color: var(--color-fg-neutral-dark); + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + color: var(--color-fg-neutral-dark); } &:hover { background-color: var(--color-bg-alpha-light); diff --git a/packages/lib/src/alert/Alert.tsx b/packages/lib/src/alert/Alert.tsx index 79629ead72..7426391b9b 100644 --- a/packages/lib/src/alert/Alert.tsx +++ b/packages/lib/src/alert/Alert.tsx @@ -50,7 +50,7 @@ const TitleContainer = styled.div<{ mode: AlertPropsType["mode"]; semantic: Aler const typographyStyles = css` font-family: var(--typography-font-family); - font-style: var(--font-style-normal); + font-style: normal; color: var(--color-fg-neutral-dark); font-weight: var(--typography-helper-text-regular); `; From bad77e8ca443718f06c3ab703c933703fc3b68e1 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Mon, 3 Feb 2025 12:55:18 +0100 Subject: [PATCH 07/18] Width fixed size --- packages/lib/src/action-icon/ActionIcon.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index 407d7b396a..6cd9ff2321 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -35,6 +35,7 @@ const ActionIcon = styled.button` font-size: var(--height-xxs); > svg { height: var(--height-xxs); + width: 24px; } `; From 65d3f75daa81416150a18efa41b158f2f9a0369c Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Tue, 4 Feb 2025 15:58:22 +0100 Subject: [PATCH 08/18] Fixed width for icon --- packages/lib/src/action-icon/ActionIcon.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx index 6cd9ff2321..75662141f2 100644 --- a/packages/lib/src/action-icon/ActionIcon.tsx +++ b/packages/lib/src/action-icon/ActionIcon.tsx @@ -12,6 +12,7 @@ const ActionIcon = styled.button` flex-shrink: 0; border-radius: var(--border-radius-xs); height: var(--height-s); + width: 24px; ${(props) => (props.disabled ? `cursor: not-allowed;` : `cursor: pointer;`)} color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")}; @@ -35,7 +36,7 @@ const ActionIcon = styled.button` font-size: var(--height-xxs); > svg { height: var(--height-xxs); - width: 24px; + width: 16px; } `; From 4617d41766c5628c4450e2d96c3da1772835147f Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 5 Feb 2025 12:22:09 +0100 Subject: [PATCH 09/18] Modified preview for storybook --- packages/lib/.storybook/preview.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/lib/.storybook/preview.tsx b/packages/lib/.storybook/preview.tsx index 50171526b6..e535a40648 100644 --- a/packages/lib/.storybook/preview.tsx +++ b/packages/lib/.storybook/preview.tsx @@ -1,5 +1,6 @@ import type { Preview } from "@storybook/react"; import { disabledRules } from "../test/accessibility/rules/common/disabledRules"; +import "../src/styles/variables.css"; const preview: Preview = { parameters: { From 2f0c1ce937a35263838d01d3a9621e1857587969 Mon Sep 17 00:00:00 2001 From: Enrique Moreno Date: Wed, 5 Feb 2025 12:27:33 +0100 Subject: [PATCH 10/18] Modified preview for storybook --- packages/lib/.storybook/preview-head.html | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/lib/.storybook/preview-head.html b/packages/lib/.storybook/preview-head.html index e28cb145ff..4e1ea405ff 100644 --- a/packages/lib/.storybook/preview-head.html +++ b/packages/lib/.storybook/preview-head.html @@ -2,7 +2,6 @@ rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&family=Material+Symbols+Outlined:FILL@0..1" /> -