NOPS-619: Fix syndication icons alignment #86
Conversation
By adding $include-base-styles to our modifying syndication icons, we will no longer duplicate the rules already defined on the class `n-syndication-icons`. This will help to remove removes 33 lines of duplicated rules. https://registry.origami.ft.com/components/o-icons@7.0.1/readme?brand=master#includes-icons-of-different-sizes-and-colors
Align the syndication icon and its sibling elements (which are inline) to the middle of each other. This will ensure that the icon and other inline elements will line up with each other regardless of the size. If the icon is much bigger than the sibling text - the top line of the subsequent text will line up to the middle of the icon, and visa versa. On a slight tangent - how wonderful is this "how to Vertically Center Content" page http://phrogz.net/css/vertical-align/index.html
Now we are not repeat the base styles of the icons, we do not need to override the syndication icons vertical alignment.
joelcarr
changed the title
|
Reposted from Slack: Joel Carr: |
|
This looks much better! Has it been tested in other browsers yet or just in Chrome? It would be good to check that removing the base styles doesn't have any unexpected consequences |
|
I have been able to test the new icon layout locally using the syndication maintenance mode. Unfortunately there is some complications to run/develop this package locally without maintenance mode. @Financial-Times/accounts have discussed that this can be enough in order to merge this fix as long as we are ready to revert in production if it looks wrong. I have created ACC-1156 to look into how to develop this package locally and document it for all. |
A fix to ensure that the syndication icons have a consistent alignment with its' sibling inline elements.
Currently we have a few overrides to try an ensure there is a fixed value for the
vertical-alignrule however seems to be a symptom ofoIconsContent(...)resetting the base icon style rules. This fix uses the$include-base-styles: falseoption that removes these base icon style rules removing the need to override thevertical-alignrule for different variations. This fix also adds thevertical-align: middlerule to any sibling of.n-syndication-iconto make sure the alignment between these inline elements is consistent.Closes #82 as this will remove the duplicated vertical-align overrides to create one consistent (🤞 ) style.
Here is some screen recordings of the new syndication icon layout (in maintenance mode) for Chrome, Safari, Firefox, and iOS Safari:
syndication-icons-chrome.mov
syndication-icons-firefox.mov
syndication-icons-ios.mov
syndication-icons-safari.mov