Form component design tweaks (#2057)

* adds color-scheme style so inputs pick up UA color scheme styles

* crops toggle switch knob's shadow inside the toggle switch boundaries

* does not stretch FormControl input child to fill parent width unless 'block' prop is passed, and passes missing TextInputWrapper props in the Select component

* adds changeset

* rm duplicate prop

Author: mperrotti

.changeset/tame-swans-rush.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+- adds [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme) style to inputs so they get the correct user-agent dark/light styles
+- crops ToggleSwitch knob's shadow inside the toggle switch boundaries
+- changes FormControl styles to prevent `<select>`, `<textarea>`, `<input>` from filling the parent's width when the `block` prop has not been passed to the input component

src/BaseStyles.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import styled, {createGlobalStyle} from 'styled-components'
 import {COMMON, SystemCommonProps, SystemTypographyProps, TYPOGRAPHY} from './constants'
+import {useTheme} from './ThemeProvider'
 import {ComponentProps} from './utils/types'
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
   * { box-sizing: border-box; }
   body { margin: 0; }
   table { border-collapse: collapse; }
-  
+  input { color-scheme: ${props => props.colorScheme}; }
+
   [role="button"]:focus:not(:focus-visible):not(.focus-visible),
   [role="tabpanel"][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
   button:focus:not(:focus-visible):not(.focus-visible),
@@ -32,13 +34,14 @@ export type BaseStylesProps = ComponentProps<typeof Base>
 
 function BaseStyles(props: BaseStylesProps) {
   const {children, ...rest} = props
+  const {colorScheme} = useTheme()
 
   // load polyfill for :focus-visible
   require('focus-visible')
 
   return (
     <Base {...rest} data-portal-root>
-      <GlobalStyle />
+      <GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />
       {children}
     </Base>
   )

src/FormControl/FormControl.tsx

@@ -174,6 +174,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
               ref={ref}
               display="flex"
               flexDirection="column"
+              alignItems="flex-start"
               sx={{...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}}
             >
               {slots.Label}

src/Select.tsx

@@ -56,7 +56,7 @@ const ArrowIndicator = styled(ArrowIndicatorSVG)`
 `
 
 const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({children, disabled, placeholder, size, required, validationStatus, ...rest}: SelectProps, ref) => (
+  ({block, children, contrast, disabled, placeholder, size, required, validationStatus, ...rest}: SelectProps, ref) => (
     <TextInputWrapper
       sx={{
         overflow: 'hidden',
@@ -67,9 +67,11 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
           }
         }
       }}
+      block={block}
+      contrast={contrast}
+      disabled={disabled}
       size={size}
       validationStatus={validationStatus}
-      disabled={disabled}
     >
       <StyledSelect
         ref={ref}

src/ToggleSwitch.tsx

@@ -94,6 +94,7 @@ const SwitchButton = styled.button<SwitchButtonProps>`
   width: 64px;
   outline-offset: 2px;
   position: relative;
+  overflow: hidden;
 
   @media (pointer: coarse) {
     &:before {
@@ -115,17 +116,6 @@ const SwitchButton = styled.button<SwitchButtonProps>`
     }
   }
 
-  &:after {
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: calc(${get('radii.2')} - 1px); /* -1px to account for 1px border around the control */
-  }
-
   ${props => {
     if (props.disabled) {
       return css`

src/_TextInputWrapper.tsx

@@ -163,6 +163,7 @@ export const TextInputBaseWrapper = styled.span<StyledBaseWrapperProps>`
     css`
       width: 100%;
       display: flex;
+      align-self: stretch;
     `}
       
   // Ensures inputs don' t zoom on mobile but are body-font size on desktop

src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -144,6 +144,9 @@ exports[`TextInput renders block 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
   background-repeat: no-repeat;
   background-position: right 8px center;
   padding-left: 0;

src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap

@@ -1208,6 +1208,9 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
   padding-left: 12px;
   padding-top: calc(12px / 2);
   padding-bottom: calc(12px / 2);

src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap

@@ -133,21 +133,11 @@ exports[`renders consistently 1`] = `
   width: 64px;
   outline-offset: 2px;
   position: relative;
+  overflow: hidden;
   background-color: #eaeef2;
   border-color: #afb8c1;
 }
 
-.c4:after {
-  content: '';
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: calc(6px - 1px);
-}
-
 .c4:hover .Toggle-knob,
 .c4:focus:focus-visible .Toggle-knob {
   background-color: #f3f4f6;