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

Update Chip specs

Author: Mil4n0r

lib/src/common/variables.ts

@@ -215,7 +215,6 @@ 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,13 +191,11 @@
   },
   "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",
@@ -214,8 +212,7 @@
     "disabledIconColor": "#999999",
     "focusColor": "#0095ff",
     "focusBorderStyle": "solid",
-    "focusBorderThickness": "2px",
-    "focusBorderRadius": "0.25rem"
+    "focusBorderThickness": "2px"
   },
   "dateInput": {
     "pickerBackgroundColor": "#ffffff",

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

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

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

@@ -11,7 +11,6 @@ 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";
 
@@ -28,13 +27,6 @@ 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>,{" "}
@@ -114,26 +106,6 @@ 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>
@@ -327,7 +299,7 @@ const sections = [
             <tbody>
               <tr>
                 <td>
-                  <Code>border-width</Code>
+                  <Code>borderThickness</Code>
                 </td>
                 <td>Chip container</td>
                 <td>
@@ -337,27 +309,27 @@ const sections = [
               </tr>
               <tr>
                 <td>
-                  <Code>border-style</Code>
+                  <Code>borderStyle</Code>
                 </td>
                 <td>Chip container</td>
                 <td>
-                  <Code>border-style-none</Code>
+                  <Code>border-style-solid</Code>
                 </td>
-                <td>none</td>
+                <td>solid</td>
               </tr>
               <tr>
                 <td>
-                  <Code>border-radius</Code>
+                  <Code>borderRadius</Code>
                 </td>
                 <td>Chip container</td>
                 <td>
-                  <Code>border-radius-full</Code>
+                  <Code>-</Code>
                 </td>
-                <td>9999px</td>
+                <td>80px</td>
               </tr>
               <tr>
                 <td>
-                  <Code>border-width</Code>
+                  <Code>focusBorderThickness</Code>
                 </td>
                 <td>Focus border</td>
                 <td>
@@ -367,24 +339,14 @@ const sections = [
               </tr>
               <tr>
                 <td>
-                  <Code>border-style</Code>
+                  <Code>focusBorderStyle</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>
         ),
@@ -410,7 +372,7 @@ const sections = [
                 <td>
                   <Code>size-icon-large</Code>
                 </td>
-                <td>24x24px</td>
+                <td>24px</td>
               </tr>
             </tbody>
           </DxcTable>

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

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