Calcite-components: Bug: Calcite label disabled state

[joeyHarig]

Summary

The calcite-label component wraps the calcite-input and calcite-input-message components. The calcite-label can now be set to disabled, which communicates the disabled property to the children (input and message). There are 2 issues when the label is set to disabled:

1 - The disabled calcite-label has opacity: 0.4;. Because the child calcite-input has the property of disabled, it has a lighter border than an enabled input. The 0.4 opacity makes the disabled input field nearly invisible. I think it's important to show the input in a disabled state, not completely hide it.

2 - The disabled property on the calcite-label gives the calcite-input-message an opacity of 1, making the message visible. The active property on the calcite-input-message is also ignored, so the message can't be set to inactive. As show in the first image, the calcite-input-message is visible when it should not be.

[paulcpederson]

@joeyHarig I am looking into this a bit, and there seems to already be some code in here trying to prevent the opacity stacking. Would you mind posting the markup for the above example so I can make sure it works (and fix if not)?

[joeyHarig]

@paulcpederson, Here is my markup for the disabled input shown in the screen shot of the form.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kat10140]

@paulcpederson can this be closed?

[caripizza]

Hi @joeyHarig and/or @paulcpederson just checking in - what's the current status of this issue?

[paulcpederson]

I fixed 2. from the original post, but never verified that 1. was an issue or not. Basically put a disabled input inside a disabled label and make sure it's not too transparent

[caripizza]

Verified 1. - looks to have been fixed in #1417, closing.