Merge pull request #1955 from dxc-technology/revert-1947-rarrojolopez/chip-specs

Revert "Update Chip specs"

Author: jsuarezgonz

lib/src/common/variables.ts

@@ -215,6 +215,7 @@ export const componentTokens = {
     focusColor: CoreTokens.color_blue_600,
     focusBorderStyle: CoreTokens.border_solid,
     focusBorderThickness: CoreTokens.border_width_2,
+    focusBorderRadius: CoreTokens.border_radius_medium,
   },
   dateInput: {
     pickerBackgroundColor: CoreTokens.color_white,

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

@@ -191,11 +191,13 @@
   },
   "chip": {
     "backgroundColor": "#e6e6e6",
+    "disabledBackgroundColor": "#f2f2f2",
     "fontFamily": "Open Sans, sans-serif",
     "fontSize": "1rem",
     "fontStyle": "normal",
     "fontWeight": "400",
     "fontColor": "#000000",
+    "disabledFontColor": "#999999",
     "borderColor": "transparent",
     "borderRadius": "80px",
     "borderThickness": "0px",
@@ -212,7 +214,8 @@
     "disabledIconColor": "#999999",
     "focusColor": "#0095ff",
     "focusBorderStyle": "solid",
-    "focusBorderThickness": "2px"
+    "focusBorderThickness": "2px",
+    "focusBorderRadius": "0.25rem"
   },
   "dateInput": {
     "pickerBackgroundColor": "#ffffff",

website/screens/components/chip/code/ChipCodePage.tsx

@@ -95,10 +95,7 @@ const sections = [
             <td>
               <TableCode>boolean</TableCode>
             </td>
-            <td>
-              If true, action prefix icon or action suffix icon (if defined)
-              will be disabled.
-            </td>
+            <td>If true, the component will be disabled.</td>
             <td>
               <TableCode>false</TableCode>
             </td>

website/screens/components/chip/specs/ChipSpecsPage.tsx

@@ -11,6 +11,7 @@ import Figure from "@/common/Figure";
 import Image from "@/common/Image";
 import Code from "@/common/Code";
 import specsImage from "./images/chip_specs.png";
+import statesImage from "./images/chip_states_container.png";
 import prefixSuffixStatesImage from "./images/chip_states_action.png";
 import anatomyImage from "./images/chip_anatomy.png";
 
@@ -27,6 +28,13 @@ const sections = [
     title: "States",
     content: (
       <>
+        <DxcParagraph>
+          The chip component container states are <strong>enabled</strong> and{" "}
+          <strong>disabled</strong>:
+        </DxcParagraph>
+        <Figure caption="Chip states">
+          <Image src={statesImage} alt="Chip states" />
+        </Figure>
         <DxcParagraph>
           The chip action item has the following states:{" "}
           <strong>enabled</strong>, <strong>hover</strong>,{" "}
@@ -106,6 +114,26 @@ const sections = [
                 </td>
                 <td>transparent</td>
               </tr>
+              <tr>
+                <td>
+                  <Code>disabledBackgroundColor</Code>
+                </td>
+                <td>Container:disabled</td>
+                <td>
+                  <Code>color-grey-100</Code>
+                </td>
+                <td>#f2f2f2</td>
+              </tr>
+              <tr>
+                <td>
+                  <Code>disabledFontcolor</Code>
+                </td>
+                <td>Label:disabled</td>
+                <td>
+                  <Code>color-grey-500</Code>
+                </td>
+                <td>#999999</td>
+              </tr>
               <tr>
                 <td>
                   <Code>disabledIconColor</Code>
@@ -299,7 +327,7 @@ const sections = [
             <tbody>
               <tr>
                 <td>
-                  <Code>borderThickness</Code>
+                  <Code>border-width</Code>
                 </td>
                 <td>Chip container</td>
                 <td>
@@ -309,27 +337,27 @@ const sections = [
               </tr>
               <tr>
                 <td>
-                  <Code>borderStyle</Code>
+                  <Code>border-style</Code>
                 </td>
                 <td>Chip container</td>
                 <td>
-                  <Code>border-style-solid</Code>
+                  <Code>border-style-none</Code>
                 </td>
-                <td>solid</td>
+                <td>none</td>
               </tr>
               <tr>
                 <td>
-                  <Code>borderRadius</Code>
+                  <Code>border-radius</Code>
                 </td>
                 <td>Chip container</td>
                 <td>
-                  <Code>-</Code>
+                  <Code>border-radius-full</Code>
                 </td>
-                <td>80px</td>
+                <td>9999px</td>
               </tr>
               <tr>
                 <td>
-                  <Code>focusBorderThickness</Code>
+                  <Code>border-width</Code>
                 </td>
                 <td>Focus border</td>
                 <td>
@@ -339,14 +367,24 @@ const sections = [
               </tr>
               <tr>
                 <td>
-                  <Code>focusBorderStyle</Code>
+                  <Code>border-style</Code>
                 </td>
                 <td>Focus border</td>
                 <td>
                   <Code>border-style-solid</Code>
                 </td>
                 <td>solid</td>
               </tr>
+              <tr>
+                <td>
+                  <Code>border-radius</Code>
+                </td>
+                <td>Focus border</td>
+                <td>
+                  <Code>border-radius-medium</Code>
+                </td>
+                <td>0.25rem / 4px</td>
+              </tr>
             </tbody>
           </DxcTable>
         ),
@@ -372,7 +410,7 @@ const sections = [
                 <td>
                   <Code>size-icon-large</Code>
                 </td>
-                <td>24px</td>
+                <td>24x24px</td>
               </tr>
             </tbody>
           </DxcTable>

website/screens/components/chip/specs/images/chip_states_action.png

@@ -191,6 +191,8 @@
   },
   "chip": {
     "backgroundColor": "color",
+    "disabledBackgroundColor": "color",
+    "disabledFontColor": "color",
     "fontColor": "color",
     "fontFamily": "fFamily",
     "fontSize": "length",
@@ -212,7 +214,8 @@
     "disabledIconColor": "color",
     "focusColor": "color",
     "focusBorderStyle": "bStyle",
-    "focusBorderThickness": "length"
+    "focusBorderThickness": "length",
+    "focusBorderRadius": "length"
   },
   "dateInput": {
     "pickerBackgroundColor": "color",