fix: icon exports and missing icons

Closes DCOS-49026

Author: mperrotti

package.json

@@ -17,12 +17,10 @@
     "build:storybook": "build-storybook",
     "prebuild:storybook": "npm run build:design-tokens && npm run build:svg",
     "prebuild:design-tokens": "npm run clean:design-tokens",
-    "prebuild:svg": "npm run clean:svg",
     "build:design-tokens": "node ./packages/design-tokens/scripts/build.js",
     "build:svg": "node ./packages/icons/scripts/build.js",
     "clean": "rimraf dist",
     "clean:design-tokens": "rm -rf ./dist/packages/design-tokens && rm -rf ./packages/design-tokens/dist/",
-    "clean:svg": "rm -rf ./dist/packages/icons && rm -rf ./packages/icons/dist/",
     "commitlint": "commitlint -e",
     "create:component": "./scripts/create-component",
     "deploy:storybook": "storybook-to-ghpages",

packages/checkboxInput/tests/__snapshots__/CheckboxInput.test.tsx.snap

@@ -439,6 +439,7 @@ exports[`CheckboxInput renders indeterminate 1`] = `
 }
 
 .emotion-1 {
+  vertical-align: middle;
   fill: #FFF;
 }
 

packages/design-tokens/properties/layout/iconSize.json

@@ -1,6 +1,9 @@
 {
 	"layout": {
 		"iconSize": {
+			"xxs": {
+				"value": "12px"
+			},
 			"xs": {
 				"value": "16px"
 			},
@@ -17,7 +20,7 @@
 				"value": "64px"
 			},
 			"xxl": {
-				"value": "96"
+				"value": "96px"
 			}
 		}
 	}

packages/icon/components/Icon.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { cx } from "emotion";
 import { tintSVG } from "../../shared/styles/styleUtils";
 import {
-  textColorPrimary,
+  iconSizeXxs,
   iconSizeXs,
   iconSizeS,
   iconSizeM,
@@ -15,6 +15,7 @@ import { ProductIcons } from "../../icons/dist/product-icons-enum";
 import { icon } from "../style";
 
 type IconSizes =
+  | typeof iconSizeXxs
   | typeof iconSizeXs
   | typeof iconSizeS
   | typeof iconSizeM
@@ -35,7 +36,7 @@ export interface IconProps {
 
 const Icon = (props: IconProps) => {
   const { color, size, shape, ariaLabel } = props;
-  const svgColor = color || textColorPrimary;
+  const svgColor = color || "currentColor";
   const iconSize = size || iconSizeS;
 
   return (

packages/icon/stories/Icon.stories.tsx

@@ -14,6 +14,7 @@ import {
   textColorPrimary,
   textColorSecondary,
   yellow,
+  iconSizeXxs,
   iconSizeXs,
   iconSizeS,
   iconSizeM,
@@ -38,6 +39,7 @@ storiesOf("Icon", module)
       [purple]: "purple"
     };
     const sizes = {
+      [iconSizeXxs]: "iconSizeXxs",
       [iconSizeXs]: "iconSizeXs",
       [iconSizeS]: "iconSizeS",
       [iconSizeM]: "iconSizeM",

packages/icon/style.ts

@@ -1,6 +1,8 @@
 import { css } from "emotion";
 
 export const icon = css`
+  vertical-align: middle;
+
   use {
     pointer-events: none;
   }

packages/icon/tests/__snapshots__/Icon.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Icon renders 1`] = `
 .emotion-0 {
+  vertical-align: middle;
   fill: blue;
 }
 
@@ -26,7 +27,8 @@ exports[`Icon renders 1`] = `
 
 exports[`Icon renders with defaults 1`] = `
 .emotion-0 {
-  fill: #1B2029;
+  vertical-align: middle;
+  fill: currentColor;
 }
 
 .emotion-0 use {