Skip to content

fix(mwpw-177207): adds visible Sort by: label to sort dropdown #451

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

Open
cmiqueo wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(mwpw-177207): adds visible Sort by: label to sort dropdown #451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 5 additions & 8 deletions less/components/consonant/filters/top/panel.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
&-inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: flex-end;
align-items: flex-start;
max-width: 100%;
}
Expand All @@ -37,7 +37,7 @@
justify-content: flex-end;
align-items: flex-start;
flex-grow: 1;
max-width: calc(~ '100% - ' @consonant-Select-width * 0.85 ~ ' - 8px');
max-width: calc(~ '100% - ' @consonant-Select-width ~ ' - 8px');

&:first-child {
max-width: 100%;
Expand Down Expand Up @@ -157,7 +157,6 @@
&-selectWrapper {
display: flex;
justify-content: flex-end;
width: @consonant-Select-width * 0.85;
margin-right: 8px;
order: -1;
overflow: visible;
Expand Down Expand Up @@ -273,7 +272,6 @@
}

&-selectWrapper {
max-width: @consonant-Select-width;
order: 0;
margin-right: 0;
}
Expand Down Expand Up @@ -316,13 +314,12 @@

&-selectWrapper {
min-width: auto;
max-width: 160px;
margin-right: 0;
margin-left: 0;

& > div:first-child > button {
padding-left: 12px;
padding-right: 12px;
// padding-left: 12px;
Copy link
Copy Markdown
Collaborator

@raissanjay raissanjay May 13, 2026

Choose a reason for hiding this comment

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

Worth deleting outright rather than leaving it comented out. Lints will skip it but the next person edting this rule will wonder whether 12px was meant tocome back. If the intent is to preserve the originalvalue for reference, a one-line comment above explaiing why (e.g. "intentionally no left padding, label its to the left") would carry more signal than the lteral old line.

padding-right: 24px;
border: 1px solid @consonantLightGrey200;
border-radius: 4px;
}
Expand All @@ -331,7 +328,7 @@

& > div:first-child {
&:after {
right: 12px;
right: 4px;
}
}
}
Expand Down
29 changes: 27 additions & 2 deletions less/components/consonant/select.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,8 +134,8 @@
margin-bottom: 0;

&:after {
width: 4px;
height: 4px;
width: 6px;
height: 6px;
border-color: @consonantDarkGrey400;
}
}
Expand All @@ -148,6 +148,31 @@
max-width: 100%;
}

&.sort-by-Select {
display: flex;
width: auto;
justify-content: flex-end;
align-items: baseline;

label {
font-size: 13px;
width: auto;
padding-top: 2px;
text-align: right;
white-space: nowrap;
}

.consonant-Select-btn {
max-width: none;
padding-left: 6px;
padding-right: 20px;
}

&:after {
right: 4px;
}
}

@media @consonant-tablet-up {
&--autoWidth {
margin-right: 0;
Expand Down
1 change: 1 addition & 0 deletions react/src/js/components/Consonant/Helpers/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ export const DEFAULT_CONFIG = {
title: '',
onErrorTitle: 'Sorry there was a system error.',
onErrorDescription: 'Please try reloading the page or try coming back to the page another time.',
sortBy: 'Sort by:',
sortByAria: 'Sort by {key}',
removeFilterAria: 'Remove {filter} filter',
removeAllFiltersAria: 'Remove {num} {filter} filters',
Expand Down
5 changes: 4 additions & 1 deletion react/src/js/components/Consonant/Sort/Popup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const Popup = ({
**** Authored Configs ****
*/
const getConfig = useConfig();
const sortBy = getConfig('collection', 'i18n.sortBy');
const sortByAria = getConfig('collection', 'i18n.sortByAria');

/**
Expand Down Expand Up @@ -99,9 +100,11 @@ const Popup = ({

return (
<div
className={shouldAutoWidthSortClass}>
className={`${shouldAutoWidthSortClass} sort-by-Select`}>
<label htmlFor="consonant-Select-btn" data-testid="consonant-Select-label">{sortBy}</label>
<button
data-testid="consonant-Select-btn"
id="consonant-Select-btn"
type="button"
onClick={handleToggle}
className={openButtonClass}
Expand Down
8 changes: 8 additions & 0 deletions react/src/js/components/Consonant/Sort/__tests__/Popup.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@ import { testAccessibility } from '../../Testing/Utils/a11yTest';
const renderSortPopup = setup(Popup, DEFAULT_PROPS);

describe('Consonant/Sort/Popup', () => {
test('Should show sort by label', async () => {
renderSortPopup();
const sortPopLabel = screen.getByTestId('consonant-Select-label');

expect(sortPopLabel).toHaveTextContent('Sort by:');
expect(sortPopLabel).not.toHaveAttribute('aria-label');
Copy link
Copy Markdown
Collaborator

@raissanjay raissanjay May 13, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

The not.toHaveAttribute('aria-label') assertion is the right anti-regression check. Without it, a future patch could easily reintroduce an aria-label thinking it adds value, and screen readers would then announce the same control twice.

});

test('Should show all sort options', async () => {
const { props: { values } } = renderSortPopup();
const sortPopup = screen.getByTestId('consonant-Select-btn');
Expand Down
Loading