CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
Input fields let users enter and edit text.
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/input-fields@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
Markup
Here is the default input-field implementation code for HTML. Features implementation code is listed next to each feature element.
<form autocomplete="off" class="if">
<div class="if input-wrapper">
<input
data-size="[smallest|smaller|small|large|larger|largest]"
placeholder="Enter your last name"
[required]
aria-invalid="false"
[invalid]
name="<identifier>"
id="<identifier>"
type="text"
class="if input-field [is-optional][is-complete][icon-string]"
/>
<div class="if input-label-wrapper">
<label class="if" for="<identifier>">Ägs sedan</label>
<span class="if inline-nowrap"
><button type="button" class="if popover-button help" aria-label="Help"></button
></span>
</div>
<span class="if input-help"> Vilket år blev/blir du ägare? </span>
</div>
<div class="if input-wrapper">
<textarea class="if textarea [full]" id="textarea-01"></textarea>
<label class="if" for="textarea-01">Last name</label>
</div>
</form>
With icons
<div class="if input-wrapper">
<input
placeholder="Enter your last name"
name="input-field-with-icons-02"
id="input-field-with-icons-02"
type="text"
class="if input-field icon symbol bulb-on"
/>
<label class="if help" for="input-field-with-icons-02"
>Last name<button
type="button"
class="if popover-button help"
aria-label="Help with Enter your last name"
></button
></label>
</div>
<div class="if input-wrapper">
<input
placeholder="Enter your last name"
name="input-field-with-icons-03"
id="input-field-with-icons-03"
type="text"
class="if input-field icon ui preview trailing"
/>
<label class="if help" for="input-field-with-icons-03"
>Last name<button
type="button"
class="if popover-button help"
aria-label="Help with Enter your last name"
></button
></label>
</div>
Validation error
<div class="if input-wrapper">
<input
data-size="larger"
placeholder="Enter your last name"
name="input-field-with-icons-04"
id="input-field-with-icons-04"
type="text"
class="if input-field is-invalid"
/>
<label class="if" for="input-field-with-icons-04">Last name</label>
<span class="if input-error" aria-live="polite">A validation error</span>
</div>
Help text
<div class="if input-wrapper">
<input
data-size="larger"
placeholder="Enter your last name"
name="input-field-with-help-text-04"
id="input-field-with-help-text-04"
type="text"
class="if input-field"
/>
<label class="if" for="input-field-with-help-text-04">Last name</label>
<span class="if input-help">A help text</span>
</div>
Optional
<div class="if input-wrapper">
<input
placeholder="Enter your last name"
name="input-field-states-04asdsadsad2"
id="input-field-states-04asdsadsad2"
type="text"
class="if input-field is-optional"
/>
<label class="if" for="input-field-states-04asdsadsad2">Last name</label>
</div>
Reset
<div class="if input-wrapper">
<input
class="if input-field"
value="2011"
name="<identifier>"
id="<identifier>"
type="number"
data-size="small"
placeholder="1989"
/>
<button type="button" class="if reset" aria-label="Reset"></button>
<label class="if" for="<identifier>"> Ägs sedan </label>
</div>
Due to the constraints of the markup, and that we are reliable of the state of the input field to display certain control and label features, you will need some javascript to achieve the correct positioning of the reset button.
const calculateCorrectPositionForResetButton = (input) => {
const _reset_el = input.parentElement.querySelector('.if.reset');
if (!_reset_el) return;
const _parent_el_rect = input.parentElement.getBoundingClientRect();
const _input_el_rect = input.getBoundingClientRect();
const _reset_el_rect = _reset_el.getBoundingClientRect();
_reset_el.style.top = `${
_input_el_rect.top - _parent_el_rect.top + _input_el_rect.height / 2 - _reset_el_rect.height / 2
}px`;
if (input.getAttribute('type') == 'number') {
_reset_el.style.left = '1rem';
} else {
_reset_el.style.left = `${_input_el_rect.width - 18}px`;
}
};
const inputs = document.querySelectorAll('input.if');
inputs.forEach((input) => {
window.requestAnimationFrame(function () {
calculateCorrectPositionForResetButton(input);
});
});
Field length
With given attributes (data-size), you can vary the length of the input field. For optimal usability, use a size that corresponds with the type/amount of characters in the text-field. For example, the field for a postal code containing a maximum of 5 characters should use the attribute data-zize="small".
<form autocomplete="off">
<div class="if input-wrapper">
<input
class="if input-field"
data-size="largest"
value="https://www.if.se/privat/vid-skada/saker/dator#5435124f07f54acc89b02e0b50185bcf"
id="url-12"
type="text"
/>
<label class="if" for="url-12">URL</label>
</div>
<div class="if input-wrapper">
<input
class="if input-field"
data-size="larger"
value="Alexander Vassbotn Røyne-Helgesen"
id="default-02"
type="text"
/>
<label class="if" for="default-02">Full name</label>
</div>
<div class="if input-wrapper">
<input
class="if input-field"
data-size="large"
value="25.09.2017"
id="default-0222"
type="date"
/>
<label class="if" for="default-0222">Date</label>
</div>
<div class="if input-wrapper">
<input
class="if input-field"
data-size="medium"
value="john.doe@gmail.com"
id="email-03"
type="text"
/>
<label class="if" for="email-03">Email</label>
</div>
<div class="if input-wrapper">
<input
class="if input-field"
data-size="small"
value="78481545"
id="phonenumber-04"
type="text"
/>
<label class="if" for="phonenumber-04">Phone number</label>
</div>
<div class="if input-wrapper">
<input class="if input-field" data-size="smaller" value="02148" id="zipcode-04" type="text" />
<label class="if" for="zipcode-04">Zip code</label>
</div>
<div class="if input-wrapper">
<input class="if input-field" data-size="smallest" value="B" id="houseletter-05" type="text" />
<label class="if" for="houseletter-05">Houseletter</label>
</div>
</form>
Tokens
Name | Value | Is aliased in |
---|---|---|
ids-input-fields-closed-font-weight | 126 | |
ids-input-fields-focus-border-width | 0.0625rem | |
ids-input-fields-focus-border-color | rgb(0, 84, 240) | |
ids-input-fields-focus-border-style | solid | |
ids-input-fields-hover-outline-width | 0.0625rem | |
ids-input-fields-hover-outline-color | rgb(51, 30, 17) | |
ids-input-fields-hover-outline-style | solid | |
ids-input-fields-error-margin-top | 0.5rem | |
ids-input-fields-error-color | rgb(187, 50, 12) | |
ids-input-fields-error-font-size | 1.125rem | |
ids-input-fields-error-line-height | 1.75rem | |
ids-input-fields-error-font-weight | 82 | |
ids-input-fields-border-radius | 0.375rem | |
ids-input-fields-color | rgba(51,30,17,0.9) | |
ids-input-fields-background-color | rgb(255, 255, 255) | |
ids-input-fields-border | 0.0625rem solid rgb(110, 98, 94) | |
ids-input-fields-font-size | 1.125rem | |
ids-input-fields-height | 3rem | |
ids-input-fields-width-media-query-base | 100% | |
ids-input-fields-width-media-query-md | 296px | |
ids-input-fields-spacing-inset-horizontal | 1rem | |
ids-input-fields-spacing-inset-vertical | 0 | |
ids-input-fields-transition | all 0.1s cubic-bezier(0.4, 0.0, 0.2, 1) | |
ids-input-fields-help-margin-top | 0.5rem | |
ids-input-fields-help-color | rgb(110, 98, 94) | |
ids-input-fields-help-font-size | 1.125rem | |
ids-input-fields-help-line-height | 1.75rem | |
ids-input-fields-help-font-weight | 82 | |
ids-input-fields-wrapper-spacing-stacking-downwards | 2rem | |
ids-input-fields-wrapper-spacing-stacking-upwards | 1rem | |
ids-input-fields-placeholder-color | rgba(110,98,94,0.6) | |
ids-input-fields-reset-background-image | url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Ee remove%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%275%27 fill=%27%23faf9f7%27 stroke=%27%23faf9f7%27%3E%3Cline fill=%27none%27 stroke=%27%23faf9f7%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%275%27 x2=%275%27 y2=%2727%27/%3E%3Cline fill=%27none%27 stroke=%27%23faf9f7%27 stroke-miterlimit=%2710%27 x1=%2727%27 y1=%2727%27 x2=%275%27 y2=%275%27/%3E%3C/g%3E%3C/svg%3E") | |
ids-input-fields-reset-background-color | rgb(110, 98, 94) | |
ids-input-fields-disabled-color | rgba(110,98,94,0.3) | |
ids-input-fields-disabled-background-color | rgba(250,249,247,0.7) | |
ids-input-fields-disabled-border-color | rgba(110,98,94,0.3) | |
ids-input-fields-invalid-border-color | rgb(187, 50, 12) | |
ids-input-fields-invalid-border-width | 0.125rem | |
ids-input-fields-date-background-image | url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Ecalendar%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%23331e11%27 stroke=%27%23331e11%27%3E%3Cline data-color=%27color-2%27 x1=%279%27 y1=%271%27 x2=%279%27 y2=%275%27 fill=%27none%27 stroke-miterlimit=%2710%27/%3E%3Cline data-color=%27color-2%27 x1=%2723%27 y1=%271%27 x2=%2723%27 y2=%275%27 fill=%27none%27 stroke-miterlimit=%2710%27/%3E%3Cline data-cap=%27butt%27 data-color=%27color-2%27 x1=%2731%27 y1=%2711%27 x2=%271%27 y2=%2711%27 fill=%27none%27 stroke-miterlimit=%2710%27 stroke-linecap=%27butt%27/%3E%3Crect x=%271%27 y=%275%27 width=%2730%27 height=%2724%27 fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27/%3E%3C/g%3E%3C/svg%3E") | |
ids-input-fields-date-background-size | 1.5rem 1.5rem | |
ids-input-fields-date-background-position | right 0.75rem center | |
ids-input-fields-date-padding-right | 3rem | |
ids-input-fields-with-icon-leading-background-position | left 0.75rem center | |
ids-input-fields-with-icon-leading-background-size | 1.5rem 1.5rem | |
ids-input-fields-with-icon-leading-padding-left | 3rem | |
ids-input-fields-with-icon-trailing-background-position | right 0.75rem center | |
ids-input-fields-with-icon-trailing-padding-left | 1rem | |
ids-input-fields-with-icon-trailing-padding-right | 3rem |
Accessibility
Always make sure that you have the correct attributes when used with a label:
- id
- name
And the label should have
for
that MUST be equal to the input fieldsid
-attribute
<form autocomplete="off" action="">
<div class="if input-wrapper">
<input type="text" value="Input field" class="if input-field" id="<identifier>" name="<identifier>" />
<label class="if" for="<identifier>">Username</label>
</div>
</form>
Make input field keyboard-friendly
Users should be able to trigger and edit every field using only the keyboard. Power users, who tend to use keyboards heavily, should be able to easily tab through the fields and make necessary edits, all without lifting their fingers off the keyboard. You can find detailed requirements for keyboard interaction pattern in W3C’s Authoring Practices for Design Patterns.
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
16.0.0 (2023-01-10)
⚠ BREAKING CHANGES
- The input field component now has a border-radius - 6px.
"feature 686990"
14.24.2 (2022-05-30)
Code Refactoring
- input-fields: convert html examples to using MDX/React components instead (302e94d) , closes #601044
- input-fields: remove the local generation of design token documentation file (d96ac11)
Documentation Updates
14.22.2 (2022-05-03)
Miscellaneous chores
- package locks: update package locks (813eac7)
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.18.0 (2022-04-08)
Code Refactoring
- 💡 Use border-radius from CSS variable (63084bd) . To prepare for the design update
14.16.0 (2022-04-07)
Bug Fixes
14.13.0 (2022-04-06)
Bug Fixes
- 🐛 Encode data-value in design token documentation (85737c6)
14.9.0 (2022-03-03)
Miscellaneous chores
- 🤖 Bootstrap (6822f5b)
14.8.0 (2022-02-21)
Features
-
🎸 Add CSS variables to input fields (322099e)
reinstall (d425056)
-
lerna bootstrap (4df4863)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
- use correct versions (f1b5deb)
14.3.0 (2022-02-09)
Bug Fixes
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
-
💡 Change focus styles, remove whatinput (75fd31b) , closes #505205
-
Use variables and correct design token (827d2d2)
-
Add deprecation notice in comment for mixin (d703ecf)
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
14.0.4 (2021-11-15)
Bug Fixes
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
⚠ BREAKING CHANGES
- 🧨 The scope for If Design System npm packages has now changed from
@if-design-system
to@ids-core
. We have also renamed the repository fromif-design-system
toids-core
- 🧨 Util is now renamed to Utils
- 🧨 We have now changed the navigation structure for the documentation site. Please update any saved links!
- 🧨 Navigation structure has now changed. Please see release notes!
Bug Fixes
Documentation Updates
-
✏️ Move position of the quick links (5cb0897)
-
✏️ Remove unneeded margins for shortcuts (36c7e8d)
-
✏️ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
💡 Reduce spacing tokens, use correct size tokens (97aa461)
-
💡 Rename scope and repository (3ea5423)
-
💡 Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
reinstall (da80dba)
13.12.2 (2021-10-27)
Bug Fixes
- 🐛 Added :not([type="range"]) to the appropriate selectors (4973dda) . ✅ Closes: 492590
13.12.1 (2021-10-25)
Bug Fixes
- 🐛 Bugfix of input-fields focus (8074f6a) . ✅ Closes: 474580
13.11.0 (2021-10-19)
Features
- 🎸 Input field hot reload (eac76b7)
Bug Fixes
- 🐛 Input field hot reload (dcbef7d) . ✅ Closes: 488768
13.10.5 (2021-10-14)
Bug Fixes
-
🐛 Input import (20774ea) . Import from correct file where other dependecies are available
-
🐛 Slider focus (ab50f15) . ✅ Closes: 485717
-
🐛 Slider styles (0650fde) . ✅ Closes: 485717
13.10.3 (2021-10-07)
Bug Fixes
- 🐛 Slider styles (abbfc23) . Fix slider width | remove input border
✅ Closes: 472886
13.10.2 (2021-10-07)
Bug Fixes
13.9.2 (2021-09-30)
Bug Fixes
-
🐛 Complete the pseudo-element fix (1dcee2c)
-
🐛 Pseudo selectors (48d013a) . ✅ Closes: 478948
-
🐛 Use double colon notation for pseudo selectors (b78629b) . ✅ Closes: 478948
-
double colon (aabc47e)
13.7.0 (2021-09-22)
Documentation Updates
- ✏️ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.2 (2021-09-17)
Bug Fixes
13.6.1 (2021-09-15)
Bug Fixes
13.5.1 (2021-09-07)
Bug Fixes
-
🐛 Reduce specificity on selectors (3affc48)
-
🐛 Update and fix data sizing for form elements (5fbefb4) , closes #374144
-
🐛 Use a more logical approach for data sizes (5cd9ae9) , closes #374144
-
🤖 Rearrange diffs for test, use grey color for unaffected (1834399)
-
🤖 Use node v14 (4009973)
bootstrap (d23e139)
12.14.5 (2021-08-18)
Code Refactoring
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
-
🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621
-
🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
🤖 Reinstall (e660696)
-
🤖 Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
12.1.0 (2021-05-07)
Miscellaneous chores
- 🤖 Documentation cleanup (1deeceb)
12.0.0 (2021-05-05)
⚠ BREAKING CHANGES
- 🧨 All of the mixins have now been renamed
- 🧨 Notification is now renamed to Alert Banner
- 🧨 Textarea is now extracted from Input Fields into a separate component, Textarea
- 🧨 This extracts the Hero variation with no image into a separate, design updated component named Header
- 🧨 The Dropdown Component is now renamed to Dropdown Select. Dropdown is a pattern.
Features
-
🎸 Extract textarea from Input Fields to Textarea comp (c2c1174) , closes #336508
-
🎸 Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component
Bug Fixes
- 🐛 Update references (c08f107)
Documentation Updates
- ✏️ Clearly state that the label for attribute should point (75086a5) . to id, not name
Code Refactoring
-
💡 Adjust markup and documentation (8ee3a6d) , closes #336508
-
💡 Rename Dropdown to Dropdown Select (af1fc9d) , closes #336508
-
💡 Rename Notification to Alert Banner (8b4e48d) , closes #336508
Miscellaneous chores
-
🤖 Add missing deps (8f82b0a)
-
🤖 Convert typography tokens from theo to SD (e48f255)
-
🤖 Convert util tokens from theo to style-dictionary (99fb4f5)
-
🤖 Finalize breakpoint token conversion (f50ea0d)
-
🤖 Make sure all components are named with capital first (08e9a26)
-
🤖 Make sure we have correct deps set, and used (5d2e0fb)
-
🤖 Reinstall (2c763ea)
-
🤖 Update all design token references (c640d15)
-
🤖 Update references to util variables (b79ec36)
-
🤖 Updating links (70f166e)
-
🤖 Use size token for common form height until unique tok (3efceab) . en is created
rebuild (7edb430)
11.0.0 (2021-03-15)
Bug Fixes
- 🐛 Set fonts for input-help and input-error (a5c5294)
10.2.3 (2021-03-11)
Bug Fixes
- 🐛 Fix a bug where the tooltip was not placed correctly (c1e760d)
10.2.1 (2021-03-05)
Documentation Updates
-
✏️ Remove hardcoded asterix for required fields (463d234)
-
🤖 Rename Change Log to Changelog (d412e63)
-
🤖 Remove all references to sketch (35fc554) , closes #339203
-
🤖 Update package fields (200c0af)
10.0.0 (2021-02-15)
⚠ BREAKING CHANGES
- 🧨 form-group is now renamed to input-wrapper, a more logical name
- 🧨 The html structure for input-fields has changed. Please review documentation and changeset to get up to date!
Bug Fixes
-
🐛 Fix sizes of input-fields to align better with grid (3437c6b)
-
🐛 Typo (b3202a6)
-
🐛 Use correct name for optional flag (652b8e9)
-
🐛 Use correct svg string (fc3a9de)
Code Refactoring
-
💡 Refactor out feature components, redo structure (930ff9e) , closes #308914 . Due to accessibility and validation issues, we're changing the html syntax for the input-fields, in regards of labels and usage of the help-tooltip button. We've also added some new design styling to accommodate for v2 of the input fields. We've cleaned up some colors and borders as well. We've also added support for a clear field button. We separated out label, input-wrapper, reset, sizes and the help-tooltip feature in separate style files, for easier inclusion of just what you want.
-
💡 Rename form-group to input-wrapper (7ee3bae)
Documentation Updates
-
✏️ Upate doc examples and docs regarding input-fields (38f6af8)
-
✏️ Update doc and examples with aria-invalid (1f3b60b) , closes #343645
-
🤖 Update documentation files with example code (f8fd7b9)
-
reinstall packages (fcfacf4)
7.1.0 (2020-11-16)
Features
6.44.0 (2020-11-11)
Features
-
🎸 Add numeric stepper to input-fields component (ddc51dd) , closes #301222
-
🤖 Started to work on bug (55a83c8)
6.43.3 (2020-11-03)
Bug Fixes
Documentation Updates
- ✏️ Add missing closing tag for help tooltip implementation (88e9c54)
Miscellaneous chores
reinstall (2cefe15)
6.36.1 (2020-10-13)
Bug Fixes
- 🐛 Reset border-color on input focus with mouse (e4df343)
6.36.0 (2020-10-12)
Features
- 🎸 Add updated focus styling to input-fields (df1ac3e)
Miscellaneous chores
6.29.4 (2020-09-09)
Documentation Updates
- ✏️ Close button tag in input-field usage doc (b89c00d)
6.29.3 (2020-09-07)
Documentation Updates
- ✏️ Merge atoms/molecules/organisms into components (90ed590)
6.29.2 (2020-09-03)
Documentation Updates
- ✏️ Use blur instead of oninput in input validation example (8c8d787)
6.29.1 (2020-09-03)
Bug Fixes
-
🐛 Don't display fields as invalid when they are required (32184ae) . but not filled out
-
🐛 Hide help text for input when field is invalid (22dc53f)
Documentation Updates
-
✏️ Add correct aria label for form control invalid errors (eda6037)
-
✏️ Add documentation about validation for input-fields (4f84c40)
-
✏️ Cleanup documentation example layout for input-fields (0894116)
6.26.14 (2020-08-04)
Documentation Updates
- ✏️ Update documentation layout (4566228)
6.26.12 (2020-08-03)
Documentation Updates
- ✏️ Update documentation for the new registry (3e7ba20)
Miscellaneous chores
-
🤖 lerna bootstrap (d835ec9)
-
🤖 Temporarily remove package-lock.json-files (87b3f7f)
-
🤖 Update references to new scope (b5575dd)
6.26.10 (2020-07-14)
Miscellaneous chores
-
🤖 Manually update some links (ecc0133)
-
🤖 Update CHANGELOG.md links to workitems and commits (ab2887b)
6.26.0 (2020-07-13)
Features
- 🎸 Make large search larger, and add support for dark bg (0fb63b9)
6.25.2 (2020-07-08)
Bug Fixes
- 🐛 Use correct heading classes in examples (52c1e2d)
6.23.0 (2020-07-01)
Miscellaneous chores
reinstall (1ab1527)
6.22.0 (2020-07-01)
Features
- 🎸 Add new color categories, update documentation (5496822)
Bug Fixes
- 🐛 Use correct colors for disabled states in input controls (a0862db)
Documentation Updates
- ✏️ Update documentation layout (816053b)
Miscellaneous chores
6.21.6 (2020-06-11)
Miscellaneous chores
- 🤖 Remove .zip files from .npmignore (b3bc7dc)
6.19.0 (2020-06-02)
Miscellaneous chores
reinstall (3416c65)
6.17.4 (2020-05-25)
Bug Fixes
- 🐛 Fix focus on invalid input fields when placeholder is not shown (f3ba10b)
6.15.5 (2020-05-15)
Miscellaneous chores
-
prepped and ready to separate documentation site from code (d3e1fd9)
-
pruning and reinstalling (5cda0bc)
reinstall (939dae6)
reinstall (cae55fb)
- Remove livingcss data and add frontmatter data (b384946)
6.15.4 (2020-05-14)
Miscellaneous chores
- lerna bootstrap (0c4f599)
6.15.2 (2020-05-11)
Miscellaneous chores
- reinstall and build (aedc097)
6.15.0 (2020-05-07)
Miscellaneous chores
6.12.0 (2020-04-27)
Features
- 🎸 Add support for large search field (6b6eba0)
6.11.3 (2020-04-22)
Documentation Updates
- ✏️ Add some docs about accessibility testing (da5b596)
6.10.9 (2020-04-22)
Miscellaneous chores
-
🤖 Add *.zip-files to .npmignore-files (062b8b0)
-
🤖 Remove references to verb in package.json files (cfdaaec)
6.10.6 (2020-04-17)
Miscellaneous chores
- 🤖 lerna bootstrap (d8faf26)
6.10.5 (2020-04-16)
Code Refactoring
- 💡 Use a common core token for form element height (4481d11)
6.10.1 (2020-04-16)
Bug Fixes
6.10.0 (2020-04-16)
Features
- 🎸 Add search icon to search input field (11466f9)
6.9.1 (2020-04-16)
Documentation Updates
-
✏️ Use correct badge color in README.md (03b563e)
-
✏️ Use correct name for package in the README.md (acef81e)
6.8.1 (2020-04-15)
Bug Fixes
- 🐛 Remove user agent styling for webkit for search fields (2643c4e)
6.6.0 (2020-04-09)
Documentation Updates
- ✏️ Change edit this document to edit this section (791b646)
6.5.4 (2020-04-08)
Bug Fixes
6.5.3 (2020-04-06)
Documentation Updates
- ✏️ Some more sg updates and tweaks (d1d6802)
6.4.2 (2020-04-03)
Bug Fixes
- 🐛 Use max-height none instead of unset (05ff638)
6.3.4 (2020-04-01)
Miscellaneous chores
- 🤖 Use more of if styling on documentation site (2eaf386)
6.3.2 (2020-03-31)
Documentation Updates
- ✏️ Replace sg.message with if.notification (5d1aa99)
6.1.3 (2020-03-26)
Miscellaneous chores
- 🤖 Adjust widths for upload field for responsive. Docs (e307999)
6.1.0 (2020-03-25)
Features
- 🎸 Add new component file upload (40942fa)
5.3.0 (2020-03-18)
Bug Fixes
- 🐛 Set button and input height to 48, down from 56px (f00db7d)
5.2.0 (2020-03-17)
Code Refactoring
- 💡 Reorganized sections in the documentations (dd31802) . Adjust navigation styling on the left hand side. The reorganization is mostly to make the site load a bit smoother
5.1.0 (2020-03-15)
Bug Fixes
- 🐛 Adjust largest size for input fields from 200px to 360px (1cc0666)
5.0.4 (2020-03-14)
Miscellaneous chores
5.0.1-alpha.160 (2020-03-12)
Miscellaneous chores
5.0.1-alpha.151 (2020-03-05)
Features
- 🎸 Add new typography rule for captions. Refactor weights (a033f4e) . and updated documentation
5.0.1-alpha.149 (2020-03-05)
Bug Fixes
- 🐛 Adjust labels, input-fields and breadcrumbs to baseline (67307fc)
Miscellaneous chores
-
🤖 Finish adjusting components to baseline grid (50f7a69) . Chang approx 6888 raw values to variables
-
🤖 Starting to align components to new baseline grid (cf2c073)
-
Align typography to baseline. First attempt (f4447e9)
-
Starting to align components to new baseline grid (999babf)
5.0.1-alpha.147 (2020-03-02)
Miscellaneous chores
-
🤖 Adjusted documentation system to be a tad fresher (c97ff4d)
-
lerna bootstrap (218a647)
-
lerna bootstrap (672c766)
-
lerna bootstrap (4d64d70)
5.0.1-alpha.142 (2020-02-26)
Documentation Updates
- ✏️ Add documentation example for larger error texts (bcb45d6)
Miscellaneous chores
- 🤖 Move invalid state warning icon to the error text (f251932)
5.0.1-alpha.131 (2020-02-23)
Bug Fixes
5.0.1-alpha.128 (2020-02-19)
Miscellaneous chores
- 🤖 Adhere to baseline and update documentation (34300c6)
5.0.1-alpha.126 (2020-02-18)
Bug Fixes
- 🐛 Use 1pt border on invalid fields instead of 2pt (c798203)
5.0.1-alpha.125 (2020-02-18)
Miscellaneous chores
- lerna bootstrap (4337b5a)
5.0.1-alpha.122 (2020-02-17)
Features
-
🎸 Add design to input type file (8bb1653)
-
🎸 Add preprocessor files and tests for input fields (8b9c09a)
5.0.1-alpha.120 (2020-02-17)
Bug Fixes
- 🐛 Do not use variables in calc (b6b6108)
Miscellaneous chores
5.0.1-alpha.117 (2020-02-06)
Documentation Updates
- ✏️ Add edit links to documentation files (7c6e770)
5.0.1-alpha.116 (2020-02-06)
Bug Fixes
-
🐛 Make if help label 100% width (5398c46)
-
🐛 Use 20px padding on input-fields instead of 19px (499d1cb)
5.0.1-alpha.111 (2020-01-21)
Bug Fixes
- 🐛 Fix responsiveness for forms grids, heroes and inputs (5de0a0d)
5.0.1-alpha.110 (2020-01-21)
Bug Fixes
- 🐛 Remove duplicate support color (a7f346d)
5.0.1-alpha.105 (2020-01-13)
Features
- 🎸 Finishing up datepicker first version (9da9556)
5.0.1-alpha.87 (2019-12-04)
Bug Fixes
-
🐛 Several fixes (3cb042e)
-
🐛 Use correct font sizes and icons for validation errors (ae4061c)
-
🐛 Use correct validation error icon (a4d1c20)
5.0.1-alpha.79 (2019-12-03)
Documentation Updates
- ✏️ Scope all examples to .if (26bd7cd)
5.0.1-alpha.70 (2019-11-28)
Miscellaneous chores
- 🤖 Remove polymer, updated styling accordingly (04e1941)
5.0.1-alpha.67 (2019-11-26)
Bug Fixes
- 🐛 Use package-based imports (6822233)
5.0.1-alpha.62 (2019-11-24)
Miscellaneous chores
- 🤖 Some documentation fixes (8d66129)
5.0.1-alpha.58 (2019-11-22)
Features
- 🎸 Remove normalize.css (2c23c2b)
Miscellaneous chores
- 🤖 lerna bootstrap (76e7c07)
5.0.1-alpha.57 (2019-11-22)
Miscellaneous chores
- 🤖 lerna bootstrap (99e08e6)
5.0.1-alpha.44 (2019-11-08)
Features
- 🎸 Add support colors, replace hardcoded rgb to variables (32a2b9e)
5.0.1-alpha.42 (2019-11-05)
Miscellaneous chores
- 🤖 lerna bootstrap (c8fb43e)
5.0.1-alpha.41 (2019-11-05)
Bug Fixes
-
🐛 Adjust spacing from top on the help field for inputs (f91d23b)
-
🐛 Remove indentation of help texts for input fields (8293b8e)
5.0.1-alpha.40 (2019-11-05)
Bug Fixes
- 🐛 Fix typography based on latest sketches (2653b61)
5.0.1-alpha.38 (2019-11-04)
Miscellaneous chores
- 🤖 Add autocomplete off on form examples (8e933f3)
5.0.1-alpha.34 (2019-10-31)
Bug Fixes
- 🐛 Use correct padding when using trailing icons in input (e29cad4)
5.0.1-alpha.32 (2019-10-31)
Miscellaneous chores
- 🤖 Update components and documentation from sketches (1b8b6f6)
5.0.1-alpha.28 (2019-10-29)
Miscellaneous chores
- 🤖 lerna bootstrap (cee48b0)
5.0.1-alpha.27 (2019-10-29)
Bug Fixes
- 🐛 Give correct color to disabled label (4c2ead4)
Code Refactoring
- 💡 Move common form styling into core for now (99fb6d1)
5.0.1-alpha.26 (2019-10-28)
Bug Fixes
- 🐛 Always make labels visible (3b11ab0)
5.0.1-alpha.20 (2019-10-22)
Miscellaneous chores
- 🤖 Rename links (82e3a8a)
5.0.1-alpha.17 (2019-10-16)
Features
- 🎸 Add textarea to input fields, also use correct bg-color (9bb46b8)
5.0.1-alpha.14 (2019-10-16)
Documentation Updates
- ✏️ Updated documentation examples (a3a1a77)
5.0.1-alpha.12 (2019-10-15)
Features
-
🎸 Add helper icon to label (8bdac99) . And adjusted fields to latest draft
-
🎸 Add latest changes to input-fields (cc6ac5d)
-
🎸 Final adjustments to this version of input fields (959a443)
5.0.1-alpha.9 (2019-10-14)
Miscellaneous chores
5.0.1-alpha.6 (2019-10-08)
Features
- 🎸 Add design tokens to typography (384829e)
5.0.1-alpha.4 (2019-10-08)
Miscellaneous chores
- 🤖 npm i && lerna bootstrap (5291127)
5.0.1-alpha.3 (2019-10-04)
Bug Fixes
- 🐛 Replace fieldset with .if.form-group (ac2eabb) .
Miscellaneous chores
5.0.1-alpha.1 (2019-09-30)
Features
-
🎸 Add new component input-fields (5f6e5a4)
-
🎸 Add size features and states to input fields (8029e04) . And update documentation
Bug Fixes
-
🐛 Adjustments to buttons and input fields (a796809)
-
🐛 Correct colors for states and updated markup (f4fb8e8) . Update documentation examples
Miscellaneous chores
- 🤖 Bootstrap (e120d45)
5.0.1-alpha.12 (2019-10-15)
Features
-
🎸 Add helper icon to label (8bdac99) . And adjusted fields to latest draft
-
🎸 Add latest changes to input-fields (cc6ac5d)
-
🎸 Final adjustments to this version of input fields (959a443)
5.0.1-alpha.9 (2019-10-14)
Miscellaneous chores
5.0.1-alpha.6 (2019-10-08)
Features
- 🎸 Add design tokens to typography (384829e)
5.0.1-alpha.4 (2019-10-08)
Miscellaneous chores
- 🤖 npm i && lerna bootstrap (5291127)
5.0.1-alpha.3 (2019-10-04)
Bug Fixes
- 🐛 Replace fieldset with .if.form-group (ac2eabb) .
Miscellaneous chores
5.0.1-alpha.1 (2019-09-30)
Features
-
🎸 Add new component input-fields (5f6e5a4)
-
🎸 Add size features and states to input fields (8029e04) . And update documentation
Bug Fixes
-
🐛 Adjustments to buttons and input fields (a796809)
-
🐛 Correct colors for states and updated markup (f4fb8e8) . Update documentation examples
Miscellaneous chores
- 🤖 Bootstrap (e120d45)
5.0.1-alpha.6 (2019-10-08)
Features
- 🎸 Add design tokens to typography (384829e)
5.0.1-alpha.4 (2019-10-08)
Miscellaneous chores
- 🤖 npm i && lerna bootstrap (5291127)
5.0.1-alpha.3 (2019-10-04)
Bug Fixes
- 🐛 Replace fieldset with .if.form-group (ac2eabb) .
Miscellaneous chores
5.0.1-alpha.1 (2019-09-30)
Features
-
🎸 Add new component input-fields (5f6e5a4)
-
🎸 Add size features and states to input fields (8029e04) . And update documentation
Bug Fixes
-
🐛 Adjustments to buttons and input fields (a796809)
-
🐛 Correct colors for states and updated markup (f4fb8e8) . Update documentation examples
Miscellaneous chores
- 🤖 Bootstrap (e120d45)