Polish v6 (codesandbox#3509)

siddharthkp · web-flow · commit b2110ab09dea · 2020-02-13T14:38:15.000+01:00
* default type of button should be button

* change color of theme without opacity

* add live color to avatar

* collapsible: hide children if not open

* make collapsible accessible
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Live/LiveNow.tsx
@@ -217,7 +217,10 @@ const User = ({ user, liveRole }) => {
       }}
     >
       <Stack gap={2} align="center">
-        <Avatar user={user} />
+        <Avatar
+          user={user}
+          css={{ img: { borderColor: `rgb(${user.color.join(',')})` } }}
+        />
         <span>
           <Text size={2} block>
             {user.username}
diff --git a/packages/common/src/themes/codesandbox.json b/packages/common/src/themes/codesandbox.json
@@ -18,7 +18,7 @@
     "editorHoverWidget.background": "#1C2022",
     "input.background": "#111518",
     "input.foreground": "#C0C0C0",
-    "list.hoverBackground": "#37414050",
+    "list.hoverBackground": "#222a2b",
     "list.focusBackground": "#24282A",
     "menu.selectionBackground": "#24282A",
     "scrollbarSlider.activeBackground": "#374140",
diff --git a/packages/components/src/components/Avatar/index.tsx b/packages/components/src/components/Avatar/index.tsx
@@ -43,9 +43,9 @@ export const Pro = styled(Text).attrs({ size: 1, weight: 'bold' })(
   })
 );
 
-export const Avatar = ({ user }: IAvatarProps) =>
+export const Avatar = ({ user, ...props }: IAvatarProps) =>
   user && (
-    <Element as="span" style={{ position: 'relative' }}>
+    <Element as="span" style={{ position: 'relative' }} {...props}>
       <AvatarImage src={user.avatarUrl} alt={user.username} />
       {user.subscriptionSince ? <Pro>Pro</Pro> : null}
     </Element>
diff --git a/packages/components/src/components/Button/index.tsx b/packages/components/src/components/Button/index.tsx
@@ -75,7 +75,7 @@ export const Button = styled(Element).attrs({ as: 'button' })<{
   variant?: 'primary' | 'secondary' | 'link' | 'danger';
   disabled?: boolean;
   onClick?: any;
-}>(({ type = 'button', variant = 'primary', ...props }) =>
+}>(({ variant = 'primary', ...props }) =>
   css(
     deepmerge(
       // @ts-ignore deepmerge allows functions as values
@@ -115,3 +115,7 @@ export const Button = styled(Element).attrs({ as: 'button' })<{
     )
   )
 );
+
+Button.defaultProps = {
+  type: 'button',
+};
diff --git a/packages/components/src/components/Collapsible/index.tsx b/packages/components/src/components/Collapsible/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
+import VisuallyHidden from '@reach/visually-hidden';
 import { Element } from '../Element';
 import { Text } from '../Text';
 import { SidebarRow } from '../SidebarRow';
@@ -22,6 +23,9 @@ export const Header = styled(SidebarRow).attrs({ gap: 2 })(
     ':hover': {
       backgroundColor: 'sideBar.hoverBackground',
     },
+    ':focus-within': {
+      backgroundColor: 'sideBar.hoverBackground',
+    },
   })
 );
 
@@ -87,9 +91,12 @@ export const Collapsible: React.FC<ICollapsibleProps> = ({
       <Header onClick={toggle}>
         <ToggleIcon open={open} />
         <Text weight="medium">{title}</Text>
+        <VisuallyHidden>
+          <input type="checkbox" checked={open} />
+        </VisuallyHidden>
       </Header>
 
-      <Body open={open}>{children}</Body>
+      <Body open={open}>{open ? children : null}</Body>
     </Section>
   );
 };
