Skip to content

Commit 5bb9a98

Browse files
laraharrowmdodgelooker
laraharrow
and
mdodgelooker
authored
Initial InlineInputText (#536)
* create basic structure of InlineInputText component plus documentation and test * updates after first review * basic layout complete * InlineInputText complete minus word-wrap * InlineInputText done * ready for review * Allow InlineInputText to inherit text styles from parent * Update inline-input-text.mdx to show inherited styles * div can't be child of p * update to accept extarnal value * updated after review * updated after review * Update snapshot Co-authored-by: mdodgelooker <[email protected]>
1 parent 8dc1ecc commit 5bb9a98

File tree

11 files changed

+295
-1
lines changed

11 files changed

+295
-1
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
99

1010
### Added
1111

12+
- new component `InlineInputText` plus documentations and test
13+
1214
- `Select` now supports grouped options with a `title` and option `description`, as well as `BoxProps` for layout styling.
1315
- New components: `InputDate`, `Calendar`
1416

‎packages/components/src/InlineInputText/InlineInputText.test.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/*
2+
MIT License
3+
Copyright (c) 2019 Looker Data Sciences, Inc.
4+
Permission is hereby granted, free of charge, to any person obtaining a copy
5+
of this software and associated documentation files (the "Software"), to deal
6+
in the Software without restriction, including without limitation the rights
7+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
copies of the Software, and to permit persons to whom the Software is
9+
furnished to do so, subject to the following conditions:
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
13+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
14+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
15+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
16+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
17+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
18+
SOFTWARE.
19+
*/
20+
21+
import { assertSnapshot } from '@looker/components-test-utils'
22+
import React from 'react'
23+
import { InlineInputText } from './InlineInputText'
24+
25+
test('InlineInputText renders an input with the correct styling', () => {
26+
assertSnapshot(<InlineInputText title="type something" />)
27+
})

‎packages/components/src/InlineInputText/InlineInputText.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/*
2+
MIT License
3+
Copyright (c) 2019 Looker Data Sciences, Inc.
4+
Permission is hereby granted, free of charge, to any person obtaining a copy
5+
of this software and associated documentation files (the "Software"), to deal
6+
in the Software without restriction, including without limitation the rights
7+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
copies of the Software, and to permit persons to whom the Software is
9+
furnished to do so, subject to the following conditions:
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
13+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
14+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
15+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
16+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
17+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
18+
SOFTWARE.
19+
*/
20+
21+
import pick from 'lodash/omit'
22+
import React, { forwardRef, Ref } from 'react'
23+
import isFunction from 'lodash/isFunction'
24+
import styled from 'styled-components'
25+
import { typography, TypographyProps } from '@looker/design-tokens'
26+
import { inputPropKeys, InputProps } from '../Form/Inputs/InputProps'
27+
28+
interface InlineInputTextProps
29+
extends TypographyProps,
30+
Omit<InputProps, 'type'> {
31+
underlineOnlyOnHover?: boolean
32+
value?: string
33+
}
34+
35+
export const InlineInputTextInternal = forwardRef(
36+
(
37+
{
38+
className,
39+
onChange,
40+
underlineOnlyOnHover,
41+
value,
42+
...props
43+
}: InlineInputTextProps,
44+
ref: Ref<HTMLInputElement>
45+
) => {
46+
const [valueChange, setValueChange] = React.useState(value || '')
47+
48+
const displayValue = isFunction(onChange) ? value : valueChange
49+
50+
const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
51+
setValueChange(event.currentTarget.value)
52+
}
53+
54+
const handleChange = isFunction(onChange) ? onChange : handleValueChange
55+
56+
return (
57+
<span className={className}>
58+
<Input
59+
onChange={handleChange}
60+
underlineOnlyOnHover={underlineOnlyOnHover}
61+
value={displayValue}
62+
ref={ref}
63+
size={1}
64+
{...pick(props, inputPropKeys)}
65+
/>
66+
<HiddenText>{displayValue}</HiddenText>
67+
</span>
68+
)
69+
}
70+
)
71+
72+
InlineInputTextInternal.displayName = 'InlineInputTextInternal'
73+
74+
const Input = styled.input.attrs({ type: 'text' })<InlineInputTextProps>`
75+
background: transparent;
76+
border: none;
77+
border-bottom: 1px dashed;
78+
border-bottom-color: ${props =>
79+
props.underlineOnlyOnHover
80+
? 'transparent'
81+
: props.theme.colors.palette.charcoal300};
82+
padding: 0;
83+
font: inherit;
84+
color: inherit;
85+
text-transform: inherit;
86+
width: 100%;
87+
88+
:focus,
89+
:hover {
90+
outline: none;
91+
border-bottom-color: ${props => props.theme.colors.palette.purple400};
92+
background-color: ${props => props.theme.colors.palette.charcoal100};
93+
}
94+
95+
:focus {
96+
border-bottom-style: solid;
97+
}
98+
`
99+
100+
const HiddenText = styled.span`
101+
height: 0;
102+
overflow: hidden;
103+
white-space: pre-wrap;
104+
padding: 0 1px;
105+
`
106+
107+
export const InlineInputText = styled(InlineInputTextInternal)`
108+
${typography}
109+
110+
display: inline-flex;
111+
flex-direction: column;
112+
justify-content: center;
113+
`

‎packages/components/src/InlineInputText/__snapshots__/InlineInputText.test.tsx.snap‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`InlineInputText renders an input with the correct styling 1`] = `
4+
.c1 {
5+
background: transparent;
6+
border: none;
7+
border-bottom: 1px dashed;
8+
border-bottom-color: #C1C6CC;
9+
padding: 0;
10+
font: inherit;
11+
color: inherit;
12+
text-transform: inherit;
13+
width: 100%;
14+
}
15+
16+
.c1:focus,
17+
.c1:hover {
18+
outline: none;
19+
border-bottom-color: #6C43E0;
20+
background-color: #F5F6F7;
21+
}
22+
23+
.c1:focus {
24+
border-bottom-style: solid;
25+
}
26+
27+
.c2 {
28+
height: 0;
29+
overflow: hidden;
30+
white-space: pre-wrap;
31+
padding: 0 1px;
32+
}
33+
34+
.c0 {
35+
display: -webkit-inline-box;
36+
display: -webkit-inline-flex;
37+
display: -ms-inline-flexbox;
38+
display: inline-flex;
39+
-webkit-flex-direction: column;
40+
-ms-flex-direction: column;
41+
flex-direction: column;
42+
-webkit-box-pack: center;
43+
-webkit-justify-content: center;
44+
-ms-flex-pack: center;
45+
justify-content: center;
46+
}
47+
48+
<span
49+
className="c0"
50+
>
51+
<input
52+
className="c1"
53+
onChange={[Function]}
54+
size={1}
55+
title="type something"
56+
type="text"
57+
value=""
58+
/>
59+
<span
60+
className="c2"
61+
>
62+
63+
</span>
64+
</span>
65+
`;

‎packages/components/src/InlineInputText/index.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
MIT License
3+
Copyright (c) 2019 Looker Data Sciences, Inc.
4+
Permission is hereby granted, free of charge, to any person obtaining a copy
5+
of this software and associated documentation files (the "Software"), to deal
6+
in the Software without restriction, including without limitation the rights
7+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
copies of the Software, and to permit persons to whom the Software is
9+
furnished to do so, subject to the following conditions:
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
13+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
14+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
15+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
16+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
17+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
18+
SOFTWARE.
19+
*/
20+
export * from './InlineInputText'

‎packages/components/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export * from './Divider'
3636
export * from './Form'
3737
export * from './GlobalStyle'
3838
export * from './Icon'
39+
export * from './InlineInputText'
3940
export * from './Layout'
4041
export * from './Link'
4142
export * from './List'

‎packages/playground/src/InlineInputText/InlineInputTextDemo.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*
2+
MIT License
3+
Copyright (c) 2019 Looker Data Sciences, Inc.
4+
Permission is hereby granted, free of charge, to any person obtaining a copy
5+
of this software and associated documentation files (the "Software"), to deal
6+
in the Software without restriction, including without limitation the rights
7+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
copies of the Software, and to permit persons to whom the Software is
9+
furnished to do so, subject to the following conditions:
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
13+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
14+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
15+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
16+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
17+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
18+
SOFTWARE.
19+
*/

‎packages/playground/src/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import ReactDOM from 'react-dom'
2323
import { GlobalStyle } from '@looker/components'
2424
import { theme } from '@looker/design-tokens'
2525
import { ThemeProvider } from 'styled-components'
26-
2726
import { SelectDemo } from './Select/SelectDemo'
2827

2928
const App: React.FC = () => {

‎packages/www/src/MDX/Pre/allComponents.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ import {
6767
Heading,
6868
Icon,
6969
IconButton,
70+
InlineInputText,
7071
InputChips,
7172
InputDate,
7273
InputHidden,
@@ -176,6 +177,7 @@ export const allComponents = {
176177
Heading,
177178
Icon,
178179
IconButton,
180+
InlineInputText,
179181
InputChips,
180182
InputDate,
181183
InputHidden,

‎packages/www/src/documentation/components/content/inline-input-text.mdx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
title: InlineInputText
3+
propsOf: InlineInputText
4+
---
5+
6+
## InlineInputText
7+
8+
Input styled to have underline follow the input.
9+
10+
```jsx
11+
<Flex alignItems="center" justifyContent="space-around">
12+
<Heading>
13+
<InlineInputText value="Type here..." />
14+
</Heading>
15+
<Paragraph variant="subdued">
16+
<InlineInputText value="Type here..." />
17+
</Paragraph>
18+
</Flex>
19+
```
20+
21+
Using the prop `simple` the input won't be as visible until hover or focus
22+
23+
```jsx
24+
<InlineInputText simple value="Type here..." />
25+
```
26+
27+
Using external value.
28+
29+
```jsx
30+
;() => {
31+
const [value, setValue] = React.useState('Type here...')
32+
const onChange = e => {
33+
setValue(e.currentTarget.value)
34+
}
35+
const onClick = e => {
36+
setValue('You clicked the button')
37+
}
38+
return (
39+
<Flex alignItems="center" justifyContent="space-around">
40+
<InlineInputText value={value} onChange={onChange} />
41+
<Button onClick={onClick}>Click Me</Button>
42+
</Flex>
43+
)
44+
}
45+
```

0 commit comments

Comments
 (0)