From 34d8612ebb080874c75e45b518e1c3b13762094f Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 3 Feb 2025 16:11:37 +0100 Subject: [PATCH 01/27] File input tokens applied --- packages/lib/src/file-input/FileInput.tsx | 66 +++++++++++------------ packages/lib/src/file-input/FileItem.tsx | 39 +++++++------- 2 files changed, 49 insertions(+), 56 deletions(-) diff --git a/packages/lib/src/file-input/FileInput.tsx b/packages/lib/src/file-input/FileInput.tsx index 1b1301536a..4b0270c492 100644 --- a/packages/lib/src/file-input/FileInput.tsx +++ b/packages/lib/src/file-input/FileInput.tsx @@ -23,19 +23,19 @@ const FileInputContainer = styled.div<{ margin: FileInputPropsType["margin"] }>` `; const Label = styled.label<{ disabled: FileInputPropsType["disabled"] }>` - color: ${(props) => (props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor)}; - font-family: ${(props) => props.theme.labelFontFamily}; - font-size: ${(props) => props.theme.labelFontSize}; - font-weight: ${(props) => props.theme.labelFontWeight}; - line-height: ${(props) => props.theme.labelLineHeight}; + color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")}; + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-semibold); + line-height: normal; `; const HelperText = styled.span<{ disabled: FileInputPropsType["disabled"] }>` - color: ${(props) => (props.disabled ? props.theme.disabledHelperTextFontColor : props.theme.helperTextFontColor)}; - font-family: ${(props) => props.theme.helperTextFontFamily}; - font-size: ${(props) => props.theme.helperTextFontSize}; - font-weight: ${(props) => props.theme.helperTextFontWeight}; - line-height: ${(props) => props.theme.helperTextLineHeight}; + color: var(--color-fg-neutral-stronger); + font-family: var(--typography-font-family); + font-size: var(--typography-helper-text-s); + font-weight: var(--typography-helper-text-regular); + line-height: normal; `; const FileContainer = styled.div<{ singleFileMode: boolean }>` @@ -75,22 +75,17 @@ const DragDropArea = styled.div<{ : "justify-content: center; flex-direction: column; row-gap: 0.5rem; height: 160px;"} align-items: center; width: 320px; - padding: ${(props) => - props.mode === "filedrop" - ? `calc(4px - ${props.theme.dropBorderThickness}) 1rem calc(4px - ${props.theme.dropBorderThickness}) calc(4px - ${props.theme.dropBorderThickness})` - : "1rem"}; + padding: ${(props) => (props.mode === "filedrop" ? `var(--spacing-gap-xs)` : "var(--spacing-padding-m)")}; overflow: hidden; - box-shadow: 0 0 0 2px transparent; - border-radius: ${(props) => props.theme.dropBorderRadius}; - border-width: ${(props) => props.theme.dropBorderThickness}; - border-style: ${(props) => props.theme.dropBorderStyle}; - border-color: ${(props) => (props.disabled ? props.theme.disabledDropBorderColor : props.theme.dropBorderColor)}; + border-radius: var(--border-radius-m); + border-width: var(--border-width-s); + border-style: var(--border-style-outline); + border-color: var(--border-color-neutral-dark); ${(props) => props.isDragging && ` - background-color: ${props.theme.dragoverDropBackgroundColor}; - border-color: transparent; - box-shadow: 0 0 0 2px ${props.theme.focusDropBorderColor}; + background-color: var(--color-bg-secondary-lightest); + border: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); `} cursor: ${(props) => props.disabled && "not-allowed"}; `; @@ -102,28 +97,29 @@ const DropzoneLabel = styled.div<{ disabled: FileInputPropsType["disabled"] }>` text-overflow: ellipsis; -webkit-line-clamp: 3; text-align: center; - color: ${(props) => (props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor)}; - font-family: ${(props) => props.theme.dropLabelFontFamily}; - font-size: ${(props) => props.theme.dropLabelFontSize}; - font-weight: ${(props) => props.theme.dropLabelFontWeight}; + color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")}; + font-family: var(--typography-font-family); + font-size: var(--typography-helper-text-m); + font-weight: var(--typography-helper-text-regular); `; const FiledropLabel = styled.span<{ disabled: FileInputPropsType["disabled"] }>` overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: ${(props) => (props.disabled ? props.theme.disabledDropLabelFontColor : props.theme.dropLabelFontColor)}; - font-family: ${(props) => props.theme.dropLabelFontFamily}; - font-size: ${(props) => props.theme.dropLabelFontSize}; - font-weight: ${(props) => props.theme.dropLabelFontWeight}; + color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")}; + font-family: var(--typography-font-family); + font-size: var(--typography-helper-text-m); + font-weight: var(--typography-helper-text-regular); `; const ErrorMessage = styled.div` - color: ${(props) => props.theme.errorMessageFontColor}; - font-family: ${(props) => props.theme.errorMessageFontFamily}; - font-size: ${(props) => props.theme.errorMessageFontSize}; - font-weight: ${(props) => props.theme.errorMessageFontWeight}; - line-height: ${(props) => props.theme.errorMessageLineHeight}; + overflow: hidden; + color: var(--color-fg-error-medium); + text-overflow: ellipsis; + font-family: var(--typography-font-family); + font-size: var(--typography-helper-text-s); + font-weight: var(--typography-helper-text-regular); margin-top: 0.25rem; `; diff --git a/packages/lib/src/file-input/FileItem.tsx b/packages/lib/src/file-input/FileItem.tsx index 02737b5006..c45ccc5190 100644 --- a/packages/lib/src/file-input/FileItem.tsx +++ b/packages/lib/src/file-input/FileItem.tsx @@ -18,13 +18,13 @@ const MainContainer = styled.div<{ width: ${(props) => (props.singleFileMode ? "230px" : "320px")}; padding: ${(props) => props.showPreview - ? `calc(8px - ${props.theme.fileItemBorderThickness})` - : `calc(8px - ${props.theme.fileItemBorderThickness}) calc(8px - ${props.theme.fileItemBorderThickness}) calc(8px - ${props.theme.fileItemBorderThickness}) 16px`}; - ${(props) => (props.error ? `background-color: ${props.theme.errorFileItemBackgroundColor};` : "")}; - border-color: ${(props) => (props.error ? props.theme.errorFileItemBorderColor : props.theme.fileItemBorderColor)}; - border-width: ${(props) => props.theme.fileItemBorderThickness}; - border-style: ${(props) => props.theme.fileItemBorderStyle}; - border-radius: ${(props) => props.theme.fileItemBorderRadius}; + ? `calc(var(--spacing-padding-xs) - var(--border-width-s))` + : `calc(var(--spacing-padding-xs) - var(--border-width-s)) calc(var(--spacing-padding-xs) - var(--border-width-s)) calc(var(--spacing-padding-xs) - var(--border-width-s)) 16px`}; + ${(props) => props.error && `background-color: var(--color-bg-error-lightest)`}; + border-color: ${(props) => (props.error ? `var(--border-color-error-medium)` : `var(--border-color-neutral-light)`)}; + border-width: var(--border-width-s); + border-style: var(--border-style-default); + border-radius: var(--border-radius-s); `; const ImagePreview = styled.img` @@ -39,13 +39,12 @@ const IconPreview = styled.span<{ error: FileItemProps["error"] }>` display: flex; align-items: center; justify-content: center; - background-color: ${(props) => - props.error ? props.theme.errorFilePreviewBackgroundColor : props.theme.filePreviewBackgroundColor}; + background-color: ${(props) => (props.error ? `var(--color-bg-error-light) ` : `var(--color-bg-neutral-light)`)}; width: 48px; height: 48px; padding: 15px; border-radius: 2px; - color: ${(props) => (props.error ? props.theme.errorFilePreviewIconColor : props.theme.filePreviewIconColor)}; + color: ${(props) => (props.error ? `var(--color-fg-error-medium)` : `var(--color-fg-neutral-strong) `)}; font-size: 18px; svg { height: 18px; @@ -63,11 +62,10 @@ const FileItemContent = styled.div` const FileName = styled.span` align-self: center; - color: ${(props) => props.theme.fileNameFontColor}; - font-family: ${(props) => props.theme.fileItemFontFamily}; - font-size: ${(props) => props.theme.fileItemFontSize}; - font-weight: ${(props) => props.theme.fileItemFontWeight}; - line-height: ${(props) => props.theme.fileItemLineHeight}; + color: var(--color-fg-neutral-dark); + font-family: var(--typography-font-family); + font-size: var(--typography-helper-text-m); + font-weight: var(--typography-helper-text-regular); white-space: pre; overflow: hidden; text-overflow: ellipsis; @@ -81,15 +79,14 @@ const ErrorIcon = styled.span` height: 18px; width: 18px; font-size: 18px; - color: #d0011b; + color: var(--color-fg-error-medium); `; const ErrorMessage = styled.span` - color: ${(props) => props.theme.errorMessageFontColor}; - font-family: ${(props) => props.theme.errorMessageFontFamily}; - font-size: ${(props) => props.theme.errorMessageFontSize}; - font-weight: ${(props) => props.theme.errorMessageFontWeight}; - line-height: ${(props) => props.theme.errorMessageLineHeight}; + color: var(--color-fg-error-medium); + font-family: var(--typography-font-family); + font-size: var(--typography-helper-text-s); + font-weight: var(--typography-helper-text-regular); `; const FileItem = ({ From 57ff8abc536e628a0e4d1961345177234a9cfa96 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 4 Feb 2025 13:04:21 +0100 Subject: [PATCH 02/27] Size tokens added to icons --- packages/lib/src/file-input/FileItem.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/lib/src/file-input/FileItem.tsx b/packages/lib/src/file-input/FileItem.tsx index c45ccc5190..f8d108102c 100644 --- a/packages/lib/src/file-input/FileItem.tsx +++ b/packages/lib/src/file-input/FileItem.tsx @@ -45,10 +45,10 @@ const IconPreview = styled.span<{ error: FileItemProps["error"] }>` padding: 15px; border-radius: 2px; color: ${(props) => (props.error ? `var(--color-fg-error-medium)` : `var(--color-fg-neutral-strong) `)}; - font-size: 18px; + font-size: var(--height-xs); svg { - height: 18px; - width: 18px; + width: 20px; + height: var(--height-xs); } `; @@ -76,9 +76,9 @@ const ErrorIcon = styled.span` flex-wrap: wrap; align-content: center; padding: 3px; - height: 18px; - width: 18px; - font-size: 18px; + width: 20px; + height: var(--height-xs); + font-size: var(--height-xs); color: var(--color-fg-error-medium); `; From 8a1633588e5e5688e920ef222618b73c81a404fa Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 4 Feb 2025 13:25:46 +0100 Subject: [PATCH 03/27] theemProvider removed --- packages/lib/src/file-input/FileInput.tsx | 216 +++++++++++----------- 1 file changed, 107 insertions(+), 109 deletions(-) diff --git a/packages/lib/src/file-input/FileInput.tsx b/packages/lib/src/file-input/FileInput.tsx index 4b0270c492..e232bac135 100644 --- a/packages/lib/src/file-input/FileInput.tsx +++ b/packages/lib/src/file-input/FileInput.tsx @@ -1,5 +1,5 @@ import { useCallback, useContext, useEffect, useId, useState, forwardRef, DragEvent, ChangeEvent } from "react"; -import styled, { ThemeProvider } from "styled-components"; +import styled from "styled-components"; import DxcButton from "../button/Button"; import { spaces } from "../common/variables"; import FileItem from "./FileItem"; @@ -248,121 +248,119 @@ const DxcFileInput = forwardRef( }, [value]); return ( - - - - {helperText} - {mode === "file" ? ( - - + + + {helperText} + {mode === "file" ? ( + + + + {files.length > 0 && ( + + {files.map((file, index) => ( + + ))} + + )} + + ) : ( + + + - {files.length > 0 && ( - - {files.map((file, index) => ( - - ))} - - )} - - ) : ( - - - - - {mode === "dropzone" ? ( - - {dropAreaLabel ?? - (multiple - ? translatedLabels.fileInput.multipleDropAreaLabelDefault - : translatedLabels.fileInput.singleDropAreaLabelDefault)} - - ) : ( - - {dropAreaLabel ?? - (multiple - ? translatedLabels.fileInput.multipleDropAreaLabelDefault - : translatedLabels.fileInput.singleDropAreaLabelDefault)} - - )} - - {files.length > 0 && ( - - {files.map((file, index) => ( - - ))} - + {mode === "dropzone" ? ( + + {dropAreaLabel ?? + (multiple + ? translatedLabels.fileInput.multipleDropAreaLabelDefault + : translatedLabels.fileInput.singleDropAreaLabelDefault)} + + ) : ( + + {dropAreaLabel ?? + (multiple + ? translatedLabels.fileInput.multipleDropAreaLabelDefault + : translatedLabels.fileInput.singleDropAreaLabelDefault)} + )} - - )} - {mode === "file" && !multiple && files.length === 1 && files[0]?.error && ( - {files[0].error} - )} - - + + {files.length > 0 && ( + + {files.map((file, index) => ( + + ))} + + )} + + )} + {mode === "file" && !multiple && files.length === 1 && files[0]?.error && ( + {files[0].error} + )} + ); } ); From c5867c06e79ad2274f38b5179e13d015fbb86b95 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Fri, 7 Feb 2025 13:31:34 +0100 Subject: [PATCH 04/27] Added import changes to fix storybook styles --- packages/lib/.storybook/preview-head.html | 1 - packages/lib/.storybook/preview.tsx | 1 + 2 files changed, 1 insertion(+), 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" /> -