- In research
Alpha components have not been thoroughly tested by developers. Learn more about component maturity.
- Moved index.css file to dist folder.
- Updated color variables to go inline with new CEILAB color palette.
- Renamed package from
- Renamed CSS class
gapon .mobile-icons into
align-self: centerto .grid-org-name.
- Linted and formatted code per root eslint/prettier settings.
- Added unit test.
- Changed search bar border and search button to Primary color.
- Fixed focus color variables to --highlight-color. Fixed focus aesthetics for toggle menu button in mobile. Updated gap distance between search and toggle menu mobile buttons to 24px according to figma. Updated branding container's left and right padding to 16px to be consistent with other components.
- Fixed for design preference where mobile icons should continue to flow inline when a branding logo is present (instead of bunching up at a CSS grid border).
- Fixed problem where search icon could get pinched vertically on smaller screen sizes.
- Refactored much of the layout to use CSS Grid. This will allow us to support different sites with different needs. Some will have logos, some not. Some will have search, some not. Etc. CSS Grid helps us avoid margin/padding problems between all these different scenarios.
- Added a number of new CSS variables to customize font settings.
- Added 15px padding in mobile to the .branding selector (that padding property used to be applied to the entire header container in the base-css). Also, added menu hamburger styles (moved them from the menu component). Fixed hamburger icon colors and width properties.