guardian / guardian/dotcom-rendering

Use `getZIndex` for all z-index values

Open
#16,288 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
274
Forks
34
Avg merge
2d 22h
Merged PRs (30d)
121

Description

We have a utility function [`getZIndex`](https://github.com/guardian/dotcom-rendering/blob/c272244af161813864a5b88e27086bcdec577001/dotcom-rendering/src/lib/getZIndex.ts#L120-L124) that allows us to deterministically sequence `z-index` values for all items in the declared list it consumes.

However there are still many [examples](https://github.com/search?q=repo%3Aguardian%2Fdotcom-rendering+%22z-index%3A+%22&type=code&p=2) of raw z-index values being set in the DCAR codebase which should be moved to use the `getZIndex` function.

This will allow us to confidently create z-index values and avoid mistakes where a change to underlying z-index values cause items to not stack correctly.

For example: #16140

Contributor guide

Open the contributing guide

Research direction

Start with dotcom-rendering/src/lib/getZIndex.ts and the repository code search for raw `z-index` declarations. Review the example in issue #16140, then inspect each relevant occurrence; done means the DCAR examples use the utility rather than raw values.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.