variety of issues after update to version 3.1.0

[piotretm]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

There is a list of issues I've found while migrating to the newest version of the IX. Code to reproduce the issues is available here.

• Checkbox
• would be great to have an option to set label position
• * is missing for the label on <ix-checkbox> also, the label is not in red when invalid (only the group label is marked)
• Validation
• as far as I've checked only the ix-input exposes the getValidityState method. For sure it is missing for textarea or number inputs
• would it be possible to implement a method to validate input/trigger validity state change in case I change the value programmatically?
• Textarea
• textarea-rows does not work
• textarea-width has issues with % - 100% is not taking the full width
• Icons (I hope this is fine that I put it here, but if not, I can also create a separate issue in ix/icons)
• I modify all the keys imported from import * as Icons from '@siemens/ix-icons/icons'; to icons names using lodash kebabCase. This translates CamDisk10k to cam-disk-10-k while you have cam-disk-10k or PIDiagram to pi-diagram while you have p-i-diagram. Could you expose a list of names directly or a method that you use to transform the keys to names?
• it is not possible to use icon rotate-180 (failed request in the console)
• icons are missing in your documentation
• using custom SVGs not always works. I think this is related to the fact that you directly use decodeURI without encodeURI first and if the SVG includes special characters like % it failed. For me the issue is an SVG with a code like that ...<filter x="-63.3%" y="-63.3%" width="226.5%" height="226.5%" filterUnits="objectBoundingBox" id="gblur"> ... </filter>... If I remove the attributes with % it works.
• Number input
• empty input returns 0 (I think it should return null/undefined if there is no value)
• Select
• aria-label for dropdown and clear buttons is set to Unknown
• Imports
• I am not able anymore to import ToastPosition (previously available in @siemens/ix/dist/types/components/toast/toast-utils) and TypedEvent from @siemens/ix/dist/types/components/utils/typed-event. Could you please export those types again?

What type of frontend framework are you seeing the problem on?

JavaScript

Which version of iX do you use?

v3.1.0

Code to produce this issue.

https://stackblitz.com/edit/wkqwmnnq?file=src%2Findex.html

[nuke-ellington]

Hi @piotretm,

Thanks for the feedback 🙏

Some notes:

• ix-checkbox:
  • Label position: please explain how and why you want to change this ❓
  • Missing asterisk and status color: this is intentional - please explain why it does not suit your use case ❓
• getValidityState: Ticket created ✅
• programmatic validation: please explain your use case ❓
• ix-textarea: Ticket created ✅
• Icon kebab case: Ticket created ✅
• Icon rotate-180: Ticket created. Temporary workaround: addIcons({ iconRotate, 'rotate-180': iconRotate180 }); ✅
• Icons missing in documentation: already work in progress ✅
• Custom SVGs: Ticket created ✅
• ix-number-input empty value: Ticket created ✅
• ix-select ARIA labels: already work in progress ✅
• ToastPosition/TypedEvent: please use import { ToastPosition, TypedEvent } from "@siemens/ix";
  If that does not work for you please create a separate ticket ✅

[github-actions]

🤖 Hello @piotretm

Your issue will be analyzed and is part of our internal workflow.
To get informed about our workflow please checkout the Contributing Guidelines

JIRA:
IX-2871
IX-2886
IX-2892
IX-2893
IX-2894
IX-2895

[piotretm]

Hi @nuke-ellington,
thanks for the response. Regarding your questions:

• ix-checkbox - we simply have usecases where the label should be at the top or on the right side of the checkbox. Currently, I interchangeably use either the ix-checkbox or ix-checkbox-group as one has the label on the right and the other on the top. This is not perfect because they look a bit different and also the required indicator is missing
• validation - we have custom form inputs that we are building based on your components. One example would be a range input, which is basically 2 number inputs. If I change one I also want to validate the other one (for instance to check if min is not greater than max). If I think of it now maybe just getValidityState would be enough in our case. I hope it gives you an idea of what we want to achieve, so maybe you also have some suggestions.

Thanks
Piotr

[kathrinschalber]

Hi @piotretm,

I'm a UX Designer from the Siemens Industrial Experience team. Regarding the required indicator, we've added this to our backlog and will address it in a future release.

Regarding checkbox label positioning: We follow the conventional pattern of right-side labels, as it follows standard checkbox behavior across most interfaces. I'd love to better understand your specific use cases for flexibly position checkbox and checkbox group labels. Could you share a concrete example of your form layout and the type of content you're using?

This would help us evaluate if we need to extend our implementation or if there might be better alternatives that could better serve your needs.

Looking forward to your insights!

Best regards,
Kathrin

[piotretm]

Hi @kathrinschalber,

Thanks for your answer :). So we mostly use right-side labels, and this is fine. However, there are cases where we want to have a label at the top. For instance:

This way it is easier to align the items nicely, and we can save a bit of space to the side.

I've prepared a quick demo on stackblitz. If you remove the label from the ix-checkbox-group, you can see that the inputs aren't aligned nicely anymore.

Hopefully, this clarifies our case. Please let me know. We might be misusing the label, or something else is incorrect. I would appreciate any feedback.

[kathrinschalber]

Hi @piotretm,

many thanks for providing your examples, including the screenshot and the stackblitz! Indeed, for both shown examples we recommend using a checkbox's label like this:

You can vertically align the checkbox e.g. by using vertical padding.

Best,
Kathrin

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[h4de5]

bump