Merge pull request #2042 from dxc-technology/rarrojolopez/buttons-sem…

…antic

Semantic buttons and button size changes

apps/website/screens/common/example/Example.tsx

@@ -76,11 +76,11 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
         </StyledPreview>
         {actionsVisible && (
           <CodeActionsContainer isCodeVisible={isCodeVisible}>
-            {isCodeVisible && <DxcButton label={"Copy code"} icon={icons.copy} mode="text" onClick={copyCode} />}
+            {isCodeVisible && <DxcButton label="Copy code" icon={icons.copy} mode="tertiary" onClick={copyCode} />}
             <DxcButton
               label={isCodeVisible ? "Hide code" : "View code"}
               icon={icons.code}
-              mode="text"
+              mode="tertiary"
               onClick={handleCodeOnClick}
             />
           </CodeActionsContainer>

apps/website/screens/common/themes/advanced-theme.json

@@ -118,50 +118,160 @@
   "button": {
     "labelFontLineHeight": "1.5em",
     "labelLetterSpacing": "0.025em",
-    "paddingLeft": "0.5rem",
-    "paddingRight": "0.5rem",
-    "paddingTop": "0.5rem",
-    "paddingBottom": "0.5rem",
-    "focusBorderColor": "#0095ff",
-    "primaryBackgroundColor": "#5f249f",
-    "primaryFontColor": "#ffffff",
-    "primaryHoverBackgroundColor": "#4b1c7d",
-    "primaryActiveBackgroundColor": "#321353",
-    "primaryDisabledBackgroundColor": "#f2f2f2",
-    "primaryDisabledFontColor": "#999999",
+    "paddingSmallTop": "0px",
+    "paddingSmallLeft": "8px",
+    "paddingSmallBottom": "0px",
+    "paddingSmallRight": "8px",
+    "paddingSmallOnlyIconTop": "0px",
+    "paddingSmallOnlyIconLeft": "4px",
+    "paddingSmallOnlyIconBottom": "0px",
+    "paddingSmallOnlyIconRight": "4px",
+    "paddingMediumTop": "0px",
+    "paddingMediumLeft": "8px",
+    "paddingMediumBottom": "0px",
+    "paddingMediumRight": "8px",
+    "paddingMediumOnlyIconTop": "0px",
+    "paddingMediumOnlyIconLeft": "8px",
+    "paddingMediumOnlyIconBottom": "0px",
+    "paddingMediumOnlyIconRight": "8px",
+    "paddingLargeTop": "0px",
+    "paddingLargeLeft": "16px",
+    "paddingLargeBottom": "0px",
+    "paddingLargeRight": "16px",
+    "paddingLargeOnlyIconTop": "0px",
+    "paddingLargeOnlyIconLeft": "8px",
+    "paddingLargeOnlyIconBottom": "0px",
+    "paddingLargeOnlyIconRight": "8px",
+    "focusBorderColor": "#33aaff",
+    "primaryDefaultBackgroundColor": "#5f249f",
+    "primaryErrorBackgroundColor": "#d0011b",
+    "primaryWarningBackgroundColor": "#c26c0a",
+    "primarySuccessBackgroundColor": "#24a148",
+    "primaryInfoBackgroundColor": "#0086e6",
+    "primaryDefaultFontColor": "#ffffff",
+    "primaryErrorFontColor": "#ffffff",
+    "primaryWarningFontColor": "#ffffff",
+    "primarySuccessFontColor": "#ffffff",
+    "primaryInfoFontColor": "#ffffff",
+    "primaryHoverDefaultBackgroundColor": "#4b1c7d",
+    "primaryHoverErrorBackgroundColor": "#980115",
+    "primaryHoverWarningBackgroundColor": "#915108",
+    "primaryHoverSuccessBackgroundColor": "#1c7d38",
+    "primaryHoverInfoBackgroundColor": "#0067b3",
+    "primaryActiveDefaultBackgroundColor": "#321353",
+    "primaryActiveErrorBackgroundColor": "#65010e",
+    "primaryActiveWarningBackgroundColor": "#613605",
+    "primaryActiveSuccessBackgroundColor": "#135325",
+    "primaryActiveInfoBackgroundColor": "#003c66",
+    "primaryDisabledDefaultBackgroundColor": "#f2eafa",
+    "primaryDisabledErrorBackgroundColor": "#ffe6e9",
+    "primaryDisabledWarningBackgroundColor": "#fef3e7",
+    "primaryDisabledSuccessBackgroundColor": "#eafaef",
+    "primaryDisabledInfoBackgroundColor": "#e6f4ff",
+    "primaryDisabledDefaultFontColor": "#cbacec",
+    "primaryDisabledErrorFontColor": "#fe9aa7",
+    "primaryDisabledWarningFontColor": "#facf9e",
+    "primaryDisabledSuccessFontColor": "#acecbe",
+    "primaryDisabledInfoFontColor": "#99d5ff",
     "primaryBorderThickness": "0px",
     "primaryBorderStyle": "none",
     "primaryBorderRadius": "0.25rem",
     "primaryFontFamily": "Open Sans, sans-serif",
-    "primaryFontSize": "1rem",
-    "primaryFontWeight": "400",
-    "secondaryBackgroundColor": "transparent",
-    "secondaryFontColor": "#5f249f",
-    "secondaryHoverFontColor": "#ffffff",
-    "secondaryBorderColor": "#5f249f",
-    "secondaryHoverBackgroundColor": "#5f249f",
-    "secondaryActiveBackgroundColor": "#321353",
-    "secondaryDisabledBackgroundColor": "transparent",
-    "secondaryDisabledFontColor": "#999999",
-    "secondaryDisabledBorderColor": "#999999",
+    "primarySmallFontSize": "0.875rem",
+    "primaryMediumFontSize": "0.875rem",
+    "primaryLargeFontSize": "1rem",
+    "primaryFontWeight": "600",
+    "secondaryDefaultBackgroundColor": "transparent",
+    "secondaryErrorBackgroundColor": "transparent",
+    "secondaryWarningBackgroundColor": "transparent",
+    "secondarySuccessBackgroundColor": "transparent",
+    "secondaryInfoBackgroundColor": "transparent",
+    "secondaryDefaultFontColor": "#5f249f",
+    "secondaryErrorFontColor": "#d0011b",
+    "secondaryWarningFontColor": "#c26c0a",
+    "secondarySuccessFontColor": "#24a148",
+    "secondaryInfoFontColor": "#0086e6",
+    "secondaryDefaultBorderColor": "#5f249f",
+    "secondaryErrorBorderColor": "#d0011b",
+    "secondaryWarningBorderColor": "#c26c0a",
+    "secondarySuccessBorderColor": "#24a148",
+    "secondaryInfoBorderColor": "#0086e6",
+    "secondaryHoverDefaultBackgroundColor": "#5f249f",
+    "secondaryHoverErrorBackgroundColor": "#d0011b",
+    "secondaryHoverWarningBackgroundColor": "#c26c0a",
+    "secondaryHoverSuccessBackgroundColor": "#24a148",
+    "secondaryHoverInfoBackgroundColor": "#0086e6",
+    "secondaryHoverDefaultFontColor": "#ffffff",
+    "secondaryHoverErrorFontColor": "#ffffff",
+    "secondaryHoverWarningFontColor": "#ffffff",
+    "secondaryHoverSuccessFontColor": "#ffffff",
+    "secondaryHoverInfoFontColor": "#ffffff",
+    "secondaryActiveDefaultBackgroundColor": "#4b1c7d",
+    "secondaryActiveErrorBackgroundColor": "#980115",
+    "secondaryActiveWarningBackgroundColor": "#915108",
+    "secondaryActiveSuccessBackgroundColor": "#1c7d38",
+    "secondaryActiveInfoBackgroundColor": "#0067b3",
+    "secondaryDisabledDefaultBackgroundColor": "transparent",
+    "secondaryDisabledErrorBackgroundColor": "transparent",
+    "secondaryDisabledWarningBackgroundColor": "transparent",
+    "secondaryDisabledSuccessBackgroundColor": "transparent",
+    "secondaryDisabledInfoBackgroundColor": "transparent",
+    "secondaryDisabledDefaultFontColor": "#cbacec",
+    "secondaryDisabledErrorFontColor": "#fe9aa7",
+    "secondaryDisabledWarningFontColor": "#facf9e",
+    "secondaryDisabledSuccessFontColor": "#acecbe",
+    "secondaryDisabledInfoFontColor": "#99d5ff",
+    "secondaryDisabledDefaultBorderColor": "#cbacec",
+    "secondaryDisabledErrorBorderColor": "#fe9aa7",
+    "secondaryDisabledWarningBorderColor": "#facf9e",
+    "secondaryDisabledSuccessBorderColor": "#acecbe",
+    "secondaryDisabledInfoBorderColor": "#99d5ff",
     "secondaryBorderThickness": "1px",
     "secondaryBorderStyle": "solid",
     "secondaryBorderRadius": "0.25rem",
     "secondaryFontFamily": "Open Sans, sans-serif",
-    "secondaryFontSize": "1rem",
-    "secondaryFontWeight": "400",
-    "textBackgroundColor": "transparent",
-    "textFontColor": "#5f249f",
-    "textHoverBackgroundColor": "#f2eafa",
-    "textActiveBackgroundColor": "#e5d5f6",
-    "textDisabledBackgroundColor": "transparent",
-    "textDisabledFontColor": "#999999",
-    "textBorderThickness": "0px",
-    "textBorderStyle": "none",
-    "textBorderRadius": "0.25rem",
-    "textFontFamily": "Open Sans, sans-serif",
-    "textFontSize": "1rem",
-    "textFontWeight": "400"
+    "secondarySmallFontSize": "0.875rem",
+    "secondaryMediumFontSize": "0.875rem",
+    "secondaryLargeFontSize": "1rem",
+    "secondaryFontWeight": "600",
+    "tertiaryDefaultBackgroundColor": "transparent",
+    "tertiaryErrorBackgroundColor": "transparent",
+    "tertiaryWarningBackgroundColor": "transparent",
+    "tertiarySuccessBackgroundColor": "transparent",
+    "tertiaryInfoBackgroundColor": "transparent",
+    "tertiaryDefaultFontColor": "#5f249f",
+    "tertiaryErrorFontColor": "#d0011b",
+    "tertiaryWarningFontColor": "#c26c0a",
+    "tertiarySuccessFontColor": "#24a148",
+    "tertiaryInfoFontColor": "#0086e6",
+    "tertiaryHoverDefaultBackgroundColor": "#f2eafa",
+    "tertiaryHoverErrorBackgroundColor": "#ffe6e9",
+    "tertiaryHoverWarningBackgroundColor": "#fef3e7",
+    "tertiaryHoverSuccessBackgroundColor": "#eafaef",
+    "tertiaryHoverInfoBackgroundColor": "#e6f4ff",
+    "tertiaryActiveDefaultBackgroundColor": "#e5d5f6",
+    "tertiaryActiveErrorBackgroundColor": "#ffccd3",
+    "tertiaryActiveWarningBackgroundColor": "#fce7cf",
+    "tertiaryActiveSuccessBackgroundColor": "#d5f6df",
+    "tertiaryActiveInfoBackgroundColor": "#cceaff",
+    "tertiaryDisabledDefaultBackgroundColor": "transparent",
+    "tertiaryDisabledErrorBackgroundColor": "transparent",
+    "tertiaryDisabledWarningBackgroundColor": "transparent",
+    "tertiaryDisabledSuccessBackgroundColor": "transparent",
+    "tertiaryDisabledInfoBackgroundColor": "transparent",
+    "tertiaryDisabledDefaultFontColor": "#cbacec",
+    "tertiaryDisabledErrorFontColor": "#fe9aa7",
+    "tertiaryDisabledWarningFontColor": "#facf9e",
+    "tertiaryDisabledSuccessFontColor": "#acecbe",
+    "tertiaryDisabledInfoFontColor": "#99d5ff",
+    "tertiaryBorderThickness": "0px",
+    "tertiaryBorderStyle": "none",
+    "tertiaryBorderRadius": "0.25rem",
+    "tertiaryFontFamily": "Open Sans, sans-serif",
+    "tertiarySmallFontSize": "0.875rem",
+    "tertiaryMediumFontSize": "0.875rem",
+    "tertiaryLargeFontSize": "1rem",
+    "tertiaryFontWeight": "600"
   },
   "card": {
     "height": "220px",

apps/website/screens/components/button/code/ButtonCodePage.tsx

@@ -3,9 +3,12 @@ import Code from "@/common/Code";
 import DocFooter from "@/common/DocFooter";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import StatusBadge from "@/common/StatusBadge";
 import Example from "@/common/example/Example";
 import basicUsage from "./examples/basicUsage";
+import semantic from "./examples/semantic";
 import icons from "./examples/icons";
+import sizes from "./examples/sizes";
 import TableCode from "@/common/TableCode";
 
 const sections = [
@@ -33,13 +36,28 @@ const sections = [
           <tr>
             <td>mode</td>
             <td>
-              <TableCode>'primary' | 'secondary' | 'text'</TableCode>
+              <TableCode>'primary' | 'secondary' | 'tertiary'</TableCode>
             </td>
             <td>The available button modes.</td>
             <td>
               <TableCode>'primary'</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusBadge status="new" />
+                semantic
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>'default' | 'error' | 'warning' | 'success' | 'info'</TableCode>
+            </td>
+            <td>Specifies the semantic meaning of the buttons, which determines its color.</td>
+            <td>
+              <TableCode>'default'</TableCode>
+            </td>
+          </tr>
           <tr>
             <td>title</td>
             <td>
@@ -122,13 +140,22 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>size</td>
             <td>
-              <TableCode>'small' | 'medium' | 'large' | 'fillParent' | 'fitContent'</TableCode>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusBadge status="new" />
+                size
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>
+                {
+                  "{ height: 'small' | 'medium' | 'large'; width: 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' }"
+                }
+              </TableCode>
             </td>
-            <td>Size of the component.</td>
+            <td>Object used to define the dimensions of the button in terms of height and width. </td>
             <td>
-              <TableCode>'fitContent'</TableCode>
+              <TableCode>{"{ height: 'large'; width: 'fitContent' }"}</TableCode>
             </td>
           </tr>
           <tr>
@@ -154,10 +181,18 @@ const sections = [
         title: "Basic usage",
         content: <Example example={basicUsage} defaultIsVisible />,
       },
+      {
+        title: "Semantic",
+        content: <Example example={semantic} defaultIsVisible />,
+      },
       {
         title: "Icons",
         content: <Example example={icons} defaultIsVisible />,
       },
+      {
+        title: "Size",
+        content: <Example example={sizes} defaultIsVisible />,
+      },
     ],
   },
 ];

apps/website/screens/components/button/code/examples/semantic.ts

@@ -0,0 +1,23 @@
+import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  return (
+    <DxcInset space="2rem">
+      <DxcFlex gap="1.5rem">
+        <DxcButton label="Search" />
+        <DxcButton semantic="error" label="Cancel" />
+        <DxcButton semantic="warning" label="Report" />
+        <DxcButton semantic="success" label="Confirm" />
+        <DxcButton semantic="info" label="Details" />
+      </DxcFlex>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcButton,
+  DxcFlex,
+  DxcInset,
+};
+
+export default { code, scope };

apps/website/screens/components/button/code/examples/sizes.ts

@@ -0,0 +1,39 @@
+import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  return (
+    <DxcInset space="2rem">
+    <DxcFlex gap="1.5rem" direction="column">
+        <DxcFlex gap="1.5rem">
+          <DxcButton icon="person" semantic="default" size={{ height: "small", width: "small" }} />
+          <DxcButton label="Submit" size={{ height: "small", width: "medium" }} />
+          <DxcButton label="Search" icon="search" size={{ height: "small", width: "large" }} />
+          <DxcButton label="Edit" size={{ height: "small", width: "fitContent" }} />
+          <DxcButton label="Learn more" size={{ height: "small", width: "fillParent" }} />
+        </DxcFlex>
+        <DxcFlex gap="1.5rem">
+          <DxcButton icon="person" semantic="default" size={{ height: "medium", width: "small" }} />
+          <DxcButton label="Submit" size={{ height: "medium", width: "medium" }} />
+          <DxcButton label="Search" icon="search" size={{ height: "medium", width: "large" }} />
+          <DxcButton label="Edit" size={{ height: "medium", width: "fitContent" }} />
+          <DxcButton label="Learn more" size={{ height: "medium", width: "fillParent" }} />
+        </DxcFlex>
+        <DxcFlex gap="1.5rem">
+          <DxcButton icon="person" semantic="default" size={{ height: "large", width: "small"}} />
+          <DxcButton label="Submit" size={{ height: "large", width: "medium" }} />
+          <DxcButton label="Search" icon="search" size={{ height: "large", width: "large" }} />
+          <DxcButton label="Edit" size={{ height: "large", width: "fitContent" }} />
+          <DxcButton label="Learn more" size={{ height: "large", width: "fillParent" }} />
+        </DxcFlex>
+      </DxcFlex>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcButton,
+  DxcInset,
+  DxcFlex,
+};
+
+export default { code, scope };