CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
The Dropdown Select component allow users to select one option from a temporary modal menu.
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/dropdown-select@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
Required markup
<form autocomplete="off" action="">
<div class="if input-wrapper">
<select class="if dropdown-select" id="<identifier>" name="<identifier>">
<option value="" disabled hidden>Vรคlj vรฅningar</option>
<option value="1">1 vรฅning</option>
<option value="2" selected>2 vรฅningar</option>
<option value="3">3 vรฅningar</option>
</select>
<label class="if" for="<identifier>">Vรคlj antal vรฅningar</label>
</div>
</form>
Placeholder
To create a placeholder for the select box, instead of using the first item in the list, you can add an option
with
these attributes:
<option value="" disabled selected hidden>Placeholder text</option>
Placeholder styling
To ensure that the unselected option that acts like a placeholder looks and feels like a placeholder, you need some javascript:
const dropdowns = document.querySelectorAll('select.if.dropdown-select');
const checkIfSelectIsNotSelected = (dropdown) => dropdown.value === '';
const setNotSelectedClass = (dropdown) => dropdown.classList.add('is-unselected');
const handleSelectChange = (e) => e.target.classList.remove('is-unselected');
dropdowns.forEach((dropdown) => {
if (checkIfSelectIsNotSelected(dropdown)) {
setNotSelectedClass(dropdown);
}
dropdown.removeEventListener('change', handleSelectChange);
dropdown.addEventListener('change', handleSelectChange);
});
This will ensure the correct placeholder styling for the Dropdown Component.
With help text
<form autocomplete="off" action="">
<fieldset class="if">
<legend class="if">Hur mรฅnga vรฅningar har ditt hus?</legend>
<div class="if input-wrapper">
<select class="if dropdown-select" id="<identifier>" name="<identifier>">
<option value="" disabled selected hidden>Vรคlj vรฅningar</option>
<option value="1">1 vรฅning</option>
<option value="2">2 vรฅningar</option>
<option value="3">3 vรฅningar</option>
</select>
<label class="if" for="<identifier>">Vรคlj antal vรฅningar</label>
<span class="if input-help">Golvrรคkning kan pรฅverka totalpriset</span>
</div>
</fieldset>
</form>
Required
<select class="if dropdown-select" required>
โฆ
</select>
Closed
<select class="if dropdown-select is-closed">
โฆ
</select>
Disabled
<select class="if dropdown-select" disabled>
โฆ
</select>
Tokens
Dropdown Select tokens
Name | Value | Is aliased in |
---|---|---|
$ids-dropdown-select-max-width |
100% |
|
$ids-dropdown-select-height |
3rem |
|
$ids-dropdown-select-spacing-inset-default |
0 3rem 0 1.5rem |
|
$ids-dropdown-select-spacing-inset-is-closed |
0 3rem 0 0 |
|
$ids-dropdown-select-font-family |
'If Sans Fallback', Arial, sans-serif |
|
$ids-dropdown-select-font-weight |
normal |
|
$ids-dropdown-select-font-size |
1.125rem |
|
$ids-dropdown-select-border-radius |
0.375rem |
|
$ids-dropdown-select-transition |
all 0.1s cubic-bezier(0.4, 0, 0.2, 1) |
|
$ids-dropdown-select-background-color-default |
rgb(250, 249, 247) |
|
$ids-dropdown-select-background-color-disabled |
rgba(250, 249, 247, 0.7) |
|
$ids-dropdown-select-background-color-is-closed |
transparent |
|
$ids-dropdown-select-border-default |
0.0625rem solid rgb(110, 98, 94) |
|
$ids-dropdown-select-border-disabled |
0.0625rem solid rgba(110, 98, 94, 0.3) |
|
$ids-dropdown-select-border-invalid |
0.125rem solid rgb(187, 50, 12) |
|
$ids-dropdown-select-border-is-closed |
none |
|
$ids-dropdown-select-color-default |
rgba(51, 30, 17, 0.9) |
|
$ids-dropdown-select-color-is-unselected |
rgba(110, 98, 94, 0.6) |
|
$ids-dropdown-select-color-disabled |
rgba(110, 98, 94, 0.4) |
|
$ids-dropdown-select-box-shadow |
none |
|
$ids-dropdown-select-background-size |
2rem 2rem |
|
$ids-dropdown-select-background-position |
right 0.75rem center |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
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.16.0 (2022-04-07)
Bug Fixes
14.9.0 (2022-03-03)
Miscellaneous chores
- ๐ค Bootstrap (6822f5b)
14.8.5 (2022-02-24)
Bug Fixes
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
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
-
Merge selectors (74c32cc)
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
14.0.3 (2021-11-14)
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
-
๐ Fix import issue (792b0a8)
-
๐ Removed div arround select tag, added proper focus style (6f88950) . โ Closes: 485815
Documentation Updates
-
โ๏ธ Extracted out the CSS documentation for Dropdown Select (c55fe05) , closes #467386
-
โ๏ธ 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.11.0 (2021-10-19)
Features
- ๐ธ Input field hot reload (eac76b7)
13.10.2 (2021-10-07)
Bug Fixes
13.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.5.1 (2021-09-07)
Bug Fixes
-
๐ Update and fix data sizing for form elements (5fbefb4) , closes #374144
-
๐ค Rearrange diffs for test, use grey color for unaffected (1834399)
-
continue to fix form input widths (b66977e)
-
๐ค Use node v14 (4009973)
bootstrap (d23e139)
13.2.0 (2021-09-01)
Features
-
๐ธ dropdown-select (f85b886) , closes #461587 . Add input-help and input-error usage examples
-
๐ค Use correct order for diff (cc6a4fd)
13.0.0 (2021-08-25)
โ BREAKING CHANGES
-
๐งจ We are removing IE11 support
-
๐ค Removing IE11 support for dropdown-select (584aebe) , closes #336127
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
12.12.1 (2021-08-10)
Bug Fixes
-
๐ Use correct padding to prevent text overflow of icon (39c73ab)
-
๐ค 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
-
๐ Manually set firstPublished and lastModified (e83af7d)
-
๐ We don't need lastModified (e458a12)
12.0.0 (2021-05-05)
โ BREAKING CHANGES
- ๐งจ All of the mixins have now been renamed
- ๐งจ 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
- ๐ธ Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component
Code Refactoring
-
๐ก Extract Label to Input Label (c8bbf70) , closes #336508
-
๐ก Rename and consolidate mixins (67cf470) , closes #268081
-
๐ก Rename Dropdown to Dropdown Select (af1fc9d) , closes #336508
Documentation Updates
- โ๏ธ Use correct title for Dropdown Select (7515aba)
Miscellaneous chores
-
๐ค Add back missing styles for dropdown-select (f7938d8)
-
๐ค Make sure we have correct deps set, and used (5d2e0fb)
-
๐ค Reinstall (2c763ea)
-
๐ค Reinstall (69e1a5b)
rebuild (7edb430)