Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Removed attributes we don't need to explicitly define. #297

Merged
merged 4 commits into from
Feb 22, 2021
Merged

Removed attributes we don't need to explicitly define. #297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
999c926
Removed properties we should be allowed to be passed in.
wendigolabs Jan 25, 2021
585cda7
Added mention of passable onChange property.
wendigolabs Feb 15, 2021
322ffe4
Re-added onChange attribute.
wendigolabs Feb 15, 2021
3593be5
Added more Input examples, culled Overview properties to only the one…
wendigolabs Feb 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/components/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export interface InputProps
const Input: React.FC<InputProps> = ({
className = '',
onChange = () => {},
readOnly = false,
fauxDisabled = false,
forwardedRef: ref,
...passedProps
Expand All @@ -24,7 +23,6 @@ const Input: React.FC<InputProps> = ({
className={classNames(styles.Input, className, {
[styles.disabled]: fauxDisabled,
})}
readOnly={readOnly}
ref={ref || undefined}
onChange={onChange}
{...passedProps}
Expand Down
4 changes: 4 additions & 0 deletions src/components/Input/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@

The basic `<Input />` doesn't add any behavior to the HTML element, it just adds styles.

The _onChange_ prop can be explictily transmitted to the component, otherwise all other props are transparently
forwarded onto the
underlying `<input />`.

It also provides 1 custom prop

- _fauxDisabled_: Applies the same style as disabled, but, unlike the real thing, doesn't stop click events. Useful for adding tooltips or other helpful behavior when a user tries to interact with a disabled field.
53 changes: 41 additions & 12 deletions src/components/Input/story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,16 @@ storiesOf('Planets/Input', module)
'Overview',
() => (
<Wrap>
<label className="text-xl inline-block mb-2">{`<Input />`}</label>
<Input
disabled={boolean('disabled (HTML)', false)}
fauxDisabled={boolean('fauxDisabled', false)}
onChange={action('onChange (HTML)')}
className={text('className (HTML)', 'w-full')}
placeholder={text('placeholder(HTML)', 'Placeholder')}
value={text('value (HTML)', '')}
pattern={text('pattern (HTML)', '.*')}
type={text('type (HTML)', '')}
/>
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<label className="text-xl inline-block mb-2">
{`<Input />`}
<Input
id="SampleInput"
className={text('className (HTML)', 'w-full')}
onChange={action('onChange (HTML)')}
fauxDisabled={boolean('fauxDisabled', false)}
/>
</label>
</Wrap>
),
{
Expand All @@ -56,7 +55,7 @@ storiesOf('Planets/Input', module)
'Examples',
() => (
<Wrap>
<h2 className="text-2xl leading-snug">Basic Input Examples</h2>
<h2 className="text-2xl leading-snug">Input Examples</h2>
<div className="w-full md:w-1/3 mt-6">
<InteractiveInput className="w-full" placeholder="Type here" />
</div>
Expand All @@ -76,6 +75,36 @@ storiesOf('Planets/Input', module)
<div className="w-full md:w-1/3 mt-6">
<Input className="w-full" fauxDisabled value="fauxDisabled" />
</div>
<div className="w-full md:w-1/3 mt-6">
<Input className="w-full" type="date" value="1967-03-01" />
</div>
<div className="w-full md:w-1/3 mt-6">
<Input className="w-full" type="month" value="1967-03" />
</div>
<div className="w-full md:w-1/3 mt-6">
<Input className="w-full" type="week" value="1967-W09" />
</div>
<div className="w-full md:w-1/3 mt-6">
<Input className="w-full" type="time" value="10:31" />
</div>
<div className="w-full md:w-1/3 mt-6">
<Input className="w-full" type="email" value="foo@bar.com" />
</div>
<div className="w-full md:w-1/3 mt-6">
<Input className="w-full" type="tel" value="512-867-5309" />
</div>
<div className="w-full md:w-1/3 mt-6">
<Input
className="w-full"
type="range"
max="100"
value="70"
step="10"
/>
</div>
<div className="w-full md:w-1/3 mt-6">
<Input className="w-full" type="color" value="#00CED1" />
</div>
</Wrap>
),
{
Expand Down