Extra arrows on pagination are displaying

jculver1 commented 4 years ago

What package(s) are you using?

[ ] carbon-components
[x ] carbon-components-react

Detailed description

Describe in detail the issue you're having. On the pagination component where it asks 'Items per page' and 'page', there is an extra up and down arrow displaying next to the number, while the original down arrow that should be displayed is over the number indicating the page number or number of objects being displayed. The issue disappears once I use the Chrome developer tools and use the toggle device toolbar. I also tried testing this in Firefox and the down arrow is no longer underneath the numbers (but there's still two dropdown arrows).

Is this issue related to a specific component? pagination component from 'carbon-components-react'

What did you expect to happen? What happened instead? What would you like to see changed?

I would like the component to display what is shown in the Carbon Documentation for Pagination. Right now, there is an extra up/down arrow next to the page and input numbers and the original arrow is underneath the selected number

What browser are you working in? Chrome

What version of the Carbon Design System are you using? "carbon-components": "^10.9.3", "carbon-components-react": "^7.12.0",

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

Step one In a react application, import the Pagination component from 'carbon-components-react'.
Step two Use the example provided by the carbon 10 documentation for pagination. https://www.carbondesignsystem.com/components/pagination/usage/
Step three Run the app in Chrome
etc.

Please create a reduced test case in CodeSandbox https://codesandbox.io/s/thirsty-paper-jik93?file=/src/index.js

Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox

React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

Screenshots or code
Notes

emyarod commented 4 years ago

since it seems this issue does not appear in the component by default, can you edit your code sandbox to replicate the issue you are trying to show?

David-Yuen commented 4 years ago

I am also having the same issue. I am running Windows 10, and I've tested on both Chrome latest (Version 83.0.4103.97 (Official Build) (64-bit)) and Firefox latest (77.0.1 (64-bit)). The SELECT component appears to have 2 down arrows on both browsers.

All our code (React App) is doing is rendering the Pagination component in the render's return:

          <Pagination
            backwardText="Prev Page"
            forwardText="Next Page"
            itemsPerPageText="Items per page"
            onChange={() => {
              console.log("onChange Click");
            }}
            page={1}
            pageInputDisabled={false}
            pageNumberText="Page Number"
            pageSize={2}
            pageSizes={[2, 4, 6, 8]}
            totalItems={20}
          />

Note the below screenshots are for Chrome and Firefox.. and that there's a different issue where the scrollbars are appearing on the Pagination component... well, could be related.

Chrome: chrome

Firefox: firefox

tw15egan commented 4 years ago

@David-Yuen A link to a CodeSandbox that reproduces this issue would help with debugging, as I'm unable to reproduce this issue locally (and I do not see it on https://react.carbondesignsystem.com/?path=/story/pagination--pagination).

Double arrows are usually due to a vendor prefix not being added via something like autoprefixer in your build process.

David-Yuen commented 4 years ago

Additional info: I was talking to Josh about this and he said

Josh Black  21 minutes ago
This may be a case of a missing CSS reset potentially if you are seeing the OS select icon instead of the SVG which we use instead of the OS select chevron

And he's asked how we're importing the carbon styles.. So we generally have 1 master .scss file that imports all carbon styles and also include our partial scss files for each of our components..

@import "../../../node_modules/@carbon/themes/scss/themes.scss";
// Use the gray 10 theme
$carbon--theme: $carbon--theme--g10;
@include carbon--theme();
$feature-flags: (
  ui-shell: true,
  grid-columns-16: true,
);
// Feature flags
$css--font-face: true;
$css--plex: true;
@import "../../../node_modules/carbon-components/scss/globals/scss/styles.scss";

And this lets our component's partial scss files have access to all the carbon variables, like $spacing-05 and etc..

When we build, we are just using webpack (fast-sass-loader > css-loader > MiniCssExtractPlugin) to generate a .css file and it is imported to our page.

David-Yuen commented 4 years ago

@tw15egan I see.. let me try adding the autoprefixer (i didn't add this yet) and i'll report back.

tw15egan commented 4 years ago

I would take a look at adding something like https://github.com/postcss/autoprefixer#webpack to your config

David-Yuen commented 4 years ago

Update: I've added postcss-loader and autoprefixer to our build and it's working. Thanks! this resolves the issue

tw15egan commented 4 years ago

Going to close this as I would assume the original issue can be resolved in the same way 👍

carbon-design-system / carbon