search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 763 forks source link

UI regression: Pagination with "Editable pagination number" has unstyled input (in @cds/core@5.5.8 and up) #6646

Closed thojo closed 2 years ago

thojo commented 2 years ago

Describe the bug

The Editable pagination number example of the Pagination component from docs/Storybook lost its styles for the pagination number input (with v5.5.8+?).

It's caused by #6377, which also affects cds-input with a size attribute, not only cds-select. But perhaps it was intention?

How to reproduce

Steps to reproduce the behavior:

  1. Go to https://clarity.design/storybook/core/?path=/story/stories-pagination--editable-pagination-number
  2. See the unstyled pagination number input.

Expected behavior

The pagination number input should be styled correctly even with a size attribute (because the attribute is more convenient to adjust the input width for the expected input length than to style it with css).

Versions

Clarity project:

Clarity version:

Framework:

Framework version: Angular 11 and 12

Device:

Additional notes

I know the component is in preview.

A workaround is to remove the size attribute and use CSS to limit the width of the input, which actually only(?) works by setting max-width on the native <input>.

If this ist "by design" the docs/Storybook should be updated to show a styled pagination number input.

github-actions[bot] commented 1 year ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.