Skip to content

Commit a74cb4e

Browse files
SaraVieirasiddharthkp
SaraVieira
authored and
siddharthkp
committed
add input to components package (codesandbox#3280)
* add input * small fixes * only show invisible label if no label
1 parent c73ab82 commit a74cb4e

File tree

7 files changed

+100
-57
lines changed

7 files changed

+100
-57
lines changed

‎packages/common/src/design-language/theme.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const theme = {
88

99
// we use a 4 point grid
1010
space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40],
11+
sizes: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40],
1112

1213
// transition speeds in ms
1314
speeds: [0, '75ms', '100ms', '150ms', '200ms', '300ms', '500ms'],

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const colors = {
134134
background: tokens.grays[500],
135135
foreground: tokens.white,
136136
border: tokens.grays[800],
137-
placeholderForeground: tokens.grays[300],
137+
placeholderForeground: tokens.grays[400],
138138
},
139139
inputOption: {
140140
activeBorder: tokens.blues[300],

‎packages/components/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,18 @@
2727
"dependencies": {
2828
"@codesandbox/common": "^1.0.8",
2929
"@codesandbox/template-icons": "^1.1.0",
30+
"@reach/visually-hidden": "^0.7.0",
3031
"@styled-system/css": "^5.1.4",
32+
"add": "^2.0.6",
3133
"codesandbox-api": "0.0.23",
3234
"color": "3.1.2",
3335
"date-fns": "^2.8.1",
3436
"react": "^16.12.0",
3537
"react-dom": "^16.12.0",
3638
"react-router-dom": "^5.1.2",
3739
"styled-components": "^4.4.1",
38-
"typeface-inter": "^3.11.2"
40+
"typeface-inter": "^3.11.2",
41+
"yarn": "^1.21.1"
3942
},
4043
"devDependencies": {
4144
"@storybook/addon-a11y": "^5.2.8",

‎packages/components/src/components/Example/index.stories.tsx

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎packages/components/src/components/Input/index.stories.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import { Input } from '.';
3+
4+
export default {
5+
title: 'components/Input',
6+
component: Input,
7+
};
8+
9+
// replace the text inside with Text variants when available
10+
export const Basic = () => <Input />;
11+
export const InvisibleLabel = () => <Input invisibleLabel="Fill your name" />;
12+
export const Placeholder = () => <Input placeholder="Your name" />;
13+
export const Label = () => (
14+
<Input label="Your full name" placeholder="John Doe" />
15+
);

‎packages/components/src/components/Input/index.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import css from '@styled-system/css';
4+
import VisuallyHidden from '@reach/visually-hidden';
5+
import { uniqueId } from 'lodash-es';
6+
7+
const placeholderStyles = {
8+
color: 'input.placeholderForeground',
9+
fontSize: 3,
10+
};
11+
12+
export const InputComponent = styled.input(
13+
css({
14+
height: 6,
15+
paddingX: 2,
16+
fontSize: 3,
17+
borderRadius: 'small',
18+
backgroundColor: 'input.background',
19+
borderBottom: '1px solid',
20+
borderColor: 'input.border',
21+
color: 'input.foreground',
22+
'::-webkit-input-placeholder': placeholderStyles,
23+
'::-ms-input-placeholder': placeholderStyles,
24+
'::placeholder': placeholderStyles,
25+
})
26+
);
27+
28+
const Label = styled.label(
29+
css({
30+
fontSize: 2,
31+
paddingBottom: 2,
32+
color: 'sidebar.foreground',
33+
display: 'block',
34+
})
35+
);
36+
37+
interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
38+
label?: string;
39+
}
40+
41+
export const Input: React.FC<IInputProps> = ({
42+
type = 'text',
43+
label,
44+
...props
45+
}) => {
46+
const id = props.id || uniqueId('form_');
47+
48+
return (
49+
<>
50+
{props.placeholder && !label ? (
51+
<VisuallyHidden>
52+
<label htmlFor={id}>{props.placeholder}</label>
53+
</VisuallyHidden>
54+
) : null}
55+
{label ? <Label htmlFor={id}>{label}</Label> : null}
56+
<InputComponent id={id} {...props} />
57+
</>
58+
);
59+
};

‎yarn.lock

Lines changed: 20 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3860,6 +3860,11 @@
38603860
react-lifecycles-compat "^3.0.4"
38613861
warning "^3.0.0"
38623862

3863+
"@reach/visually-hidden@^0.7.0":
3864+
version "0.7.0"
3865+
resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.7.0.tgz#6e5591fa2ca0431d88f230cbdf8584b57f4ea49e"
3866+
integrity sha512-a5iyXugsTO4U3o3NBHog9lrWYtqXKWZG6BhtSMVgjq1yEbdXHB0TOaK4Zu1VrlLq9/0FKpm87hfzFj13AVzn1Q==
3867+
38633868
"@react-hook/hover@^1.0.1":
38643869
version "1.0.1"
38653870
resolved "https://registry.yarnpkg.com/@react-hook/hover/-/hover-1.0.1.tgz#71c7236a703fc36714e76e8d3072ea04f28bf487"
@@ -5345,13 +5350,6 @@
53455350
resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-20.0.1.tgz#35cc15b9c4f30a18ef21852e255fdb02f6d59b89"
53465351
integrity sha512-yALhelO3i0hqZwhjtcr6dYyaLoCHbAMshwtj6cGxTvHZAKXHsYGdff6E8EPw3xLKY0ELUTQ69Q1rQiJENnccMA==
53475352

5348-
"@types/jest-diff@^24.3.0":
5349-
version "24.3.0"
5350-
resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-24.3.0.tgz#29e237a3d954babfe6e23cc59b57ecd8ca8d858d"
5351-
integrity sha512-vx1CRDeDUwQ0Pc7v+hS61O1ETA81kD04IMEC0hS1kPyVtHDdZrokAvpF7MT9VI/fVSzicelUZNCepDvhRV1PeA==
5352-
dependencies:
5353-
jest-diff "*"
5354-
53555353
"@types/jest@24.0.13":
53565354
version "24.0.13"
53575355
resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.0.13.tgz#10f50b64cb05fb02411fbba49e9042a3a11da3f9"
@@ -5734,13 +5732,6 @@
57345732
"@types/node" "*"
57355733
"@types/unist" "*"
57365734

5737-
"@types/vfile-message@^2.0.0":
5738-
version "2.0.0"
5739-
resolved "https://registry.yarnpkg.com/@types/vfile-message/-/vfile-message-2.0.0.tgz#690e46af0fdfc1f9faae00cd049cc888957927d5"
5740-
integrity sha512-GpTIuDpb9u4zIO165fUy9+fXcULdD8HFRNli04GehoMVbeNq7D6OBnqSmg3lxZnC+UvgUhEWKxdKiwYUkGltIw==
5741-
dependencies:
5742-
vfile-message "*"
5743-
57445735
"@types/vfile@^3.0.0":
57455736
version "3.0.2"
57465737
resolved "https://registry.yarnpkg.com/@types/vfile/-/vfile-3.0.2.tgz#19c18cd232df11ce6fa6ad80259bc86c366b09b9"
@@ -6304,6 +6295,11 @@ add-dom-event-listener@1.x:
63046295
dependencies:
63056296
object-assign "4.x"
63066297

6298+
add@^2.0.6:
6299+
version "2.0.6"
6300+
resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
6301+
integrity sha1-JI8Kn25aUo7yKV2+7DBTITCuIjU=
6302+
63076303
address@1.0.2:
63086304
version "1.0.2"
63096305
resolved "https://registry.yarnpkg.com/address/-/address-1.0.2.tgz#480081e82b587ba319459fef512f516fe03d58af"
@@ -18067,16 +18063,6 @@ jest-config@^24.9.0:
1806718063
pretty-format "^24.9.0"
1806818064
realpath-native "^1.1.0"
1806918065

18070-
jest-diff@*, jest-diff@^24.9.0:
18071-
version "24.9.0"
18072-
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
18073-
integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
18074-
dependencies:
18075-
chalk "^2.0.1"
18076-
diff-sequences "^24.9.0"
18077-
jest-get-type "^24.9.0"
18078-
pretty-format "^24.9.0"
18079-
1808018066
jest-diff@^20.0.3:
1808118067
version "20.0.3"
1808218068
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-20.0.3.tgz#81f288fd9e675f0fb23c75f1c2b19445fe586617"
@@ -18106,6 +18092,16 @@ jest-diff@^23.6.0:
1810618092
jest-get-type "^22.1.0"
1810718093
pretty-format "^23.6.0"
1810818094

18095+
jest-diff@^24.9.0:
18096+
version "24.9.0"
18097+
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
18098+
integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
18099+
dependencies:
18100+
chalk "^2.0.1"
18101+
diff-sequences "^24.9.0"
18102+
jest-get-type "^24.9.0"
18103+
pretty-format "^24.9.0"
18104+
1810918105
jest-docblock@24.9.0, jest-docblock@^24.3.0:
1811018106
version "24.9.0"
1811118107
resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
@@ -20332,21 +20328,6 @@ meow@^5.0.0:
2033220328
trim-newlines "^2.0.0"
2033320329
yargs-parser "^10.0.0"
2033420330

20335-
meow@^5.0.0:
20336-
version "5.0.0"
20337-
resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4"
20338-
integrity sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==
20339-
dependencies:
20340-
camelcase-keys "^4.0.0"
20341-
decamelize-keys "^1.0.0"
20342-
loud-rejection "^1.0.0"
20343-
minimist-options "^3.0.1"
20344-
normalize-package-data "^2.3.4"
20345-
read-pkg-up "^3.0.0"
20346-
redent "^2.0.0"
20347-
trim-newlines "^2.0.0"
20348-
yargs-parser "^10.0.0"
20349-
2035020331
merge-anything@^2.2.4:
2035120332
version "2.4.0"
2035220333
resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.0.tgz#86959caf02bb8969d1ae5e1b652862bc5fe54e44"
@@ -30865,14 +30846,6 @@ vfile-location@^2.0.0:
3086530846
resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.5.tgz#c83eb02f8040228a8d2b3f10e485be3e3433e0a2"
3086630847
integrity sha512-Pa1ey0OzYBkLPxPZI3d9E+S4BmvfVwNAAXrrqGbwTVXWaX2p9kM1zZ+n35UtVM06shmWKH4RPRN8KI80qE3wNQ==
3086730848

30868-
vfile-message@*:
30869-
version "2.0.2"
30870-
resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.2.tgz#75ba05090ec758fa8420f2c11ce049bcddd8cf3e"
30871-
integrity sha512-gNV2Y2fDvDOOqq8bEe7cF3DXU6QgV4uA9zMR2P8tix11l1r7zju3zry3wZ8sx+BEfuO6WQ7z2QzfWTvqHQiwsA==
30872-
dependencies:
30873-
"@types/unist" "^2.0.0"
30874-
unist-util-stringify-position "^2.0.0"
30875-
3087630849
vfile-message@^1.0.0:
3087730850
version "1.1.1"
3087830851
resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"

0 commit comments

Comments
 (0)