Feedback for system and header (#3547)

* button height should match input height

* add select variant link

* add sandbox as deps for app

* add drop background

* apply button styles only to first child

Author: siddharthkp

packages/app/package.json

@@ -75,6 +75,7 @@
     "@babel/preset-env": "^7.5.5",
     "@codesandbox/executors": "^0.1.0",
     "@codesandbox/template-icons": "^1.1.0",
+    "@codesandbox/components": "0.0.1",
     "@emmetio/codemirror-plugin": "^0.3.5",
     "@sentry/webpack-plugin": "^1.8.0",
     "@styled-system/css": "^5.0.23",

packages/app/src/app/pages/Sandbox/Editor/Header/Actions.tsx

@@ -48,7 +48,7 @@ export const Actions = () => {
   else primaryAction = owned ? 'Embed' : 'Fork';
 
   return (
-    <Stack align="center" gap={1} css={{ button: { width: 'auto' } }}>
+    <Stack align="center" gap={1} css={{ '> button': { width: 'auto' } }}>
       {updateStatus === 'available' && (
         <TooltipButton
           tooltip="Update Available! Click to Refresh."

packages/common/src/themes/codesandbox-black.js

@@ -63,7 +63,7 @@ const colors = {
   editorGroup: {
     background: tokens.grays[700],
     border: tokens.grays[600],
-    dropBackground: tokens.grays[700],
+    dropBackground: tokens.blues[500] + '1a',
   },
   editorGroupHeader: {
     noTabsBackground: null,

packages/components/src/components/Button/index.tsx

@@ -94,7 +94,7 @@ export const Button = styled(Element).attrs({ as: 'button' })<{
         fontFamily: 'Inter, sans-serif',
         paddingY: 0,
         paddingX: 2,
-        height: 6,
+        height: '26px', // match with inputs
         width: '100%',
         fontSize: 2,
         fontWeight: 'medium',

packages/components/src/components/Select/index.stories.tsx

@@ -44,3 +44,37 @@ export const onChange = () => (
     </Select>
   </Element>
 );
+
+export const Variants = () => (
+  <Element style={{ width: 250 }}>
+    <Select onChange={action('select')} placeholder="Please select an option">
+      <option>One</option>
+      <option>Two</option>
+    </Select>
+    <Select
+      variant="link"
+      onChange={action('select')}
+      placeholder="Please select an option"
+    >
+      <option>One</option>
+      <option>Two</option>
+    </Select>
+    <Select
+      icon={Icon}
+      onChange={action('select')}
+      placeholder="Please select an option"
+    >
+      <option>One</option>
+      <option>Two</option>
+    </Select>
+    <Select
+      icon={Icon}
+      variant="link"
+      onChange={action('select')}
+      placeholder="Please select an option"
+    >
+      <option>One</option>
+      <option>Two</option>
+    </Select>
+  </Element>
+);

packages/components/src/components/Select/index.tsx

@@ -1,40 +1,78 @@
 import React from 'react';
+import deepmerge from 'deepmerge';
 import styled from 'styled-components';
 import css from '@styled-system/css';
 import { Input } from '../Input';
 import { Element } from '../Element';
 
-// caret icon
-const svg = color =>
-  `"data:image/svg+xml,%3Csvg width='8' height='24' viewBox='0 0 8 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00006 17L1 13L7 13L4.00006 17Z' fill='%23${
-    (color || '').split('#')[1]
-  }'/%3E%3Cpath d='M3.99994 7L7 11H1L3.99994 7Z' fill='%23${
-    (color || '').split('#')[1]
-  }'/%3E%3C/svg%3E%0A"`;
+const variantStyles = {
+  default: {
+    // inherits from input
+  },
+  link: {
+    border: 'none',
+    backgroundColor: 'transparent',
+  },
+};
 
-const SelectComponent = styled(Input).attrs({ as: 'select' })(
-  css({
-    appearance: 'none',
-    color: 'input.placeholderForeground',
-    transition: 'all ease',
-    transitionDuration: theme => theme.speeds[2],
+const variantCarets = {
+  default: fill => `
+    <svg width="8" height="24" viewBox="0 0 8 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4 7L7 11H1L4 7Z" fill="${fill}" />
+      <path d="M4 17L1 13L7 13L4 17Z" fill="${fill}" />
+    </svg>
+  `,
+  link: fill => `
+    <svg width="8" height="24" viewBox="0 0 8 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4 15L1 11L7 11L4 15Z" fill="${fill}" />
+    </svg>
+  `,
+};
+// <path d="M4 14L1 10H7L4 14Z" fill="${fill}" />
 
-    paddingRight: 5, // select has a caret icon on the right
+const getSVG = (variant, color) => {
+  const fill = '#' + (color || '').split('#')[1];
 
-    backgroundImage: theme =>
-      theme && `url(${svg(theme.colors.input.placeholderForeground)})`,
-    backgroundPosition: 'calc(100% - 8px) center',
-    backgroundRepeat: 'no-repeat',
+  // caret icon
+  const svgString = variantCarets[variant](fill);
+
+  const header = 'data:image/svg+xml,';
+  const encoded = encodeURIComponent(svgString)
+    .replace(/'/g, '%27')
+    .replace(/"/g, '%22');
+  return header + encoded;
+};
+
+const SelectComponent = styled(Input).attrs({ as: 'select' })<{
+  variant?: string;
+}>(({ variant = 'default' }) =>
+  css(
+    deepmerge(variantStyles[variant], {
+      appearance: 'none',
+      color: 'input.placeholderForeground',
+      transition: 'all ease',
+      transitionDuration: theme => theme.speeds[2],
+
+      paddingRight: 5, // select has a caret icon on the right
 
-    ':hover, :focus': {
-      color: 'input.foreground',
       backgroundImage: theme =>
-        theme && `url(${svg(theme.colors.input.foreground)})`,
-    },
-  })
+        theme &&
+        `url(${getSVG(variant, theme.colors.input.placeholderForeground)})`,
+      backgroundPosition: 'calc(100% - 8px) center',
+      backgroundRepeat: 'no-repeat',
+
+      ':hover, :focus': {
+        color: 'input.foreground',
+        backgroundImage: theme =>
+          theme && `url(${getSVG(variant, theme.colors.input.foreground)})`,
+      },
+    })
+  )
 );
 
-const SelectWithIcon = styled(Element)(
+const SelectWithIcon = styled(Element)<{
+  variant?: string;
+}>(({ variant = 'default' }) =>
   css({
     position: 'relative',
     color: 'input.placeholderForeground',
@@ -57,7 +95,8 @@ const SelectWithIcon = styled(Element)(
       color: 'input.foreground',
       select: {
         color: 'input.foreground',
-        backgroundImage: theme => `url(${svg(theme.colors.input.foreground)})`,
+        backgroundImage: theme =>
+          `url(${getSVG(variant, theme.colors.input.foreground)})`,
       },
     },
   })
@@ -71,25 +110,31 @@ interface ISelectProps {
   onChange?: any;
   value?: string | number;
   defaultValue?: string | number;
+  variant?: string;
 }
 
 export const Select = ({
   icon = null,
   placeholder = null,
   ...props
 }: ISelectProps) => {
-  const PrefixIcon = icon || React.Fragment;
-  const SelectContainer = icon ? SelectWithIcon : React.Fragment;
+  const PrefixIcon = icon;
 
-  return (
-    <>
-      <SelectContainer>
+  if (icon)
+    return (
+      <SelectWithIcon variant={props.variant}>
         <PrefixIcon />
         <SelectComponent {...props}>
           {placeholder ? <option value="">{placeholder}</option> : null}
           {props.children}
         </SelectComponent>
-      </SelectContainer>
-    </>
+      </SelectWithIcon>
+    );
+
+  return (
+    <SelectComponent {...props}>
+      {placeholder ? <option value="">{placeholder}</option> : null}
+      {props.children}
+    </SelectComponent>
   );
 };