[Bug]: Pagination shows redundant information when pagesUnknown is set to true.

[Akshat55]

Package

@carbon/react, carbon-components-react

Browser

Chrome, Firefox, Edge

Package version

v1.14

Description

In pagination component, when pagesUnknown prop has been set to true, the page number is shown twice.

e.g.
1 page 1
If I change the page number via select, the page number also updates as such:
2 page 2
3 page 3
...etc,

The first number is the page option selected from the select element. Then the same information is repeated in the following text.
Shouldn't it just be Page <select element with number> [TEXT (SELECT ELEMENT)]? Is there a reason for repeating the page number?

I'm not sure if this counts as a design defect, but this issue was raised in Carbon Angular, just forwarding it here so we know what steps to take.

Screenshots

Steps to reproduce

Go to the following storybook (props have been already set, so no changes required):

https://react.carbondesignsystem.com/?path=/story/components-pagination--default&args=pagesUnknown:true

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tw15egan]

Also posted in #12302

I think this can be fixed just by passing down pageText={() => ''} to the Pagination component as-is. It seems like there is a slight styling issue in this scenario, but can be fixed by just adding the following CSS to _pagination.scss

.#{$prefix}--pagination__right .#{$prefix}--pagination__text:empty {
    margin: 0;
}

[tw15egan]

If we still want to keep the page text, we could modify the pageText default function, but it could still be overridden if anyone is passing in their own translation strings via pageText.

    pageText = (page) => {
      return `page  ${pagesUnknown ? '' : page}`;
    },

We would then add two opposite ternary renders inside pagination__right like so:

Before the Select

        {pagesUnknown ? null : (
          <span className={`${prefix}--pagination__text`}>
            {pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)}
          </span>
        )}

After the Select

{pagesUnknown ? (
          <span className={`${prefix}--pagination__text`}>
            {pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)}
          </span>
        ) : null}

Which gets us.

Would probably need to do some style adjustments as well to get the text inside of the border instead of outside to the left

[61130061]

@tw15egan

Add two opposite ternary renders inside pagination__right work for me.

About border, I already moved border-left from selector to pagination__right div which also work with code you suggested as well.

which gets us.

However, would be better if we use label tag instead of span? which is similar to ItemPerPageText, so user can click on the pageText to focus on the selector.

[61130061]

@tw15egan

Like this.

{pagesUnknown ? (
  <label
    id={`${prefix}-pagination-select-${inputId}-right-label`}
    className={`${prefix}--pagination__text ${prefix}--pagination__page-text`}
    htmlFor={`${prefix}-pagination-select-${inputId}-right`}>
    {pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)}
  </label>
) : null}

Just wonder. If you prefer span, I will go for it.

[tw15egan]

@61130061 I believe we already have a hidden label for the select, so I'd just keep it a span to avoid redundant screenreader text.

Your examples look great 👍🏻

[61130061]

@tw15egan All done! Thanks for your suggestions. 🙏🏻

[hudlow]

I'm confused. How do you populate the items in the select if the number of pages is unknown?