CSS ComponentThe latest version of this package is: 17.0.30-alpha.0, Opens in new window
A Contextual Menu is a menu to gather options for a context, or when navigational control are truncated.
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/contextual-menu@17.0.30-alpha.0
Table of Contents
Edit this section, Opens in new windowUsage
Required markup
The Contextual Menu is always triggered form an icon button/control.
Disabled
Parent
Separator
Icon on menu item
Or, you can use an SVG icon
Edit this section, Opens in new windowAccessibility
Remember to use the correct role
, aria-
, tabindex
and html
-attributes for the menu options.
Closed menu
Edit this section, Opens in new windowTokens
All of the tokens can be used as preprocessor and CSS variables
Contextual Menu tokens
Name | Value | Is aliased in |
---|---|---|
$ids-contextual-menu-menu-list-color-background |
rgb(250, 249, 247) |
|
$ids-contextual-menu-border-radius |
0.375rem |
|
$ids-contextual-menu-color-background |
rgb(250, 249, 247) |
|
$ids-contextual-menu-color-text |
rgb(51, 30, 17) |
|
$ids-contextual-menu-button-content-icon-normal-default |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ccircle r=%273%27 cy=%274%27 cx=%2716%27 stroke-miterlimit=%2710%27 fill=%27none%27 stroke=%27%23331e11%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3Ccircle r=%273%27 cy=%2716%27 cx=%2716%27 stroke-miterlimit=%2710%27 data-color=%27color-2%27 fill=%27none%27 stroke=%27%23331e11%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3Ccircle r=%273%27 cy=%2728%27 cx=%2716%27 stroke-miterlimit=%2710%27 fill=%27none%27 stroke=%27%23331e11%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3C/svg%3E") |
|
$ids-contextual-menu-button-content-icon-normal-disabled |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ccircle r=%273%27 cy=%274%27 cx=%2716%27 stroke-miterlimit=%2710%27 fill=%27none%27 stroke=%27rgba(110,98,94,0.3)%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3Ccircle r=%273%27 cy=%2716%27 cx=%2716%27 stroke-miterlimit=%2710%27 data-color=%27color-2%27 fill=%27none%27 stroke=%27rgba(110,98,94,0.3)%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3Ccircle r=%273%27 cy=%2728%27 cx=%2716%27 stroke-miterlimit=%2710%27 fill=%27none%27 stroke=%27rgba(110,98,94,0.3)%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3C/svg%3E") |
|
$ids-contextual-menu-button-content-icon-table-default |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 stroke-width=%272%27 viewBox=%270 0 32 32%27%3E%3Cg fill=%27%230054f0%27%3E%3Ccircle cx=%274%27 cy=%2716%27 r=%273%27/%3E%3Ccircle cx=%2716%27 cy=%2716%27 r=%273%27/%3E%3Ccircle cx=%2728%27 cy=%2716%27 r=%273%27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-contextual-menu-button-content-icon-table-disabled |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 stroke-width=%272%27 viewBox=%270 0 32 32%27%3E%3Cg fill=%27rgba(110,98,94,0.3)%27%3E%3Ccircle cx=%274%27 cy=%2716%27 r=%273%27/%3E%3Ccircle cx=%2716%27 cy=%2716%27 r=%273%27/%3E%3Ccircle cx=%2728%27 cy=%2716%27 r=%273%27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-contextual-menu-button-size-icon |
1rem 1rem |
|
$ids-contextual-menu-menu-action-content-icon-active |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Echeck%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%3Cpolyline points=%272 16 11 25 30 6%27 fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-contextual-menu-menu-action-content-icon-parent-left |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Esmall left%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%3Cpolyline fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27 points=%2719,22 13,16 19,10 %27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-contextual-menu-menu-action-content-icon-parent-right |
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Esmall right%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%3Cpolyline fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27 points=%2713,10 19,16 13,22 %27/%3E%3C/g%3E%3C/svg%3E") |
|
$ids-contextual-menu-menu-action-size-height |
2rem |
|
$ids-contextual-menu-menu-action-spacing-inset-child |
0 1.5rem |
|
$ids-contextual-menu-menu-action-spacing-inset-parent-right |
0 3rem 0 1.5rem |
|
$ids-contextual-menu-menu-action-spacing-inset-parent-left |
0 1.5rem 0 3rem |
|
$ids-contextual-menu-menu-action-color-text-default |
rgb(51, 30, 17) |
|
$ids-contextual-menu-menu-action-color-text-active |
rgb(51, 30, 17) |
|
$ids-contextual-menu-menu-action-color-text-disabled |
rgb(110, 98, 94) |
|
$ids-contextual-menu-menu-action-color-text-hover |
rgb(51, 30, 17) |
|
$ids-contextual-menu-menu-action-color-background-default |
rgba(0, 0, 0, 0) |
|
$ids-contextual-menu-menu-action-color-background-active |
rgb(232, 224, 217) |
|
$ids-contextual-menu-menu-action-color-background-hover |
rgb(232, 224, 217) |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.28.0 (2022-08-22)
Bug Fixes
14.22.2 (2022-05-03)
Miscellaneous chores
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.19.0 (2022-04-13)
Features
- ๐ธ Add CSS Variables to Contextual Menu (85d9187) , closes #580455 . To ensure support in this component for Dark Mode, and to make it easier for developers to override/create variants/adapt to their theme, we added CSS Variables (and local Design Tokens) to this component.
Code Refactoring
-
๐ก Adjust position of menu action icon (25f2c0b) . The icons in the menu actions were a bit unaligned, even though we centered it vertically. This is due to the line-height used in menu action.
-
๐ก Convert examples in Contextual Menu to use MDX (2d9f3a0) , closes #586087 . We convert the examples and figures to use React components via MDX for a better user experience and for a better maintenance experience for the IDS team.
Miscellaneous chores
-
๐ค Add
.ids-doc
CSS flag to generated tokens (610dc05) . This makes it easier to use themes for the IDS components that we use as helpers in our documentation -
๐ค Add dev server (187dab7)
-
๐ค Started to add CSS variables (998a1c6)
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.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
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
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
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!
Documentation Updates
-
โ๏ธ Adjust documentation, examples etc (d161cd3)
-
โ๏ธ Move position of the quick links (5cb0897)
-
โ๏ธ Remove unneeded margins for shortcuts (36c7e8d)
-
โ๏ธ Split out CSS and JS implementation docs (bd32bbf) , closes #467386
-
โ๏ธ Update documentation (b1baa6d)
-
โ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
๐ก Reduce spacing tokens, use correct size tokens (97aa461)
-
๐ก Remove manual box-shadow on example (5cd6477)
-
๐ก 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.9.2 (2021-09-30)
Bug Fixes
- ๐ Complete the pseudo-element fix (1dcee2c)
13.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.0 (2021-09-08)
Documentation Updates
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
12.13.0 (2021-08-11)
Bug Fixes
12.12.1 (2021-08-10)
Bug Fixes
-
๐ Make sure components using fonts, have fonts bundled (d5bb642) , closes #354912
-
๐ค 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
- ๐งจ Overflow Menu is now known as Contextual Menu and it is a separate component. The Menu Component is now obliterated.
Code Refactoring
-
๐ก Refactor back support for menu in tables (e347a56)
-
๐ก Refactor+rename overflow menu to contextual menu (70c4044) , closes #336508
-
๐ก Rename and consolidate mixins (67cf470) , closes #268081
Documentation Updates
- โ๏ธ Remove "N/A" from empty sections (1e41446)
Miscellaneous chores
-
๐ค PR fixes (87bdedd)
-
๐ค Reinstall (2c763ea)
-
๐ค Update all example references to old menu (81205ad)
rebuild (7edb430)