fix: (multi-select) allow multiple multi-selects on same page #930
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ts on the same page
chrispymm
approved these changes
Nov 22, 2024
|
I don't have write access - could you please merge @chrispymm ? |
chrispymm
merged commit 457265f
into
ministryofjustice:add-interruption-card
19 checks passed
chrispymm
pushed a commit
that referenced
this pull request
Dec 10, 2024
…ts on the same page (#930)
chrispymm
added a commit
that referenced
this pull request
Dec 10, 2024
* feat(interruption card): add interruption card component add in the macro template and styles for the interruption card component. Based on the component in use in HMPPS seen here: https://github.com/ministryofjustice/hmpps-book-a-prison-visit-ui/pull/156/files with changes made according to decisions based upon research and discovery. * feat(interruption card): adjust padding and add border for high contrast mode * feat(interruption card): add documentation page Adding documentation page and nav link for interruption card. * feat(interruption card): adding example images * feat(interruption card): allow primary action to also be a link * feat(interruption card): add interruption card component add in the macro template and styles for the interruption card component. Based on the component in use in HMPPS seen here: https://github.com/ministryofjustice/hmpps-book-a-prison-visit-ui/pull/156/files with changes made according to decisions based upon research and discovery. * feat(interruption card): adjust padding and add border for high contrast mode * feat(interruption card): add documentation page Adding documentation page and nav link for interruption card. * feat(interruption card): adding example images * feat(interruption card): allow primary action to also be a link * docs(interruption card): bump assets version * docs(interruption card): add content first version * docs(interruption card): content tweaks * docs(interruption card): more content tweaks * docs(interruption card): 2i changes * docs(interruption card): team review changes * docs(interruption card): 2nd team review changes * docs(interruption card): more team review changes * docs(interruption card): some more team review changes * docs: ✏️ adding contributor and 'based on' info * docs(interruption card): add examples and inline code styling * docs(interruption card): 3rd team review changes * feat(interruption card): changing wrapper width of interruption card - Change content wrapper width from fluid to fixed for readability - Update example iframe height ✅ Closes: 936 * docs(interruption card): adding anchor * docs(interruption card): adding another anchor * docs(interruption card): anchors * docs(interruption card): add examples and inline code styling * docs(interruption card): 3rd team review changes * feat(interruption card): changing wrapper width of interruption card - Change content wrapper width from fluid to fixed for readability - Update example iframe height ✅ Closes: 936 * docs(interruption card): adding anchor * docs(interruption card): adding another anchor * docs(interruption card): anchors * docs(interruption card): survey changes * docs(interruption card): doc changes * docs(interruption card): add examples and inline code styling * docs(interruption card): 3rd team review changes * feat(interruption card): changing wrapper width of interruption card - Change content wrapper width from fluid to fixed for readability - Update example iframe height ✅ Closes: 936 * docs(interruption card): adding anchor * docs(interruption card): adding another anchor * docs(interruption card): anchors * docs(interruption card): survey changes * docs(interruption card): doc changes * docs(interruption card): update image urls to use revisioned assets * docs(interruption card): update images and example - update example images - update example iframe height * docs(interruption card): final changes * docs(interruption card): pre release changes * docs(interruption card): more final changes * fix: (multi-select) add idPrefix option to allow multiple multi-selects on the same page (#930) * Changing pagination results number (#956) * docs(pagination): update results indexes on pagination example The paginion component example shows as page 2, but also outputs "showing results 10-20 of 30". This commit updates that to be results 11-20 as would actually be displayed. * fix(pagination): fix aria label for pages to use total pages instead of total results The `aria-label` for each page entry was of the form "page x of y" where y was the total number of results, rather than the total number of pages. This PR fixes the error --------- Co-authored-by: Chris Pymm <chris@chrispymm.co.uk> * docs(interruption card): minor tweaks * docs(interruption card): add examples and inline code styling * docs(interruption card): 3rd team review changes * feat(interruption card): changing wrapper width of interruption card - Change content wrapper width from fluid to fixed for readability - Update example iframe height ✅ Closes: 936 * docs(interruption card): adding anchor * docs(interruption card): adding another anchor * docs(interruption card): anchors * docs(interruption card): survey changes * docs(interruption card): doc changes * docs(interruption card): update image urls to use revisioned assets * docs(interruption card): update images and example - update example images - update example iframe height * docs(interruption card): final changes * docs(interruption card): pre release changes * docs(interruption card): more final changes * fix: (multi-select) add idPrefix option to allow multiple multi-selects on the same page (#930) * Changing pagination results number (#956) * docs(pagination): update results indexes on pagination example The paginion component example shows as page 2, but also outputs "showing results 10-20 of 30". This commit updates that to be results 11-20 as would actually be displayed. * fix(pagination): fix aria label for pages to use total pages instead of total results The `aria-label` for each page entry was of the form "page x of y" where y was the total number of results, rather than the total number of pages. This PR fixes the error --------- Co-authored-by: Chris Pymm <chris@chrispymm.co.uk> * docs(interruption card): minor tweaks * style(interruption card): format nunjucks template * docs(interruption card) - Figma link added - "What's new" content added --------- Co-authored-by: Murray Lippiatt <murray.lippiatt1@digital.justice.gov.uk> Co-authored-by: helennickols <helen.nickols@digital.justice.gov.uk> Co-authored-by: Stephen Dicks <github@starswan.com> Co-authored-by: Rob McCarthy <56701345+robertjmccarthy@users.noreply.github.com>
chrispymm
added a commit
that referenced
this pull request
Dec 10, 2024
* feat(interruption card): add interruption card component add in the macro template and styles for the interruption card component. Based on the component in use in HMPPS seen here: https://github.com/ministryofjustice/hmpps-book-a-prison-visit-ui/pull/156/files with changes made according to decisions based upon research and discovery. * feat(interruption card): adjust padding and add border for high contrast mode * feat(interruption card): add documentation page Adding documentation page and nav link for interruption card. * feat(interruption card): adding example images * feat(interruption card): allow primary action to also be a link * feat(interruption card): add interruption card component add in the macro template and styles for the interruption card component. Based on the component in use in HMPPS seen here: https://github.com/ministryofjustice/hmpps-book-a-prison-visit-ui/pull/156/files with changes made according to decisions based upon research and discovery. * feat(interruption card): adjust padding and add border for high contrast mode * feat(interruption card): add documentation page Adding documentation page and nav link for interruption card. * feat(interruption card): adding example images * feat(interruption card): allow primary action to also be a link * docs(interruption card): bump assets version * docs(interruption card): add content first version * docs(interruption card): content tweaks * docs(interruption card): more content tweaks * docs(interruption card): 2i changes * docs(interruption card): team review changes * docs(interruption card): 2nd team review changes * docs(interruption card): more team review changes * docs(interruption card): some more team review changes * docs: ✏️ adding contributor and 'based on' info * docs(interruption card): add examples and inline code styling * docs(interruption card): 3rd team review changes * feat(interruption card): changing wrapper width of interruption card - Change content wrapper width from fluid to fixed for readability - Update example iframe height ✅ Closes: 936 * docs(interruption card): adding anchor * docs(interruption card): adding another anchor * docs(interruption card): anchors * docs(interruption card): add examples and inline code styling * docs(interruption card): 3rd team review changes * feat(interruption card): changing wrapper width of interruption card - Change content wrapper width from fluid to fixed for readability - Update example iframe height ✅ Closes: 936 * docs(interruption card): adding anchor * docs(interruption card): adding another anchor * docs(interruption card): anchors * docs(interruption card): survey changes * docs(interruption card): doc changes * docs(interruption card): add examples and inline code styling * docs(interruption card): 3rd team review changes * feat(interruption card): changing wrapper width of interruption card - Change content wrapper width from fluid to fixed for readability - Update example iframe height ✅ Closes: 936 * docs(interruption card): adding anchor * docs(interruption card): adding another anchor * docs(interruption card): anchors * docs(interruption card): survey changes * docs(interruption card): doc changes * docs(interruption card): update image urls to use revisioned assets * docs(interruption card): update images and example - update example images - update example iframe height * docs(interruption card): final changes * docs(interruption card): pre release changes * docs(interruption card): more final changes * fix: (multi-select) add idPrefix option to allow multiple multi-selects on the same page (#930) * Changing pagination results number (#956) * docs(pagination): update results indexes on pagination example The paginion component example shows as page 2, but also outputs "showing results 10-20 of 30". This commit updates that to be results 11-20 as would actually be displayed. * fix(pagination): fix aria label for pages to use total pages instead of total results The `aria-label` for each page entry was of the form "page x of y" where y was the total number of results, rather than the total number of pages. This PR fixes the error --------- Co-authored-by: Chris Pymm <chris@chrispymm.co.uk> * docs(interruption card): minor tweaks * docs(interruption card): add examples and inline code styling * docs(interruption card): 3rd team review changes * feat(interruption card): changing wrapper width of interruption card - Change content wrapper width from fluid to fixed for readability - Update example iframe height ✅ Closes: 936 * docs(interruption card): adding anchor * docs(interruption card): adding another anchor * docs(interruption card): anchors * docs(interruption card): survey changes * docs(interruption card): doc changes * docs(interruption card): update image urls to use revisioned assets * docs(interruption card): update images and example - update example images - update example iframe height * docs(interruption card): final changes * docs(interruption card): pre release changes * docs(interruption card): more final changes * fix: (multi-select) add idPrefix option to allow multiple multi-selects on the same page (#930) * Changing pagination results number (#956) * docs(pagination): update results indexes on pagination example The paginion component example shows as page 2, but also outputs "showing results 10-20 of 30". This commit updates that to be results 11-20 as would actually be displayed. * fix(pagination): fix aria label for pages to use total pages instead of total results The `aria-label` for each page entry was of the form "page x of y" where y was the total number of results, rather than the total number of pages. This PR fixes the error --------- Co-authored-by: Chris Pymm <chris@chrispymm.co.uk> * docs(interruption card): minor tweaks * style(interruption card): format nunjucks template * docs(interruption card) - Figma link added - "What's new" content added --------- Co-authored-by: Murray Lippiatt <murray.lippiatt1@digital.justice.gov.uk> Co-authored-by: helennickols <helen.nickols@digital.justice.gov.uk> Co-authored-by: Stephen Dicks <github@starswan.com> Co-authored-by: Rob McCarthy <56701345+robertjmccarthy@users.noreply.github.com>
gregtyler
pushed a commit
that referenced
this pull request
Dec 10, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Identify the bug
#914
Description of the change
Add a optional 'idprefix' option to the multi-select component, so that the 'all' checkbox can have a unique id. Without this, multiple multi-selects on the same page don't work properly (selecting the second one 'all-selects' the first in Chrome, but YMMV)
Alternative designs
None
Possible drawbacks
None - I have tried to ensure that the default id of the 'all' checkbox remains the same if the option is not provided.
Verification process
This change is to support a feature in https://github.com/DFE-Digital/teaching-vacancies, where multiple tabs each have their own set of check-boxes. This change makes those check-boxes behave correctly and independently.
Release notes
Fixed issue with multiple multi-selects appearing on the same page using new optional data-multi-select-idprefix.