Merge branch 'master' into Mil4n0r/fix-NaN-textinput

dxc-technology · Feb 26, 2024 · 12d707c · 12d707c
2 parents 28cb733 + ecb3627
commit 12d707c
Show file tree

Hide file tree

Showing 22 changed files with 711 additions and 112 deletions.
diff --git a/lib/src/badge/Badge.stories.tsx b/lib/src/badge/Badge.stories.tsx
@@ -26,7 +26,7 @@ export const Chromatic = () => (
         <DxcBadge mode="notification" size="small" />
         <DxcBadge mode="notification" label={1} size="small" />
         <DxcBadge mode="notification" label={10} size="small" />
-        <DxcBadge mode="notification" label={1000000} size="medium" notificationLimit={99999999} />
+        <DxcBadge mode="notification" label={1000000} size="small" notificationLimit={99999999} />
         <DxcBadge mode="notification" label={100} size="small" notificationLimit={99} />
       </DxcFlex>
     </ExampleContainer>

diff --git a/lib/src/badge/Badge.tsx b/lib/src/badge/Badge.tsx
@@ -138,7 +138,7 @@ const BadgeContainer = styled.div<{
   padding: ${(props) => (props.label ? getPadding(props.mode, props.size) : "")};
   align-items: center;
   justify-content: center;
-  box-sizing: ${(props) => props.mode === "notification" && "border-box"};
+  box-sizing: border-box;
 `;
 
 const IconContainer = styled.div<{ size: BadgePropsType["size"] }>`

diff --git a/lib/src/table/ActionsCell.tsx b/lib/src/table/ActionsCell.tsx
@@ -16,7 +16,7 @@ const DxcActionsCell = ({ actions }: ActionCellsPropsType): JSX.Element => {
   const maxNumberOfActions = actionDropdown ? 2 : 3;
 
   return (
-    <DxcFlex gap={"0.5rem"}>
+    <DxcFlex gap={"0.5rem"} alignItems="center">
       {actionIcons.map(
         (action, index) =>
           index < maxNumberOfActions && (

diff --git a/lib/src/table/DropdownTheme.jsx b/lib/src/table/DropdownTheme.jsx
@@ -1,3 +1,4 @@
+import { componentTokens } from "../common/variables";
 export default {
   dropdown: {
     // Breadcrumbs tokens
@@ -16,37 +17,37 @@ export default {
     optionPaddingRight: "16px",
 
     // Dropdown tokens
-    buttonBackgroundColor: "#ffffff",
-    hoverButtonBackgroundColor: "#f2f2f2",
-    activeButtonBackgroundColor: "#cccccc",
-    buttonFontFamily: "Open Sans, sans-serif",
-    buttonFontSize: "1rem",
-    buttonFontStyle: "normal",
-    buttonFontWeight: "400",
-    buttonFontColor: "#000000",
-    buttonIconSpacing: "10px",
-    buttonIconColor: "#5f249f",
-    disabledColor: "#999999",
-    disabledButtonBackgroundColor: "transparent",
-    disabledBorderColor: "transparent",
-    optionBackgroundColor: "#ffffff",
-    hoverOptionBackgroundColor: "#f2f2f2",
-    activeOptionBackgroundColor: "#cccccc",
-    optionFontFamily: "Open Sans, sans-serif",
-    optionFontStyle: "normal",
-    optionFontWeight: "400",
-    optionFontColor: "#000000",
-    optionIconSize: "20px",
-    optionIconSpacing: "10px",
-    optionIconColor: "#000000",
-    caretIconSize: "24px",
-    caretIconColor: "#000000",
-    caretIconSpacing: "12px",
-    borderRadius: "4px",
-    borderStyle: "none",
-    borderThickness: "0px",
-    borderColor: "transparent",
-    scrollBarThumbColor: "#666666",
-    scrollBarTrackColor: "#cccccc",
+    buttonBackgroundColor: componentTokens.table.actionBackgroundColor,
+    hoverButtonBackgroundColor: componentTokens.table.hoverActionBackgroundColor,
+    activeButtonBackgroundColor: componentTokens.table.activeActionBackgroundColor,
+    buttonFontFamily: componentTokens.dropdown.buttonFontFamily,
+    buttonFontSize: componentTokens.dropdown.buttonFontSize,
+    buttonFontStyle: componentTokens.dropdown.buttonFontStyle,
+    buttonFontWeight: componentTokens.dropdown.buttonFontWeight,
+    buttonFontColor: componentTokens.dropdown.buttonFontColor,
+    buttonIconSpacing: componentTokens.dropdown.buttonIconSpacing,
+    buttonIconColor: componentTokens.table.actionIconColor,
+    disabledColor: componentTokens.table.disabledActionIconColor,
+    disabledButtonBackgroundColor: componentTokens.table.disabledActionBackgroundColor,
+    disabledBorderColor: componentTokens.dropdown.disabledBorderColor,
+    optionBackgroundColor: componentTokens.dropdown.optionBackgroundColor,
+    hoverOptionBackgroundColor: componentTokens.dropdown.hoverOptionBackgroundColor,
+    activeOptionBackgroundColor: componentTokens.dropdown.activeOptionBackgroundColor,
+    optionFontFamily: componentTokens.dropdown.optionFontFamily,
+    optionFontStyle: componentTokens.dropdown.optionFontStyle,
+    optionFontWeight: componentTokens.dropdown.optionFontWeight,
+    optionFontColor: componentTokens.dropdown.optionFontColor,
+    optionIconSize: componentTokens.dropdown.optionIconSize,
+    optionIconSpacing: componentTokens.dropdown.optionIconSpacing,
+    optionIconColor: componentTokens.dropdown.optionIconColor,
+    caretIconSize: componentTokens.dropdown.caretIconSize,
+    caretIconColor: componentTokens.dropdown.caretIconColor,
+    caretIconSpacing: componentTokens.dropdown.caretIconSpacing,
+    borderRadius: componentTokens.dropdown.borderRadius,
+    borderStyle: componentTokens.dropdown.borderStyle,
+    borderThickness: componentTokens.dropdown.borderThickness,
+    borderColor: componentTokens.dropdown.borderColor,
+    scrollBarThumbColor: componentTokens.dropdown.scrollBarThumbColor,
+    scrollBarTrackColor: componentTokens.dropdown.scrollBarTrackColor,
   },
 };