z-index utility

[Kevin Hougasian]

🔧 Enhancement Request

Add a z-index utility with defaults 0-10 (up for discussion)
class="z-0" = z-index: 0;

Add a JS component to allow any value
data-z="501" = z-index: 501;

Who is asking for the feature?

@hougasian

What business problem is this hoping to solve?

z-index flexibility

Estimates

[eridolfi12]

I think it's a good idea.

My only concern would be for developers or designers not familiar with z-index using it in odd ways.

[Kevin Hougasian]

[10:12 AM] Ted Krueger
I could see how it might be useful when using the position utilities. /shrug
​[10:14 AM] Kevin Hougasian
is it something for platform UI, or just as a straight utility for the platform?
​[10:18 AM] Ryan Trimble
Just looking at how other frameworks approach z-index, found the following:

Bootstrap - Doesn't necessarily have utilities for z-index, but they do have a logical z-index scale: https://getbootstrap.com/docs/5.2/layout/z-index/

Tailwind - Does have utilities for z-index: https://tailwindcss.com/docs/z-index
​[10:20 AM] Austin Asbury
I think this would be a good addition to platform-ui because there are many times I wish there was a z-index utility class and had to just use an inline style tag instead.
(1 liked)​[10:20 AM] Ted Krueger
I say go for it
​[10:22 AM] Kevin Hougasian
i like the idea of a scale including 2 levels of negative indexes and a data driven attribute for those situations where other circumstances tie you hands
https://teams.microsoft.com/l/message/19:[e-mail]/1658239965193?tenantId=ed322795-5459-4b75-8e4c-f7018552c33a&groupId=18db7544-1508-492d-b1ed-c0bda821232e&parentMessageId=1658239869778&teamName=RIMdev&channelName=Frontend&createdTime=1658239965193

[Kevin Hougasian]

@mackenziegates bringing this out of the icebox as well

[Austin Asbury]

Once this is added to platform-ui we should update all the spots where an inline style tag was used to apply z-index in the Platform.