[enhancement]: [Web UI] Distinct id or class names for components to assist in custom user styling

[Fortyseven]

Is there an existing issue for this?

• [X] I have searched the existing issues

Contact Details

[email protected]

What should this feature add?

Admittedly, there's a lot of self-interest wrapped up in this. :wink: But it'd be great to have reliable id class or data attribute hooks for the various parts of the UI.

Some parts DO have usable descriptors that can be tied into, for example I currently color the buttons across the top using custom CSS like this:

[aria-label="Use Seed"] {
    color: limegreen;
    background-color: darkgreen;
}

While that's certainly fragile, it's a little more stable than the (recently broken) hack I used for a while to make it clearer to me that the Variations option is enabled:

/* Variation Warning */
.chakra-accordion__item.advanced-settings-item.css-17mg6aq:nth-child(2) {
    input:nth-child(1):enabled {
        background-color: red;
        color: yellow;
        box-shadow: 0 0 20px #2200FF;
    }
}

Even just, like, an .invoke-options-seed class at the top of the option's box would be good enough.

Alternatively, to make this a little less self-serving, data-test attributes could pull double-duty as a general hook for automated tests in the future. (Assuming. :wink:)

I have a feeling #1194 ties heavy into this, though.

Anyway, this is all very low, low, low priority stuff. As always, I'm happy to do the work, myself. Just let me know. :ok_hand:

[psychedelicious]

So, Doc, this is probably a Good Idea™️. Like, objectively, not just for this request. I dunno why but I have a feeling it's advisable...

Question - so e.g. in this image do we want the the whole label+slider+numberinput to be given an ID? Just the number input? Or without the reset button? What about the accordion header image? etc etc

Technically we can give them all IDs. They are all reusable components and we could, like, prefix the label parameter or tooltip text parameter and make that the ID, without having to actual think and name things (which I don't want to do). I don't know if we can promise no-takebacks forever but it should be fairly stable.

[Fortyseven]

Just the primary buttons, major groupings, initially. For a first pass, at least. Since the design is still in flux, it's probably not worth getting too granular this early.

But, examples that would be useful:

• The 'advanced settings' containers, for instance. Just need a data attribute. Something like: <div class="chakra-accordion__item advanced-settings-item invokeai-style-cache-17mg6aq" data-name='seed'>, or data-name='seam-correction', etc.

• The major UI buttons along the top, too, e.g. data-name='reset-view', or data-name='use-all', etc.

• There's already some aria-label tags on those buttons that can be hijacked already, so those aren't strictly necessary. Maybe just using aria-labelinstead ofdata-` attributes is better in the long run? Good for accessibility, maybe? :thinking:

Anyway... this is definitely all back-burner stuff while there's bigger fish to fry.