Merge pull request #11300 from storybookjs/args-style-refinements

Controls: Style refinements

lib/components/src/Button/Button.tsx

@@ -114,7 +114,7 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
         }
       : {};
   },
-  ({ theme, tertiary, inForm }) =>
+  ({ theme, tertiary, inForm, small }) =>
     tertiary
       ? {
           background:
@@ -125,6 +125,8 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
           boxShadow: `${theme.input.border} 0 0 0 1px inset`,
           borderRadius: theme.input.borderRadius,
 
+          ...(inForm && small ? { padding: '10px 16px' } : {}),
+
           '&:hover': {
             background:
               theme.base === 'light'

lib/components/src/controls/Boolean.tsx

@@ -24,13 +24,11 @@ const Label = styled.label(({ theme }) => ({
     border: 'none',
     background: 'transparent',
     cursor: 'pointer',
+    borderRadius: '3em',
 
     '&:focus': {
       outline: 'none',
-
+      boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`,
-      '& ~ span': {
-        boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`,
-      },
     },
   },
 
@@ -82,7 +80,7 @@ const parse = (value: string | null) => value === 'true';
 
 export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
 export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange }) => (
-  <Label htmlFor={name}>
+  <Label htmlFor={name} title={value ? 'Change to false' : 'Change to true'}>
     <input
       id={name}
       name={name}

lib/components/src/controls/Date.tsx

@@ -39,19 +39,21 @@ const formatTime = (value: Date | number) => {
 const FlexSpaced = styled.div({
   flex: 1,
   display: 'flex',
-  '&& > *': {
+
+  input: {
     marginLeft: 10,
+    flex: 1,
+    height: 32, // hardcode height bc Chromium bug https://bugs.chromium.org/p/chromium/issues/detail?id=417606
+
+    '&::-webkit-calendar-picker-indicator': {
+      opacity: 0.5,
+      height: 12,
+    },
   },
-  '&& > *:first-of-type': {
+  'input:first-of-type': {
     marginLeft: 0,
   },
 });
-const FlexInput = styled(Form.Input)({
-  flex: 1,
-  '&::-webkit-calendar-picker-indicator': {
-    opacity: 0.5,
-  },
-});
 
 export type DateProps = ControlProps<DateValue> & DateConfig;
 export const DateControl: FC<DateProps> = ({ name, value, onChange }) => {
@@ -92,7 +94,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange }) => {
 
   return (
     <FlexSpaced>
-      <FlexInput
+      <Form.Input
         type="date"
         max="9999-12-31" // I do this because of a rendering bug in chrome
         ref={dateRef as RefObject<HTMLInputElement>}
@@ -100,7 +102,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange }) => {
         name={`${name}date`}
         onChange={onDateChange}
       />
-      <FlexInput
+      <Form.Input
         type="time"
         id={`${name}time`}
         name={`${name}time`}

lib/components/src/form/input/input.tsx

@@ -28,7 +28,7 @@ const styles = ({ theme }: { theme: Theme }): CSSObject => ({
   borderRadius: theme.input.borderRadius,
   fontSize: theme.typography.size.s2 - 1,
   lineHeight: '20px',
-  padding: '.42em 1em', // 32
+  padding: '.46em 1em', // 32
 
   '&:focus': {
     boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,