Revise z index #5514
Closed
Revise z index #5514
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Packages Report
|
inikolova
force-pushed
the
revise-z-index
branch
2 times, most recently
from
b68c6c8 to
a8c0193
Compare
inikolova
force-pushed
the
revise-z-index
branch
from
89bd2fb to
ab88839
Compare
zhpenkov
reviewed
Jul 17, 2025
There was a problem hiding this comment.
Pull Request Overview
This PR reorganizes z-index values across themes and components to follow a semantic grouping (background, content, navigation, floating, overlays, popups, user feedback, special cases). Key changes include lowering the AppBar default z-index, aligning documentation, and adjusting dozens of component layers to match their intended stack order.
- Lower AppBar z-index from 1000 to 900 in all themes
- Update documentation tables to reflect the new default
- Adjust various component z-indexes (splitter handles, popups, media player, grid, Gantt, draggable, dock-manager, color palette)
Reviewed Changes
Copilot reviewed 36 out of 45 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/material/scss/appbar/_variables.scss | Set AppBar z-index to 900 |
| packages/material/docs/customization*.md | Align docs with new 900 default |
| packages/fluent/scss/appbar/_layout.scss | Hardcoded fixed AppBar z-index changed to 1000 |
| packages/fluent/scss/spreadsheet/_layout.scss | Removed .k-spreadsheet-tabstrip z-index block |
| packages/fluent/scss/splitter/_layout.scss | Increased splitter drag-handle z-index to 10 |
| packages/fluent/scss/popup/_layout.scss | Raised popup container z-index to 12000 |
| packages/fluent/scss/mediaplayer/_layout.scss | Standardized media player layers to z-index: 1 |
| packages/fluent/scss/grid/_layout.scss | Bumped grid resizer to 10 and edit-cell to 5 |
| packages/fluent/scss/draggable/_layout.scss | Updated draggable feedback to z-index 20000 |
| packages/fluent/scss/dock-manager/_layout.scss | Set dock-manager panel to z-index 1 / 1000 |
| packages/fluent/scss/colorpalette/_layout.scss | Refined hover/focus stack levels to 3 / 2 |
Comments suppressed due to low confidence (1)
packages/fluent/scss/spreadsheet/_layout.scss:871
- The entire
.k-spreadsheet-tabstripblock was removed, including layout tweaks beyond z-index. This may break tabstrip styling or behavior. If only z-index needed adjustment, revert the removal and only update that property.
border-color: inherit;
bd8b1ce to
9b55ec7
Compare
|
Maybe we can add a list with the componets that use z-index and order them by z-index |
inikolova
force-pushed
the
revise-z-index
branch
from
7b74176 to
3e81497
Compare
inikolova
force-pushed
the
revise-z-index
branch
from
e79b636 to
37affe1
Compare
Merged
|
Closed in favour of: #5542 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes https://github.com/telerik/kendo-themes-private/issues/366
This PR addresses the following issues as well:
#5427
#5397
#5025
Based on an audit of z-index usage across all themes and components, I would suggest the following organisation into semantic groups with clearly defined and meaningful ranges:
1. Base / background (-1-0)
For elements that should appear behind normal content (pseudo-elements, placeholders, backgrounds);
2. Content / basic (1-99)
For normal content elements and their internal layering - like grid headers, calendar header, form inputs etc.
3. Navigation (100-999)
For elements that should appear above normal content (for example Sticky Appbar);
4. Floating (1000-9999)
For elements that float above the main interface (Notification, Badge, Dock manager unpinned containers, Map attribution, Fixed Appbar);
5. Overlay (10000-11999)
For modal dialogs and overlays, Drawer overlays, Fullscreen modes.
6. Popups (12000 - 19999)
For Tooltip, Popover, Context menu, Chat tooltip.
7. User feedback (20000-29999)
For drag&drop elements elements, loading states, and temporary user feedback.
8 Special Cases (30000+)
For emergency overrides and special cases (!!!use sparingly).
Here are some further suggestions based on the research:
1. Structural Elements (for example k-header) which are direct children of a component should have z-index 1;
2. k-resize-handle -> its z-index has been increased to 10, as it should always appear above its surrounding elements.; this value is now consistent across all components;
3. Interactive states - when component state needs a higher priority, increase its z-index with 1;
4. .k-edit-cell should have the highest priority than all other cells - normal, sticky, intersection of sticky row and cell, therefore is z-index is increased to 5.