ci(pagination): Fix CI error

Workday · Mar 5, 2020 · 1912cd6 · 1912cd6
1 parent 975a886
commit 1912cd6
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 26 deletions.
diff --git a/modules/_labs/pagination/react/lib/GoTo.tsx b/modules/_labs/pagination/react/lib/GoTo.tsx
@@ -5,11 +5,14 @@ import React from 'react';
 import uuid from 'uuid/v4';
 
 interface GoToProps {
+  /** Will be called when the user submits the form. In this case, it is when the enter key is pressed */
   onSubmit: (page: number) => void;
+  /** Max number of pages we could go to */
   max: number;
-  goToLabel?: string;
+  /** Label for the "Go To" input */
+  label?: string;
 }
-const GoToLabel = styled('label')({
+const StyledLabel = styled('label')({
   margin: 'auto 0',
   paddingRight: '8px',
   ...type.body,
@@ -21,12 +24,11 @@ const GoToWrapper = styled('div')({
   paddingLeft: '12px',
 });
 
-const InputWrapper = styled('form')({
+const StyledForm = styled('form')({
   minWidth: '10px',
 });
 
-const GoTo: React.FC<GoToProps> = props => {
-  const {onSubmit, max, goToLabel = 'Go To'} = props;
+const GoTo = ({onSubmit, max, label = 'Go To'}: GoToProps) => {
   const [value, setValue] = React.useState('');
   const [goToId] = React.useState(() => uuid()); // https://codesandbox.io/s/p2ndq
 
@@ -50,8 +52,8 @@ const GoTo: React.FC<GoToProps> = props => {
   };
   return (
     <GoToWrapper>
-      <GoToLabel htmlFor={goToId}>{goToLabel}</GoToLabel>
-      <InputWrapper onSubmit={formSubmit}>
+      <StyledLabel htmlFor={goToId}>{label}</StyledLabel>
+      <StyledForm onSubmit={formSubmit}>
         <TextInput
           width={53}
           height={32}
@@ -64,7 +66,7 @@ const GoTo: React.FC<GoToProps> = props => {
             setValue(e.target.value);
           }}
         />
-      </InputWrapper>
+      </StyledForm>
     </GoToWrapper>
   );
 };

diff --git a/modules/_labs/pagination/react/lib/Pages.tsx b/modules/_labs/pagination/react/lib/Pages.tsx
@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import {css, jsx} from '@emotion/core';
+import range from 'lodash/range';
+import React from 'react';
+
 import type from '@workday/canvas-kit-labs-react-core';
 import {IconButton} from '@workday/canvas-kit-react-button';
 import canvas from '@workday/canvas-kit-react-core';
-import range from 'lodash/range';
-import React from 'react';
 
 interface PagesProps {
   total: number;
@@ -18,6 +19,12 @@ const noPointerEvents = css({
   pointerEvents: 'none',
 });
 
+const ellipsisStyle = css(noPointerEvents, {
+  width: canvas.spacing.l,
+  textAlign: 'center',
+  display: 'inline-block',
+});
+
 const noTransitions = css({
   '&:not(:hover)': {transition: 'none !important'},
 });
@@ -61,9 +68,7 @@ export function getPages(total: number, current: number, isMobile: boolean): [nu
   return [[1], range(total - maxWithSplit + padNumber, total + 1)];
 }
 
-const Pages: React.FC<PagesProps> = props => {
-  const {total, current, onPageClick, isMobile, pageButtonAriaLabel} = props;
-
+const Pages = ({total, current, onPageClick, isMobile, pageButtonAriaLabel}: PagesProps) => {
   const pageToButton = (page: number) => (
     <IconButton
       key={page}
@@ -85,7 +90,7 @@ const Pages: React.FC<PagesProps> = props => {
     right.length === 0
       ? []
       : [
-          <span css={noPointerEvents} key={'ellipsis'} style={type.small}>
+          <span css={ellipsisStyle} key={'ellipsis'} style={type.small}>
             ...
           </span>,
         ];

diff --git a/modules/_labs/pagination/react/lib/Pagination.tsx b/modules/_labs/pagination/react/lib/Pagination.tsx
@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
+import React from 'react';
+
 import {type} from '@workday/canvas-kit-labs-react-core';
 import {IconButton} from '@workday/canvas-kit-react-button';
 import canvas from '@workday/canvas-kit-react-core';
 import {chevronLeftSmallIcon, chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
-import React from 'react';
 
 import GoTo from './GoTo';
 import Pages from './Pages';
@@ -31,13 +32,13 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   previousPageAriaLabel: string;
   /** Customizes the aria label for the Next Page Arrow. */
   nextPageAriaLabel: string;
-  /** Customizes each page button. */
+  /** Customizes the aria-label on each page button. */
   pageButtonAriaLabel: (page: number, selected: boolean) => string;
   /** Optional width to pass to component. This is the width the container deems is available. You can use a measure component to get this. */
   width?: number;
 }
 
-const Label = styled('div')({
+const StyledLabel = styled('div')({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -47,7 +48,7 @@ const Label = styled('div')({
   paddingTop: '12px',
 });
 
-const Container = styled('nav')({
+const StyledContainer = styled('nav')({
   display: 'flex',
   alignItems: 'center',
   flexFlow: 'row wrap',
@@ -56,7 +57,7 @@ const Container = styled('nav')({
 
 const ButtonsContainer = styled('div')({
   '& > * ': {
-    margin: `${0} ${canvas.spacing.xxxs}`,
+    margin: `0 ${canvas.spacing.xxxs}`,
   },
 });
 
@@ -95,7 +96,7 @@ const Pagination = (props: PaginationProps) => {
 
   return (
     <>
-      <Container aria-label={paginationContainerAriaLabel} {...elemProps}>
+      <StyledContainer aria-label={paginationContainerAriaLabel} {...elemProps}>
         <ButtonsContainer>
           <IconButton
             disabled={currentPage - 1 <= 0}
@@ -121,9 +122,9 @@ const Pagination = (props: PaginationProps) => {
             onClick={e => onPageChange(currentPage + 1)}
           />
         </ButtonsContainer>
-        {showGoTo && <GoTo onSubmit={onPageChange} max={numPages} goToLabel={goToLabel} />}
-        {showLabel && <Label>{customLabel(labelFrom, labelTo, total)}</Label>}
-      </Container>
+        {showGoTo && <GoTo onSubmit={onPageChange} max={numPages} label={goToLabel} />}
+        {showLabel && <StyledLabel>{customLabel(labelFrom, labelTo, total)}</StyledLabel>}
+      </StyledContainer>
     </>
   );
 };

diff --git a/modules/_labs/pagination/react/package.json b/modules/_labs/pagination/react/package.json
@@ -39,8 +39,8 @@
     "react": ">= 16.8 < 17"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
+    "@emotion/core": "^10.0.21",
+    "@emotion/styled": "^10.0.17",
     "@workday/canvas-kit-labs-react-core": "^3.4.0",
     "@workday/canvas-kit-react-core": "^3.4.0",
     "@workday/canvas-kit-react-button": "^3.4.0",

diff --git a/modules/core/react/lib/InputProvider.tsx b/modules/core/react/lib/InputProvider.tsx
@@ -239,7 +239,9 @@ export default class InputProvider extends React.Component<InputProviderProps, I
     // `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
     // can only demonstrate potential, but not actual, interaction
     // and are treated separately
-    const options = this.state.supportsPassive ? {passive: true} : false;
+    const options = this.state.supportsPassive
+      ? ({passive: true} as AddEventListenerOptions) // fixes Type '{ passive: boolean; }' has no properties in common with type 'EventListenerOptions'.  TS2345
+      : false;
 
     const fn = enable ? window.addEventListener : window.removeEventListener;