We don't support all screen sizes. We have added a variation of screen sizes following how we see the UI to render on the screen. The trays take the full size in the screen.
Desired display
Support screen sizes that we currently support in Lux Design System. This will help us to keep a consistency between the screen sizes that are supported in lux-design-system and Allsearch.
The trays (flex-items) should be shifted to the center so that the display is similar to the old all search
--media-query-small: (max-width: 599px); (it means width <= 599px)
--media-query-medium: (min-width: 600px); (it means width >= 600px)
--media-query-medium-max: (max-width: 899px); (it means width <= 899px)
--media-query-large: (min-width: 900px); (it means width >= 900px)
--media-query-x-large: (min-width: 1200px); (it means width >= 1200px)
--media-query-xx-large: (min-width: 1800px); (it means width >= 1800px)
--media-query-xxx-large: (min-width: 2300px); (it means width >= 2300px)
Acceptance criteria
[x] Apply these changes to the Search form
[x] Apply these changes to the Skip to Section
[x] Apply these changes to the Main Tray Layout
[ ] I can successfully use this feature with Voice Over in Safari.
[ ] I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
axe dev tools
Lighthouse
Wave
[ ] ...
Notes
Header and Footer are handled in Lux-design-system
Current display
We don't support all screen sizes. We have added a variation of screen sizes following how we see the UI to render on the screen. The trays take the full size in the screen.
Desired display
Support screen sizes that we currently support in Lux Design System. This will help us to keep a consistency between the screen sizes that are supported in lux-design-system and Allsearch. The trays (flex-items) should be shifted to the center so that the display is similar to the old all search
--media-query-small: (max-width: 599px); (it means width <= 599px) --media-query-medium: (min-width: 600px); (it means width >= 600px) --media-query-medium-max: (max-width: 899px); (it means width <= 899px) --media-query-large: (min-width: 900px); (it means width >= 900px) --media-query-x-large: (min-width: 1200px); (it means width >= 1200px) --media-query-xx-large: (min-width: 1800px); (it means width >= 1800px) --media-query-xxx-large: (min-width: 2300px); (it means width >= 2300px)
Acceptance criteria
Notes
Header and Footer are handled in Lux-design-system