fix(ui-markdown-editor): Overriding CSS - #327

[d-e-v-esh]

Signed-off-by: d-e-v-esh 59534570+d-e-v-esh@users.noreply.github.com

Closes #327

This pull request overrides the default CSS properties that were being added to the headings by the web browsers.

Changes

• Before this, the text in the dropdown menu and the text in the document used the same CSS properties, but now they use two different sets of properties.
  • This was done because we needed to add margins to the text in the document but did not want the same to happen to the text in the dropdown menu.
• The dropdown menu text uses CSS properties stored in an object labeled as TOOLBAR_DROPDOWN_STYLE_H1.
• The normal document text uses CSS properties stored in an object labeled as H1_STYLING.
• The top padding was removed from the document text area. This was done because padding can't be overlapped with the margin in the text styles. That would've created a bigger gap between the border of the text editor and the Heading 1.
• A paragraph styling object was added that contains the margin for a paragraph. There was no way to customize the paragraph styling so adding this object would be useful going forward.
• Appropriate margins were added in all the heading styles and paragraph style. These were as follows:
• margin: top right bottom left
• H1_STYLING => margin: '2rem 0rem 1rem 0rem'
• H2_STYLING => margin: '1.8rem 0rem 0.9rem 0rem'
• H3_STYLING => margin: '1.6rem 0rem 0.8rem 0rem'
• H4_STYLING => margin: '1.4rem 0rem 0.7rem 0rem'
• H5_STYLING => margin: '1.2rem 0rem 0.6rem 0rem'
• H6_STYLING => margin: '1.2rem 0rem 0.5rem 0rem'

Screenshots

The problem was encountered while implementing the H6 heading style. The margin is added to the Heading 6 by default by the user agent stylesheet was not in sync with all the other headings.

This is the before and after. Pay attention to the Heading 6 from the before and after.

Before

After

The margins for the headings are also a lot more proportional:

Before:

After:

Author Checklist

• [x] Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
• [ ] Vital features and changes captured in unit and/or integration tests
• [x] Commits messages follow AP format
• [ ] Extend the documentation, if necessary
• [x] Merging to master from fork:branchname
• [x] Manual accessibility test performed
  • [ ] Keyboard-only access, including forms
  • [ ] Contrast at least WCAG Level A
  • [x] Appropriate labels, alt text, and instructions

[Michael-Grover]

@d-e-v-esh if there are relevant screenshots, can you add them to the description? thanks

[d-e-v-esh]

@Michael-Grover I have updated the description with a few. 👍

[Michael-Grover]

Thanks @d-e-v-esh, It looks good to me visually, but I can't say whether the code needs any revisions. I'll leave that to the engineers

[jeromesimeon]

Looks great!

Merge merge? 😄