fix(collapsible-panel): disabled state fix (#777)

Author: montezume

src/components/panels/collapsible-panel/header-icon.js

@@ -4,60 +4,65 @@ import { css } from '@emotion/core';
 import { AngleDownIcon, AngleRightIcon } from '../../icons';
 import vars from '../../../../materials/custom-properties';
 
-const sizeIconContainer = '24px';
-const sizeIconContainerSmall = '16px';
+const sizeIconContainer = '22px';
+const sizeIconContainerSmall = '14px';
 
 const getArrowTheme = ({ tone, isDisabled }) => {
   if (isDisabled) return 'grey';
   if (tone === 'urgent') return 'white';
   return 'black';
 };
 
-const HeaderIcon = props => (
-  <div
-    css={[
-      css`
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: ${props.size === 'small'
-          ? sizeIconContainerSmall
-          : sizeIconContainer};
-        width: ${props.size === 'small'
-          ? sizeIconContainerSmall
-          : sizeIconContainer};
-        border-radius: 50%;
-        flex-shrink: 0;
-        box-shadow: ${vars.shadow7};
-        background-color: ${props.tone === 'urgent'
-          ? vars.colorWarning
-          : vars.colorSurface};
-      `,
-      props.isDisabled &&
+const HeaderIcon = props => {
+  const backgroundColor =
+    props.tone === 'urgent' ? vars.colorWarning : vars.colorSurface;
+  return (
+    <div
+      css={[
         css`
-          box-shadow: none;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: ${props.size === 'small'
+            ? sizeIconContainerSmall
+            : sizeIconContainer};
+          width: ${props.size === 'small'
+            ? sizeIconContainerSmall
+            : sizeIconContainer};
+          border-radius: 50%;
+          flex-shrink: 0;
+          box-shadow: ${vars.shadow7};
+          background-color: ${backgroundColor};
+          border: 1px solid ${backgroundColor};
         `,
-    ]}
-  >
-    {props.isClosed ? (
-      <AngleRightIcon
-        theme={getArrowTheme({
-          tone: props.tone,
-          isDisabled: props.isDisabled,
-        })}
-        size={props.size}
-      />
-    ) : (
-      <AngleDownIcon
-        theme={getArrowTheme({
-          tone: props.tone,
-          isDisabled: props.isDisabled,
-        })}
-        size={props.size}
-      />
-    )}
-  </div>
-);
+        props.isDisabled &&
+          css`
+            box-shadow: none;
+            border: 1px solid ${vars.colorNeutral};
+            background-color: ${vars.colorAccent98};
+          `,
+      ]}
+    >
+      {props.isClosed ? (
+        <AngleRightIcon
+          theme={getArrowTheme({
+            tone: props.tone,
+            isDisabled: props.isDisabled,
+          })}
+          size={props.size}
+        />
+      ) : (
+        <AngleDownIcon
+          theme={getArrowTheme({
+            tone: props.tone,
+            isDisabled: props.isDisabled,
+          })}
+          size={props.size}
+        />
+      )}
+    </div>
+  );
+};
 
 HeaderIcon.displayName = 'HeaderIcon';
 HeaderIcon.propTypes = {