fix(blind): provided ellipsis for blind header

[ridvandmrc]

💡 What is the current behavior?

If a long label is used, Ellipsis is not looking .

GitHub Issue Number: #1165

🆕 What is the new behavior?

• I removed some css property because it is blocking ellipsis

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

• 🦮 Accessibility (a11y) features were implemented
• 🗺️ Internationalization (i18n) - no hard coded strings
• 📲 Responsiveness - components handle viewport changes and content overflow gracefully
• 📄 Documentation was reviewed/updated (yarn docs)
• 🧪 Unit tests were added/updated and pass (yarn test)
• 📸 Visual regression tests were added/updated and pass (yarn visual-regression)
• 🧐 Static code analysis passes (yarn lint)
• 🏗️ Successful compilation (yarn build, changes pushed)

👨‍💻 Help & support

[changeset-bot]

🦋 Changeset detected

Latest commit: caba100

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@siemens/ix	Patch
@siemens/ix-angular	Patch
@siemens/ix-react	Patch
@siemens/ix-vue	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[danielleroux]

@ridvandmrc Looks like there are some errors in our visual testing environment.

You find a html test report on your Pull Request-Workflow e.g https://github.com/siemens/ix/actions/runs/8392413573, scroll down to the bottom and check the file core-html-report--attempt-1 to view the report.

To get some information about visual testing checkout our short guide: https://github.com/siemens/ix/blob/main/CONTRIBUTING.md#visual-regression-testing

[ridvandmrc]

Hi @danielleroux ,
In order to show the text ellipsis, I had to arrange the width of the content but it is not too much, so I am getting the error. But the changes will not affect anything because the result is:

[danielleroux]

Hi @danielleroux , In order to show the text ellipsis, I had to arrange the width of the content but it is not too much, so I am getting the error. But the changes will not affect anything because the result is:

The sublabel has to be aligned centered within the blind.
This is also not given by the current implementation:

        <ix-blind
          label="Test long long long long long long long 123 456 789"
          sublabel="Sub long long long long long 123 456 789"
          style={{ width: '40rem' }}
        ></ix-blind>

The label text max with should be half of the blind (text content), following by the sublabel. All labels have to be showing ellipses as text overflow style. If you have access you can checkout the figma specs: https://www.figma.com/file/r2nqdNNXXZtPmWuVjIlM1Q/iX-Components---Brand-Dark?node-id=9598%3A189577

Spec:

[ridvandmrc]

Hi @danielleroux ,
I understand what you said, I updated the code and also It is working as expected.

Thanks

[danielleroux]

Hi @danielleroux , I understand what you said, I updated the code and also It is working as expected.

Thanks

Thank you.

As mentioned in the PR template, please add some testcases (visual regression tests) to verify the changes.

[danielleroux]

• Missing visual-regression test cases

[danielleroux]

@ridvandmrc Please checkout the CONTRIBUTING.md. There is a chapter regarding visual tests. You have to run it inside a container.

[nuke-ellington]

Updated margin. Please also delete the "blind-sublabel-" snapshots since they are obsolete.