@openedx/paragon 22.15.0 → 22.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.15.0",
+  "version": "22.15.2",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/DataTable/TablePagination.jsx

@@ -1,8 +1,12 @@
 import React, { useContext } from 'react';
+import { useIntl } from 'react-intl';
 import DataTableContext from './DataTableContext';
 import Pagination from '../Pagination';
+import messages from './messages';
 
 function TablePagination() {
+  const intl = useIntl();
+
   const {
     pageCount, state, gotoPage,
   } = useContext(DataTableContext);
@@ -19,6 +23,7 @@ function TablePagination() {
       currentPage={pageIndex + 1}
       onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
       pageCount={pageCount}
+      paginationLabel={intl.formatMessage(messages.paginationLabel)}
       icons={{
         leftIcon: null,
         rightIcon: null,

package/src/DataTable/TablePaginationMinimal.jsx

@@ -1,9 +1,13 @@
 import React, { useContext } from 'react';
+import { useIntl } from 'react-intl';
 import DataTableContext from './DataTableContext';
 import Pagination from '../Pagination';
 import { ArrowBackIos, ArrowForwardIos } from '../../icons';
+import messages from './messages';
 
 function TablePaginationMinimal() {
+  const intl = useIntl();
+
   const {
     nextPage, pageCount, gotoPage, state,
   } = useContext(DataTableContext);
@@ -20,7 +24,7 @@ function TablePaginationMinimal() {
       variant="minimal"
       currentPage={pageIndex + 1}
       pageCount={pageCount}
-      paginationLabel="table pagination"
+      paginationLabel={intl.formatMessage(messages.paginationLabel)}
       onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
       icons={{
         leftIcon: ArrowBackIos,

package/src/DataTable/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  paginationLabel: {
+    id: 'pgn.DataTable.paginationLabel',
+    defaultMessage: 'table pagination',
+    description: 'Accessibile name for the navigation element of a pagination component',
+  },
+});
+
+export default messages;

package/src/DataTable/tests/TableFooter.test.jsx

@@ -32,7 +32,11 @@ describe('<TableFooter />', () => {
   it('Renders the default footer', () => {
     render(<TableFooterWrapper />);
     expect(screen.getByTestId('row-status')).toBeInTheDocument();
-    expect(screen.getByLabelText('table pagination')).toBeInTheDocument();
+
+    // The TableFooter contains two components that have the aria-label
+    // "table pagination" - DataTable and DataTableMinimal.
+    const tables = screen.getAllByLabelText('table pagination');
+    tables.forEach(table => expect(table).toBeInTheDocument());
   });
 
   it('accepts a class name', () => {

package/src/DataTable/tests/TablePagination.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, act, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
 import userEvent from '@testing-library/user-event';
 
 import TablePagination from '../TablePagination';
@@ -14,9 +15,11 @@ const instance = {
 // eslint-disable-next-line react/prop-types
 function PaginationWrapper({ value }) {
   return (
-    <DataTableContext.Provider value={value}>
-      <TablePagination />
-    </DataTableContext.Provider>
+    <IntlProvider>
+      <DataTableContext.Provider value={value}>
+        <TablePagination />
+      </DataTableContext.Provider>
+    </IntlProvider>
   );
 }
 

package/src/Form/_index.scss

@@ -380,6 +380,7 @@ select.form-control {
   appearance: none;
   height: $custom-control-indicator-size;
   width: $custom-control-indicator-size;
+  min-width: $custom-control-indicator-size;
   background-color: $custom-control-indicator-bg;
   border: solid $custom-control-indicator-border-width $custom-control-indicator-border-color;
   border-radius: $custom-checkbox-indicator-border-radius;
@@ -437,6 +438,7 @@ select.form-control {
 
 .pgn__form-switch-input {
   width: $custom-switch-width;
+  min-width: $custom-switch-width;
   border-radius: $custom-switch-indicator-border-radius;
   background-image: escape-svg($custom-switch-indicator-icon-off);
   background-position: left center;