Add Xx-Small variant to Spinner

Author: garygong

components/component-docs.json

@@ -15225,6 +15225,10 @@
                 "type": {
                     "name": "enum",
                     "value": [
+                        {
+                            "value": "'xx-small'",
+                            "computed": false
+                        },
                         {
                             "value": "'x-small'",
                             "computed": false

components/spinner/__docs__/storybook-stories.jsx

@@ -24,6 +24,24 @@ storiesOf(SPINNER, module)
 			<IconSettings iconPath="/assets/icons">{getStory()}</IconSettings>
 		</div>
 	))
+	.add('Xx-Small', () =>
+		getSpinner({
+			size: 'xx-small',
+			variant: 'base',
+			assistiveText: {
+				label: 'Main Frame Loading...',
+			},
+		})
+	)
+	.add('X-Small', () =>
+		getSpinner({
+			size: 'x-small',
+			variant: 'base',
+			assistiveText: {
+				label: 'Main Frame Loading...',
+			},
+		})
+	)
 	.add('Small', () =>
 		getSpinner({
 			size: 'small',
@@ -45,6 +63,18 @@ storiesOf(SPINNER, module)
 			variant: 'base',
 		})
 	)
+	.add('Brand Xx-Small', () =>
+		getSpinner({
+			size: 'xx-small',
+			variant: 'brand',
+		})
+	)
+	.add('Brand X-Small', () =>
+		getSpinner({
+			size: 'x-small',
+			variant: 'brand',
+		})
+	)
 	.add('Brand Small', () =>
 		getSpinner({
 			size: 'small',
@@ -71,6 +101,24 @@ storiesOf(SPINNER, module)
 			isDelayed: true,
 		})
 	)
+	.add(
+		'Inverse Xx-Small',
+		() =>
+			getSpinner({
+				size: 'xx-small',
+				variant: 'inverse',
+			}),
+		{ decorators: [inverseContainer] }
+	)
+	.add(
+		'Inverse X-Small',
+		() =>
+			getSpinner({
+				size: 'x-small',
+				variant: 'inverse',
+			}),
+		{ decorators: [inverseContainer] }
+	)
 	.add(
 		'Inverse Small',
 		() =>

components/spinner/index.jsx

@@ -51,7 +51,7 @@ const propTypes = {
 	/**
 	 * Determines the size of the spinner
 	 */
-	size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
+	size: PropTypes.oneOf(['xx-small', 'x-small', 'small', 'medium', 'large']),
 	/**
 	 * Determines the color of the spinner: `base` is gray, `brand` is blue, and `inverse` is white.
 	 */