InputText + theme.reset fix (#1158)

Author: Luke Bowerman

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - `DialogContent` with `borderBottom` prop CSS output error (no border, no flex: 8)
 - `Dialog` focus not returning to trigger when closed
+- `InputText` interacts poorly with `theme.reset` property in narrow cases
 - `Select` not opening when rendered in a `Dialog` opened from a `Popover`
 
 ## [0.9.4] - 2020-06-29

packages/components/src/Form/Inputs/InputText/InputText.tsx

@@ -27,15 +27,18 @@
 import pick from 'lodash/pick'
 import omit from 'lodash/omit'
 import { IconNames } from '@looker/icons'
-import { omitStyledProps, space, SpaceProps } from '@looker/design-tokens'
+import {
+  omitStyledProps,
+  space,
+  SpaceProps,
+  reset,
+  layout,
+} from '@looker/design-tokens'
 import React, { forwardRef, MouseEvent, ReactNode, Ref, useRef } from 'react'
 import styled, { css } from 'styled-components'
 import { InputProps, inputPropKeys, InputTextTypeProps } from '../InputProps'
 import { innerInputStyle } from '../innerInputStyle'
-import {
-  SimpleLayoutProps,
-  simpleLayoutCSS,
-} from '../../../Layout/utils/simple'
+import { SimpleLayoutProps } from '../../../Layout/utils/simple'
 import { Icon } from '../../../Icon'
 import { Text } from '../../../Text'
 import { useForkedRef, useWrapEvent } from '../../../utils'
@@ -268,14 +271,17 @@ export const inputCSS = css`
 `
 
 export const InputText = styled(InputTextLayout)<InputTextProps>`
+  ${reset}
+
   align-items: center;
   cursor: text;
   display: inline-flex;
   justify-content: space-evenly;
   padding: ${({ theme: { space } }) => `${space.xxxsmall} ${space.xxsmall}`};
   width: ${({ autoResize }) => (autoResize ? 'auto' : '100%')};
 
-  ${simpleLayoutCSS}
+  ${layout}
+  ${space}
   ${inputCSS}
 
   ${InlineInputTextBase} {