From 863aea11410f0fc4de7770a4c24f07ca64d4dcaa Mon Sep 17 00:00:00 2001 From: marloelilongley Date: Thu, 26 Oct 2023 17:56:29 -0400 Subject: [PATCH 01/13] Run CI tests when making PRs against the mui5 branch --- .github/workflows/node.js.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 311f5aa35..51c6ea798 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -7,7 +7,7 @@ on: push: branches: [ master ] pull_request: - branches: [ master ] + branches: [ master, mui5 ] jobs: build: From 63a841923d55287e269ea41b93a567f220e63296 Mon Sep 17 00:00:00 2001 From: Benjamin Armintor Date: Thu, 26 Oct 2023 17:32:08 -0400 Subject: [PATCH 02/13] selected Thumbnails have class 'selected' --- src/components/GalleryViewThumbnail.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/GalleryViewThumbnail.js b/src/components/GalleryViewThumbnail.js index 1dbd6e828..cf31154b9 100644 --- a/src/components/GalleryViewThumbnail.js +++ b/src/components/GalleryViewThumbnail.js @@ -122,6 +122,7 @@ export class GalleryViewThumbnail extends Component { Date: Thu, 26 Oct 2023 17:42:14 -0400 Subject: [PATCH 03/13] ManifestListItem component sets selected from active prop, has class 'active' when selected --- __tests__/src/components/ManifestListItem.test.js | 9 +++++++-- src/components/ManifestListItem.js | 4 ++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/__tests__/src/components/ManifestListItem.test.js b/__tests__/src/components/ManifestListItem.test.js index eeba7e6c9..bd444de91 100644 --- a/__tests__/src/components/ManifestListItem.test.js +++ b/__tests__/src/components/ManifestListItem.test.js @@ -23,12 +23,17 @@ describe('ManifestListItem', () => { createWrapper({ buttonRef: 'ref' }); expect(screen.getByRole('listitem')).toHaveAttribute('data-manifestid', 'http://example.com'); + expect(screen.getByRole('listitem')).toHaveClass('MuiListItem-root'); expect(screen.getByRole('button')).toHaveTextContent('xyz'); }); - it('properly interprets active in the DOM', () => { - createWrapper({ active: true }); + it('adds a class when the item is active', () => { + createWrapper({ active: true, classes: { active: 'active' } }); + // If this is true, we can assume the proper styling classes are being applied expect(screen.getByRole('listitem')).toHaveAttribute('data-active', 'true'); + + expect(screen.getByRole('listitem')).toHaveClass('active'); + expect(screen.getByRole('listitem')).toHaveClass('Mui-selected'); }); it('renders a placeholder element until real data is available', () => { const { container } = createWrapper({ ready: false }); diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js index f93607315..4256765d8 100644 --- a/src/components/ManifestListItem.js +++ b/src/components/ManifestListItem.js @@ -99,6 +99,8 @@ export class ManifestListItem extends Component { return ( ({ '&:hover,&:focus-within': { backgroundColor: theme.palette.action.hover, @@ -123,6 +125,8 @@ export class ManifestListItem extends Component { return ( ({ '&:hover,&:focus-within': { backgroundColor: theme.palette.action.hover, From 472caddefe720bde60e0e6652e1b0986b5865946 Mon Sep 17 00:00:00 2001 From: Benjamin Armintor Date: Thu, 26 Oct 2023 18:13:20 -0400 Subject: [PATCH 04/13] SearchHit component ListItems have class 'windowSelected' if inidicated in props --- src/components/SearchHit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SearchHit.js b/src/components/SearchHit.js index 1b96d21b2..a8f4aad8a 100644 --- a/src/components/SearchHit.js +++ b/src/components/SearchHit.js @@ -101,6 +101,7 @@ export class SearchHit extends Component { scrollTo={windowSelected && !focused} > Date: Thu, 26 Oct 2023 18:31:47 -0400 Subject: [PATCH 05/13] CompanionArea component uses namespaced position class and includes configured area layout from props --- src/components/CompanionArea.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js index 638cd209d..f1df3b45b 100644 --- a/src/components/CompanionArea.js +++ b/src/components/CompanionArea.js @@ -39,6 +39,13 @@ const StyledToggleButton = styled(MiradorMenuButton)({ /** */ export class CompanionArea extends Component { + /** */ + areaLayoutClass() { + const { classes, position } = this.props; + + return (position === 'bottom' || position === 'far-bottom') ? classes.horizontal : null; + } + /** */ collapseIcon() { const { companionAreaOpen, direction } = this.props; @@ -75,7 +82,7 @@ export class CompanionArea extends Component { companionWindowIds, companionAreaOpen, setCompanionAreaOpen, position, sideBarOpen, t, windowId, } = this.props; - + const className = [this.areaLayoutClass(), ns(`companion-area-${position}`)].join(' '); return ( {}, sideBarOpen: false, }; From 359570c0a7be47832e8f7015d79234961ed13e69 Mon Sep 17 00:00:00 2001 From: Benjamin Armintor Date: Thu, 26 Oct 2023 18:53:45 -0400 Subject: [PATCH 06/13] CompanionWindow component renders layout and size classes configured in pros --- src/components/CompanionWindow.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js index d0bbdb462..0f4cca214 100644 --- a/src/components/CompanionWindow.js +++ b/src/components/CompanionWindow.js @@ -91,7 +91,7 @@ export class CompanionWindow extends Component { */ render() { const { - ariaLabel, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed, + ariaLabel, classes, paperClassName, onCloseClick, updateCompanionWindow, isDisplayed, position, t, title, children, titleControls, size, defaultSidebarPanelWidth, defaultSidebarPanelHeight, } = this.props; @@ -135,7 +135,7 @@ export class CompanionWindow extends Component { display: isDisplayed ? null : 'none', order: position === 'left' ? -1 : null, }} - className={[ns(`companion-window-${position}`), paperClassName].join(' ')} + className={[ns(`companion-window-${position}`), paperClassName, position === 'bottom' ? classes.horizontal : classes.vertical].join(' ')} square component="aside" aria-label={ariaLabel || title} @@ -161,7 +161,7 @@ export class CompanionWindow extends Component { minHeight: 'max-content', paddingLeft: 2, }} - className={ns('companion-window-header')} + className={[ns('companion-window-header'), size.width < 370 ? classes.small : null].join(' ')} disableGutters > Date: Thu, 26 Oct 2023 18:58:55 -0400 Subject: [PATCH 07/13] SanitizedHtml component renders root class configured in props --- src/components/SanitizedHtml.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/SanitizedHtml.js b/src/components/SanitizedHtml.js index f7f6180c4..01f12c507 100644 --- a/src/components/SanitizedHtml.js +++ b/src/components/SanitizedHtml.js @@ -14,7 +14,7 @@ export class SanitizedHtml extends Component { */ render() { const { - htmlString, ruleSet, ...props + classes, htmlString, ruleSet, ...props } = this.props; // Add a hook to make all links open a new window @@ -35,7 +35,7 @@ export class SanitizedHtml extends Component { textDecoration: 'underline', }, }} - className={[ns('third-party-html')].join(' ')} + className={[ns('third-party-html'), classes.root].join(' ')} dangerouslySetInnerHTML={{ // eslint-disable-line react/no-danger __html: DOMPurify.sanitize(htmlString, htmlRules[ruleSet]), }} @@ -46,6 +46,11 @@ export class SanitizedHtml extends Component { } SanitizedHtml.propTypes = { + classes: PropTypes.objectOf(PropTypes.string), htmlString: PropTypes.string.isRequired, ruleSet: PropTypes.string.isRequired, }; + +SanitizedHtml.defaultProps = { + classes: {}, +}; From a6473fecdc2c0da54245c2f1ecd4018d0eba3ce2 Mon Sep 17 00:00:00 2001 From: Benjamin Armintor Date: Thu, 26 Oct 2023 23:51:20 -0400 Subject: [PATCH 08/13] ScrollIndicatedDialogContent component renders configured shadowScrollDialog class if given in props --- src/components/ScrollIndicatedDialogContent.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/ScrollIndicatedDialogContent.js b/src/components/ScrollIndicatedDialogContent.js index 69fed57fe..b05d29be3 100644 --- a/src/components/ScrollIndicatedDialogContent.js +++ b/src/components/ScrollIndicatedDialogContent.js @@ -6,7 +6,8 @@ import DialogContent from '@mui/material/DialogContent'; * to indicate there is scrollable content */ export function ScrollIndicatedDialogContent(props) { - const { className, ...otherProps } = props; + const { classes, className, ...otherProps } = props; + const ourClassName = [className, classes.shadowScrollDialog].join(' '); return ( ); } ScrollIndicatedDialogContent.propTypes = { + classes: PropTypes.shape({ + shadowScrollDialog: PropTypes.string, + }), className: PropTypes.string, }; ScrollIndicatedDialogContent.defaultProps = { + classes: {}, className: '', }; From 179b227d8bfd86c4c6338c0d6dee52dc4592318a Mon Sep 17 00:00:00 2001 From: Benjamin Armintor Date: Fri, 27 Oct 2023 00:33:49 -0400 Subject: [PATCH 09/13] WindowSideBar component renders configured drawer class name from props if configured --- src/components/WindowSideBar.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/WindowSideBar.js b/src/components/WindowSideBar.js index eee9135f9..87e8d1ef2 100644 --- a/src/components/WindowSideBar.js +++ b/src/components/WindowSideBar.js @@ -13,12 +13,13 @@ export class WindowSideBar extends Component { */ render() { const { - direction, t, windowId, sideBarOpen, + classes, direction, t, windowId, sideBarOpen, } = this.props; return ( ({ flexShrink: 0, height: '100%', @@ -48,6 +49,7 @@ export class WindowSideBar extends Component { } WindowSideBar.propTypes = { + classes: PropTypes.objectOf(PropTypes.string), direction: PropTypes.string.isRequired, sideBarOpen: PropTypes.bool, t: PropTypes.func.isRequired, @@ -55,5 +57,6 @@ WindowSideBar.propTypes = { }; WindowSideBar.defaultProps = { + classes: {}, sideBarOpen: false, }; From 83665968adf8a9fa7db3584cb16a21c396cb7da5 Mon Sep 17 00:00:00 2001 From: Benjamin Armintor Date: Fri, 27 Oct 2023 08:17:37 -0400 Subject: [PATCH 10/13] ZoomControls renders divider with configured className from props if given --- src/components/ZoomControls.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js index f533c96f0..041fcbf45 100644 --- a/src/components/ZoomControls.js +++ b/src/components/ZoomControls.js @@ -61,10 +61,10 @@ export class ZoomControls extends Component { * @returns {Box | null} */ renderDivider() { - const { displayDivider } = this.props; + const { classes, displayDivider } = this.props; if (displayDivider) { - return ; + return ; } return null; @@ -103,6 +103,7 @@ export class ZoomControls extends Component { } ZoomControls.propTypes = { + classes: PropTypes.objectOf(PropTypes.string), displayDivider: PropTypes.bool, showZoomControls: PropTypes.bool, t: PropTypes.func, @@ -117,6 +118,7 @@ ZoomControls.propTypes = { }; ZoomControls.defaultProps = { + classes: {}, displayDivider: true, showZoomControls: false, t: key => key, From df393885d8740afe1c53327935bc63b3054fccb9 Mon Sep 17 00:00:00 2001 From: Benjamin Armintor Date: Fri, 27 Oct 2023 08:53:10 -0400 Subject: [PATCH 11/13] WindowTopMenuButton renders configured ctrlBtnSelected from props on open windows if configured --- src/components/WindowTopMenuButton.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/WindowTopMenuButton.js b/src/components/WindowTopMenuButton.js index b3b6679fc..4618bdb4a 100644 --- a/src/components/WindowTopMenuButton.js +++ b/src/components/WindowTopMenuButton.js @@ -49,7 +49,7 @@ export class WindowTopMenuButton extends Component { */ render() { const { - t, windowId, + classes, t, windowId, } = this.props; const { open, anchorEl } = this.state; const menuId = `window-menu_${windowId}`; @@ -59,6 +59,7 @@ export class WindowTopMenuButton extends Component { aria-haspopup="true" aria-label={t('windowMenu')} aria-owns={open ? menuId : undefined} + className={open ? classes.ctrlBtnSelected : undefined} sx={{ margin: 1, ...(open && { @@ -82,10 +83,12 @@ export class WindowTopMenuButton extends Component { } WindowTopMenuButton.propTypes = { + classes: PropTypes.objectOf(PropTypes.string), t: PropTypes.func, windowId: PropTypes.string.isRequired, }; WindowTopMenuButton.defaultProps = { + classes: {}, t: key => key, }; From aa828e5f50138e94185126b40a03260154fb229a Mon Sep 17 00:00:00 2001 From: Benjamin Armintor Date: Fri, 27 Oct 2023 09:01:20 -0400 Subject: [PATCH 12/13] WorkspaceElasticWindow renders configured focused className if given and element is focused --- src/components/WorkspaceElasticWindow.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/WorkspaceElasticWindow.js b/src/components/WorkspaceElasticWindow.js index 90dea640f..dea8c87b6 100644 --- a/src/components/WorkspaceElasticWindow.js +++ b/src/components/WorkspaceElasticWindow.js @@ -19,6 +19,7 @@ class WorkspaceElasticWindow extends Component { */ render() { const { + classes, companionWindowDimensions, focused, focusWindow, @@ -33,6 +34,7 @@ class WorkspaceElasticWindow extends Component { return ( {}, From 072702b587914fd70ddd0adc7dc964cd4a8fc27a Mon Sep 17 00:00:00 2001 From: Benjamin Armintor Date: Fri, 27 Oct 2023 11:28:26 -0400 Subject: [PATCH 13/13] remove cn and use namespaced class on Window component --- src/components/Window.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Window.js b/src/components/Window.js index 6f04306ea..7f1c22fe7 100644 --- a/src/components/Window.js +++ b/src/components/Window.js @@ -1,7 +1,6 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { styled } from '@mui/material/styles'; -import cn from 'classnames'; import Paper from '@mui/material/Paper'; import { MosaicWindowContext } from 'react-mosaic-component/lib/contextTypes'; import ns from '../config/css-ns'; @@ -134,7 +133,7 @@ export class Window extends Component { zIndex: theme.zIndex.modal - 1, }), })} - className={cn(ns('window'))} + className={ns('window')} aria-label={t('window', { label })} > {this.wrappedTopBar()}