Skip to content

Commit

Permalink
feat(input): add labelless input
Browse files Browse the repository at this point in the history
  • Loading branch information
@apust
apust committed Dec 29, 2020
1 parent 85867a3 commit 3a7ec3b
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 0 deletions.
19 changes: 19 additions & 0 deletions src/packages/core/src/input/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,25 @@
align-items: flex-start;
}

._e_input_labelless {
& ._e_input__label {
display: none;
}

& ._e_input__control {
padding: var(--S16) var(--S12) var(--S12);

&::placeholder {
font: var(--Body1);
color: var(--N600);
}
}

& ._e_input__icon {
top: var(--S12);
}
}

._e_input__field {
position: relative;
display: flex;
Expand Down
7 changes: 7 additions & 0 deletions src/packages/core/src/input/input.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
import pretty from 'pretty';

import input from './input.html';
import input_labelless from './input_labelless.html';

<Meta title='Core/Input' />

Expand All @@ -12,3 +13,9 @@ import input from './input.html';
{ () => input }
</Story>
</Preview>

<Preview>
<Story name="labelless" height="480px" parameters={{ docs: { source: { code: pretty(input_labelless) } } }}>
{ () => input_labelless }
</Story>
</Preview>
78 changes: 78 additions & 0 deletions src/packages/core/src/input/input_labelless.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<p>
<div class="_e_input _e_input_labelless _e_input_size_6">
<label class="_e_input__field">
<input class="_e_input__control" placeholder="Placeholder">
<span class="_e_input__label">Label</span>
<span class="_e_input__background"></span>
<span class="_e_input__line"></span>
</label>
<span class="_e_input__hint">Hint</span>
</div>
</p>

<p>
<div class="_e_input _e_input_labelless _e_input_appearance_error _e_input_size_2">
<label class="_e_input__field">
<input class="_e_input__control" placeholder="ID">
<span class="_e_input__label">Label</span>
<span class="_e_input__background"></span>
<span class="_e_input__line"></span>
</label>
<span class="_e_input__hint">Error</span>
</div>
</p>

<p>
<div class="_e_input _e_input_labelless _e_input_appearance_readonly _e_input_size_12">
<label class="_e_input__field">
<input class="_e_input__control" placeholder=" " value="Readonly" readonly>
<span class="_e_input__label">Label</span>
<span class="_e_input__background"></span>
<span class="_e_input__line"></span>
</label>
</div>
</p>

<p>
<div class="_e_input _e_input_labelless _e_input_appearance_disabled _e_input_size_8">
<label class="_e_input__field">
<input class="_e_input__control" placeholder=" " value="Disabled" disabled>
<span class="_e_input__label">Label</span>
<span class="_e_input__background"></span>
<span class="_e_input__line"></span>
</label>
</div>
</p>

<p>
<div class="_e_input _e_input_labelless _e_input_size_6">
<label class="_e_input__field">
<input class="_e_input__control" placeholder="Phone" value="+44 20 7930 4832">
<span class="_e_input__label">Phone</span>
<span class="_e_input__background"></span>
<span class="_e_input__line"></span>
<div class="_e_input__icon">
<svg style="margin-right: var(--S8)" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="white"/>
<path d="M2.48081 4.69409C1.5382 5.92048 0.827434 7.334 0.413574 8.86958H6.65629L2.48081 4.69409Z" fill="#0052B4"/>
<path d="M23.5869 8.86954C23.173 7.334 22.4622 5.92048 21.5196 4.69409L17.3442 8.86954H23.5869Z" fill="#0052B4"/>
<path d="M0.413574 15.1304C0.82748 16.6659 1.53825 18.0794 2.48081 19.3058L6.65615 15.1304H0.413574Z" fill="#0052B4"/>
<path d="M19.3058 2.48061C18.0794 1.538 16.6659 0.827236 15.1304 0.41333V6.656L19.3058 2.48061Z" fill="#0052B4"/>
<path d="M4.69434 21.5193C5.92073 22.4619 7.33424 23.1727 8.86977 23.5866V17.344L4.69434 21.5193Z" fill="#0052B4"/>
<path d="M8.86973 0.41333C7.33419 0.827236 5.92068 1.538 4.69434 2.48056L8.86973 6.65595V0.41333Z" fill="#0052B4"/>
<path d="M15.1304 23.5866C16.6659 23.1727 18.0794 22.4619 19.3058 21.5194L15.1304 17.344V23.5866Z" fill="#0052B4"/>
<path d="M17.3442 15.1304L21.5196 19.3058C22.4622 18.0795 23.173 16.6659 23.5869 15.1304H17.3442Z" fill="#0052B4"/>
<path d="M23.8984 10.4348H13.5653H13.5653V0.101578C13.0529 0.034875 12.5305 0 12 0C11.4694 0 10.9471 0.034875 10.4348 0.101578V10.4347V10.4347H0.101578C0.034875 10.9471 0 11.4695 0 12C0 12.5306 0.034875 13.0529 0.101578 13.5652H10.4347H10.4347V23.8984C10.9471 23.9651 11.4694 24 12 24C12.5305 24 13.0529 23.9652 13.5652 23.8984V13.5653V13.5653H23.8984C23.9651 13.0529 24 12.5306 24 12C24 11.4695 23.9651 10.9471 23.8984 10.4348Z" fill="#D80027"/>
<path d="M15.1304 15.1304L20.4852 20.4852C20.7315 20.239 20.9664 19.9817 21.1906 19.7148L16.6061 15.1304H15.1304V15.1304Z" fill="#D80027"/>
<path d="M8.8695 15.1306H8.86941L3.51465 20.4854C3.76084 20.7317 4.01823 20.9666 4.28504 21.1908L8.8695 16.6062V15.1306Z" fill="#D80027"/>
<path d="M8.86927 8.86961V8.86951L3.51446 3.51465C3.26818 3.76084 3.03324 4.01823 2.80908 4.28504L7.3936 8.86956H8.86927V8.86961Z" fill="#D80027"/>
<path d="M15.1304 8.86956L20.4852 3.51465C20.239 3.26837 19.9817 3.03344 19.7148 2.80933L15.1304 7.39384V8.86956Z" fill="#D80027"/>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM14.1213 8.46447C14.5118 8.07394 15.145 8.07394 15.5355 8.46447C15.9261 8.85499 15.9261 9.48816 15.5355 9.87868L13.4142 12L15.5355 14.1213C15.9261 14.5118 15.9261 15.145 15.5355 15.5355C15.145 15.9261 14.5118 15.9261 14.1213 15.5355L12 13.4142L9.87868 15.5355C9.48816 15.9261 8.85499 15.9261 8.46447 15.5355C8.07394 15.145 8.07394 14.5118 8.46447 14.1213L10.5858 12L8.46447 9.87868C8.07394 9.48816 8.07394 8.85499 8.46447 8.46447C8.85499 8.07394 9.48816 8.07394 9.87868 8.46447L12 10.5858L14.1213 8.46447Z" fill="#646572"/>
</svg>
</div>
</label>
<span class="_e_input__hint">UK</span>
</div>
</p>

0 comments on commit 3a7ec3b

Please sign in to comment.