feat(pagination): add props to set size on the "item count" and "page number" select elements

packages/components/src/components/pagination/_pagination.scss

@@ -84,6 +84,35 @@ $css--helpers: true;
     border-left: 1px solid $ui-03;
   }
 
+  .#{$prefix}--select__item-count,
+  .#{$prefix}--select__page-number {
+    position: relative;
+  }
+
+  // Note that `size="1"` is the default.
+  .#{$prefix}--select__item-count
+    .#{$prefix}--select-input:not([size='1']):focus,
+  .#{$prefix}--select__page-number
+    .#{$prefix}--select-input:not([size='1']):focus {
+    position: absolute;
+    height: auto;
+    background-color: $ui-01;
+
+    ~ svg {
+      @include hidden;
+    }
+  }
+
+  .#{$prefix}--select__item-count
+    .#{$prefix}--select-input:not([size='1']):focus {
+    left: 0;
+  }
+
+  .#{$prefix}--select__page-number
+    .#{$prefix}--select-input:not([size='1']):focus {
+    right: 0;
+  }
+
   .#{$prefix}--pagination__left,
   .#{$prefix}--pagination__right {
     display: flex;

packages/react/src/components/Pagination/Pagination-story.js

@@ -39,6 +39,14 @@ const props = () => ({
     'Items per page:'
   ),
   onChange: action('onChange'),
+  itemCountSelectorSize: number(
+    'The `size` attribute of the "items per page" select element (itemCountSelectorSize)',
+    1
+  ),
+  pageNumberSelectorSize: number(
+    'The `size` attribute of the page number select element (pageNumberSelectorSize)',
+    1
+  ),
 });
 
 storiesOf('Pagination', module)

packages/react/src/components/Pagination/Pagination.js

@@ -29,6 +29,8 @@ export default class Pagination extends Component {
       prevPageSizes: pageSizes,
       prevPage: page,
       prevPageSize: pageSize,
+      pageNumberSelectorSize: 1,
+      itemCountSelectorSize: 1,
     };
     this.uniqueId = ++instanceId;
   }
@@ -127,6 +129,16 @@ export default class Pagination extends Component {
      * `true` if the select box to change the page should be disabled.
      */
     pageInputDisabled: PropTypes.bool,
+
+    /**
+     * Optional prop to set the `size` attribute on the "items per page" select element.
+     */
+    itemCountSelectorSize: PropTypes.number,
+
+    /**
+     * Optional prop to set the `size` attribute on the page number select element.
+     */
+    pageNumberSelectorSize: PropTypes.number,
   };
 
   static defaultProps = {
@@ -143,6 +155,8 @@ export default class Pagination extends Component {
     pageInputDisabled: false,
     itemText: (min, max) => `${min}–${max} items`,
     pageText: page => `page ${page}`,
+    itemCountSelectorSize: 1,
+    pageNumberSelectorSize: 1,
   };
 
   static getDerivedStateFromProps({ pageSizes, page, pageSize }, state) {
@@ -236,6 +250,8 @@ export default class Pagination extends Component {
       totalItems,
       onChange, // eslint-disable-line no-unused-vars
       page: pageNumber, // eslint-disable-line no-unused-vars
+      itemCountSelectorSize,
+      pageNumberSelectorSize,
       ...other
     } = this.props;
 
@@ -290,6 +306,9 @@ export default class Pagination extends Component {
             noLabel
             inline
             onChange={this.handleSizeChange}
+            onFocus={() => this.setState({ itemCountSelectorSize })}
+            onBlur={() => this.setState({ itemCountSelectorSize: 1 })}
+            size={this.state.itemCountSelectorSize}
             value={statePageSize}>
             {pageSizes.map(size => (
               <SelectItem key={size} value={size} text={String(size)} />
@@ -317,6 +336,9 @@ export default class Pagination extends Component {
               inline
               hideLabel
               onChange={this.handlePageInputChange}
+              onFocus={() => this.setState({ pageNumberSelectorSize })}
+              onBlur={() => this.setState({ pageNumberSelectorSize: 1 })}
+              size={this.state.pageNumberSelectorSize}
               value={statePage}>
               {selectItems}
             </Select>