Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(PPDSC-2369) fix DOM errors in docs website #343

Merged
merged 27 commits into from
Aug 25, 2022
Merged

chore(PPDSC-2369) fix DOM errors in docs website #343

merged 27 commits into from
Aug 25, 2022

Conversation

mutebg
Copy link
Contributor

@mutebg mutebg commented Aug 19, 2022 •
edited
Loading

PPDSC-2369

What

  1. Background - prevent validateDOMNesting errors

  2. What did you do:
    2.1. Refactored all docs pages where we use wrong nested elements
    2.2. Added global CSS style which will easily outline feature errors
    2.3. Created UnpackComponent which checks its children and wraps them in TextBlock when is needed

  3. What does the reviewers should expect

I have done:

  • Written unit tests against changes
  • Written functional tests against the component and/or NewsKit site
  • Updated relevant documentation

I have tested manually:

  • The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
  • The screen reader reads and flows through the elements as expected.
  • There are no new errors in the browser console coming from this PR.
  • When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
  • The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

@newskit-engineering
Copy link
Collaborator

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2369-fix-dom-errors-in-docs
Storybook: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2369-fix-dom-errors-in-docs/storybook

@mutebg mutebg changed the title Chore/ppdsc 2369 fix dom errors in docs chore(PPDSC-2369) fix DOM errors in docs website Aug 22, 2022
@mutebg mutebg marked this pull request as ready for review August 23, 2022 07:58
Vanals
Vanals reviewed Aug 23, 2022
View reviewed changes
site/components/unpack-content/unpack-content.tsx

*/

export const UnpackContent = ({
Copy link
Contributor

@Vanals Vanals Aug 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shall we leave a comment about what this component does? I think the name is not very descriptive and the explanation you left in the PR description was useful, I think would be good to an explanation it in code too

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree, would also be good to explain why as well as what.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added comment

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! The example looks good!
I wonder if would be beneficial to add why we are also doing this? now makes sense but in the long term we have no documentation about this component which is quite unique 🤔 . Also thinking in case we need to re-use it for new implementations

@mutebg mutebg requested a review from mstuartf August 23, 2022 12:57
Xin00163
Xin00163 previously approved these changes Aug 23, 2022
View reviewed changes
@Vanals Vanals added the ready for review Please assist in getting this reviewed label Aug 23, 2022
mstuartf
mstuartf previously approved these changes Aug 23, 2022
View reviewed changes
@mutebg mutebg dismissed stale reviews from mstuartf and Xin00163 via fdf89a5 August 24, 2022 05:21
mstuartf
mstuartf previously approved these changes Aug 24, 2022
View reviewed changes
Vanals
Vanals previously approved these changes Aug 24, 2022
View reviewed changes
@mutebg mutebg dismissed stale reviews from Vanals and mstuartf via 16e8438 August 24, 2022 11:28
@Srinivasan-Ramasamy
Copy link
Contributor

It's big changes. Thanks Stoyan 👍

Looks good to me. I keep eye on it, if I found any I keep you posted. Well done!

mstuartf
mstuartf previously approved these changes Aug 24, 2022
View reviewed changes
@mutebg mutebg dismissed stale reviews from mstuartf and Srinivasan-Ramasamy via 7521b79 August 25, 2022 05:17
@mutebg mutebg merged commit 9744b64 into main Aug 25, 2022
@mutebg mutebg deleted the chore/PPDSC-2369-fix-dom-errors-in-docs branch August 25, 2022 07:59
Xin00163 pushed a commit that referenced this pull request Oct 17, 2022
@mutebg
chore(PPDSC-2369) fix DOM errors in docs website (#343)
ba25941 
* chore(PPDSC-2369): fix dom errors in theme pages

* chore(PPDSC-2369): add react keys

* chore(PPDSC-2369): change all components

* chore(PPDSC-2369): change all components

* chore(PPDSC-2369): update unpack content

* chore(PPDSC-2369): clean up

* chore(PPDSC-2369): format code

* chore(PPDSC-2369): add key to media-list

* chore(PPDSC-2369): fix unordered-list usage

* chore(PPDSC-2369): fix unit tets

* chore(PPDSC-2369): add as option to flag component

* chore(PPDSC-2369): update snapshots

* chore(PPDSC-2369): add unit tests

* chore(PPDSC-2369): fix types

* chore(PPDSC-2369): feedback

* chore(PPDSC-2369): add prod check for nested divs outline

* chore(PPDSC-2369): fix some spacing

* chore(PPDSC-2369): fix unit tests

* chore(PPDSC-2369): rename fns

* chore(PPDSC-2369): add extra description

* chore(PPDSC-2369): fix some pages

* chore(PPDSC-2369): fix snapshots

* chore(PPDSC-2369): fix story
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mstuartf mstuartf mstuartf approved these changes

@Srinivasan-Ramasamy Srinivasan-Ramasamy Srinivasan-Ramasamy approved these changes

@jps jps Awaiting requested review from jps

@pdimova pdimova Awaiting requested review from pdimova

@baburay23 baburay23 Awaiting requested review from baburay23

@evgenitsn evgenitsn Awaiting requested review from evgenitsn

@Vanals Vanals Awaiting requested review from Vanals

@Xin00163 Xin00163 Awaiting requested review from Xin00163

Assignees
No one assigned
Labels
ready for review Please assist in getting this reviewed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@mutebg @newskit-engineering @Srinivasan-Ramasamy @Xin00163 @Vanals @mstuartf