[Story]: Display lack of accelerator recommendations in column

[Gkrumbach07]

Goal

Find an alternative to "disabling a label" to signify lack of accelerator recommendations in column

Dependency issue

• Map accelerators to custom notebook images #1439

Itemized goals

In the current mocks for Habana part 2, the label "Create profile" button is disabled for images that lack the recommend accelerators annotation. This is not possible in PF.

Aspects continued elsewhere

No response

Mocks

No mocks

[Gkrumbach07]

@yannnz I ran into this last week. Context for the problem is in the issue description

[yannnz]

Hi Gage, is it possible to use the compact filled grey label with icon to visually fake the disabled clickable label? PF compact filled label @Gkrumbach07

[Gkrumbach07]

Here is what it looks like @yannnz

[yannnz]

Here is what it looks like @yannnz

Hmmm, is it possible to change the color of the icon and text to grey too?

[Gkrumbach07]

@yannnz that is the patternfly grey. The other option is to manually set the css, but we should avoid doing that if possible

[yannnz]

@yannnz that is the patternfly grey. The other option is to manually set the css, but we should avoid doing that if possible

I see. I checked with the PF team today, here is the suggestion of how to disable the editable label and what are the limitation of the approach: https://patternfly.slack.com/archives/C293LQ36J/p1699429646350539

If it is not a good approach from the development perspective, I think it is fine to just leave it as black at least the user will see the label and the tooltip to understand how to enable that function. WDYT @Gkrumbach07

[Gkrumbach07]

I see. I checked with the PF team today, here is the suggestion of how to disable the editable label and what are the limitation of the approach: https://patternfly.slack.com/archives/C293LQ36J/p1699429646350539

This is a PF5 solution and even then it is not perfect. disabling doesnt seem to change the color at all. I think the problem is that labels are not meant to be used as buttons. They can be external links, or can be edited, but not as a button

@yannnz

[yannnz]

I see. I checked with the PF team today, here is the suggestion of how to disable the editable label and what are the limitation of the approach: https://patternfly.slack.com/archives/C293LQ36J/p1699429646350539

This is a PF5 solution and even then it is not perfect. disabling doesnt seem to change the color at all. I think the problem is that labels are not meant to be used as buttons. They can be external links, or can be edited, but not as a button

@yannnz

Eric replied and said he can help on the disabling style with PF V4.: https://patternfly.slack.com/archives/C293LQ36J/p1699464992885189?thread_ts=1699429646.350539&cid=C293LQ36J
Would it help the issue we have here? In the PF doc, the Label can be used to trigger a modal or dropdown, though it is a different use case as we have here to navigate to a different page: https://v4-archive.patternfly.org/v4/components/label-group/react-demos#editable-labels-with-add-modal

@Gkrumbach07

[Gkrumbach07]

We landed on this UX