Skip to content

Language Switcher: Replace custom Dialog component with the core Modal. #103503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 18, 2025
Merged

Language Switcher: Replace custom Dialog component with the core Modal. #103503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3dd0e8d
Language Switcher: Replace custom Dialog component with the core Modal.
sdnunca May 16, 2025
e1e2d89
Remove superfluous class.
sdnunca May 16, 2025
75dec3e
Remove flex:none.
sdnunca May 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 37 additions & 24 deletions client/components/language-picker/modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,50 @@
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.language-picker__modal-search {
position: relative;
width: 250px;
}

.language-picker__dialog {
&.dialog.card {
width: 90%;
height: 80%;
justify-content: space-between;
}
.language-picker__overlay {
justify-content: center;
}

.dialog__content {
flex: 1 1 auto;
.language-picker__modal {
max-width:80%;
min-width: 80%;
@media (max-width: $break-mobile) {
max-width: 90%;
min-width: 90%;
}
.components-modal__header {
display:none;
}

.dialog__action-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
margin: 0;
padding: 0;
// prevent buttons div from covering language options
margin-top: 1.5rem;

.components-button {
margin-left: 1rem;
.components-modal__content {
padding: 24px 0 0 0;
margin-top: 24px;
display:flex;
/* Targeting the content div, we can't alter the HTML of the modal itself */
>div:nth-child(2) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What are we targeting with this? Can we add a comment, or is there another way to be more explicit/clear? 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added a comment, unfortunately, there's no easy way to add a class to the Modal HTML structure.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Heya. Replied below - #103503 (comment)
Let me know if you'll be confirming that, otherwise happy to explore further myself. :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, I'm currently addressing the reported issues.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good. Happy to review any additional changes.

Copy link
Contributor

@chriskmnds chriskmnds May 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general, I think the more we can avoid referencing internal structures of external components, the better. These may change, even the core class names may change e.g. components-modal__content.

In this case, it looks we can achieve the same effect by wrapping the content we pass to the modal and target that instead, e.g.

<div className="language-picker__modal-content">
    <LanguagePicker
        headingTitle={ __( 'Select a language' ) }
        languages={ languages }
        languageGroups={ createLanguageGroups( __ ) }
        onSelectLanguage={ setSelectedLanguage }
        selectedLanguage={ selectedLanguage }
        localizedLanguageNames={ localizedLanguageNames }
    />
    <div>{ buttons }</div>
</div>

Targeting language-picker__modal-content would be safe(r).

But pls confirm. I only briefly tested.

We can drill into the need to even reference components-modal__content separately. That may be able to go away too.

height: 100%;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does height: 100% have any actual effect right now?

Sorry for my questions. CSS is not trivial to maintain.

display: flex;
flex-direction: column;
}
}

.language-picker-component .language-picker-component__heading {
margin: 6px 0 24px;
.components-flex-block {
flex:none;
}
.language-picker-component {
overflow-y: auto;
padding:0 24px;
.language-picker-component__heading {
margin: 6px 0 24px;
}
.components-flex {
flex:initial;
}
}
}
}

Expand Down
62 changes: 32 additions & 30 deletions client/components/language-picker/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Dialog, FormLabel, MaterialIcon } from '@automattic/components';
import { FormLabel, MaterialIcon } from '@automattic/components';
import { isDefaultLocale, isTranslatedIncompletely } from '@automattic/i18n-utils';
import LanguagePicker, { createLanguageGroups } from '@automattic/language-picker';
import { Button } from '@wordpress/components';
import { Modal, Button } from '@wordpress/components';
import { sprintf } from '@wordpress/i18n';
import { useI18n } from '@wordpress/react-i18n';
import { useState } from 'react';
Expand Down Expand Up @@ -169,35 +169,36 @@ const LanguagePickerModal: React.FC< Props > = ( {
</div>
) : null;

const buttons = [
<>{ checkboxes }</>,
<div className="language-picker__modal-buttons">
<Button variant="link" onClick={ onClose }>
{ __( 'Cancel' ) }
</Button>
<Button
variant="secondary"
onClick={ () => {
onClose();
if ( selectedLanguage ) {
onSelectLanguage( selectedLanguage, {
empathyMode,
useFallbackForIncompleteLanguages,
} );
}
} }
>
{ __( 'Apply Changes' ) }
</Button>
</div>,
];
const buttons = (
<>
<>{ checkboxes }</>
<div className="language-picker__modal-buttons">
<Button variant="link" onClick={ onClose }>
{ __( 'Cancel' ) }
</Button>
<Button
variant="secondary"
onClick={ () => {
onClose();
if ( selectedLanguage ) {
onSelectLanguage( selectedLanguage, {
empathyMode,
useFallbackForIncompleteLanguages,
} );
}
} }
>
{ __( 'Apply Changes' ) }
</Button>
</div>
</>
);

return (
<Dialog
isVisible
onClose={ onClose }
buttons={ buttons }
additionalClassNames="language-picker__dialog"
<Modal
onRequestClose={ onClose }
className="language-picker__modal"
overlayClassName="language-picker__overlay"
>
<QueryLanguageNames />
<LanguagePicker
Expand All @@ -208,7 +209,8 @@ const LanguagePickerModal: React.FC< Props > = ( {
selectedLanguage={ selectedLanguage }
localizedLanguageNames={ localizedLanguageNames }
/>
</Dialog>
<div>{ buttons }</div>
</Modal>
);
};

Expand Down
Loading