Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Invalid HTML bug in section label #3328

Merged
merged 7 commits into from
Apr 6, 2020
Merged

Invalid HTML bug in section label #3328

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
70004a4
Replace div with a span in section label
OlgaLyubin Apr 2, 2020
90b930d
Bump up version of section label
OlgaLyubin Apr 2, 2020
b72d349
Update snapshots
OlgaLyubin Apr 2, 2020
87ecbc7
Update packages/components/psammead-section-label/CHANGELOG.md
OlgaLyubin Apr 2, 2020
4cd455a
Update packages/components/psammead-section-label/CHANGELOG.md
OlgaLyubin Apr 2, 2020
c21432b
Merge branch 'latest' into section-label-bug
OlgaLyubin Apr 3, 2020
eeec85e
Merge branch 'latest' into section-label-bug
amywalkerdev Apr 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/psammead-section-label/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
|---------|-------------|
| 5.0.3 | [PR#3316](https://github.com/bbc/psammead/pull/3316) Replace a `div` with a `span` tag to fix invalid HTML syntax |
OlgaLyubin marked this conversation as resolved.
Show resolved Hide resolved
| 5.0.2 | [PR#3262](https://github.com/bbc/psammead/pull/3262) Add `backgroundColor` prop |
| 5.0.1 | [PR#3195](https://github.com/bbc/psammead/pull/3195) Define `z-index` on section-label wrapper |
| 5.0.0 | [PR#3133](https://github.com/bbc/psammead/pull/3133) Change background colour from white to ghost |
Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-section-label/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/components/psammead-section-label/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-section-label",
"version": "5.0.2",
"version": "5.0.3",
"description": "React styled component for a section label",
"main": "dist/index.js",
"module": "esm/index.js",
Expand Down
60 changes: 30 additions & 30 deletions packages/components/psammead-section-label/src/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ exports[`SectionLabel When hideSectionHeader is true should add styling to hide
<h2
class="c1"
>
<div
<span
class="c2"
>
<span
Expand All @@ -136,7 +136,7 @@ exports[`SectionLabel When hideSectionHeader is true should add styling to hide
This is the text in a SectionLabel
</span>
</span>
</div>
</span>
</h2>
</div>
`;
Expand Down Expand Up @@ -336,7 +336,7 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] =
class="c3"
href="/igbo/other-index"
>
<div
<span
class="c4"
>
<span
Expand All @@ -358,7 +358,7 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] =
See All
</span>
</span>
</div>
</span>
</a>
</h2>
</div>
Expand Down Expand Up @@ -559,7 +559,7 @@ exports[`SectionLabel With bar With linking title should render correctly with a
class="c3"
href="/igbo/other-index"
>
<div
<span
class="c4"
>
<span
Expand All @@ -581,7 +581,7 @@ exports[`SectionLabel With bar With linking title should render correctly with a
See All
</span>
</span>
</div>
</span>
</a>
</h2>
</div>
Expand Down Expand Up @@ -782,7 +782,7 @@ exports[`SectionLabel With bar With linking title should render correctly with e
class="c3"
href="/igbo/other-index"
>
<div
<span
class="c4"
>
<span
Expand All @@ -804,7 +804,7 @@ exports[`SectionLabel With bar With linking title should render correctly with e
See All
</span>
</span>
</div>
</span>
</a>
</h2>
</div>
Expand Down Expand Up @@ -1005,7 +1005,7 @@ exports[`SectionLabel With bar With linking title should render correctly with e
class="c3"
href="/igbo/other-index"
>
<div
<span
class="c4"
>
<span
Expand All @@ -1027,7 +1027,7 @@ exports[`SectionLabel With bar With linking title should render correctly with e
See All
</span>
</span>
</div>
</span>
</a>
</h2>
</div>
Expand Down Expand Up @@ -1170,7 +1170,7 @@ exports[`SectionLabel With bar With plain title should render correctly 1`] = `
<h2
class="c2"
>
<div
<span
class="c3"
>
<span
Expand All @@ -1184,7 +1184,7 @@ exports[`SectionLabel With bar With plain title should render correctly 1`] = `
This is text in a SectionLabel.
</span>
</span>
</div>
</span>
</h2>
</div>
`;
Expand Down Expand Up @@ -1326,7 +1326,7 @@ exports[`SectionLabel With bar With plain title should render correctly with ara
<h2
class="c2"
>
<div
<span
class="c3"
>
<span
Expand All @@ -1340,7 +1340,7 @@ exports[`SectionLabel With bar With plain title should render correctly with ara
بعض محتوى النص
</span>
</span>
</div>
</span>
</h2>
</div>
`;
Expand Down Expand Up @@ -1482,7 +1482,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
<h2
class="c2"
>
<div
<span
class="c3"
>
<span
Expand All @@ -1496,7 +1496,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
This is text in a SectionLabel rendering in ltr mode.
</span>
</span>
</div>
</span>
</h2>
</div>
`;
Expand Down Expand Up @@ -1638,7 +1638,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
<h2
class="c2"
>
<div
<span
class="c3"
>
<span
Expand All @@ -1652,7 +1652,7 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
This is text in a SectionLabel, and there is a bar over to the right
</span>
</span>
</div>
</span>
</h2>
</div>
`;
Expand Down Expand Up @@ -1829,7 +1829,7 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`]
class="c2"
href="/igbo/other-index"
>
<div
<span
class="c3"
>
<span
Expand All @@ -1851,7 +1851,7 @@ exports[`SectionLabel Without bar With linking title should render correctly 1`]
See All
</span>
</span>
</div>
</span>
</a>
</h2>
</div>
Expand Down Expand Up @@ -2029,7 +2029,7 @@ exports[`SectionLabel Without bar With linking title should render correctly wit
class="c2"
href="/igbo/other-index"
>
<div
<span
class="c3"
>
<span
Expand All @@ -2051,7 +2051,7 @@ exports[`SectionLabel Without bar With linking title should render correctly wit
See All
</span>
</span>
</div>
</span>
</a>
</h2>
</div>
Expand Down Expand Up @@ -2229,7 +2229,7 @@ exports[`SectionLabel Without bar With linking title should render correctly wit
class="c2"
href="/igbo/other-index"
>
<div
<span
class="c3"
>
<span
Expand All @@ -2251,7 +2251,7 @@ exports[`SectionLabel Without bar With linking title should render correctly wit
See All
</span>
</span>
</div>
</span>
</a>
</h2>
</div>
Expand Down Expand Up @@ -2371,7 +2371,7 @@ exports[`SectionLabel Without bar With plain title should render correctly 1`] =
<h2
class="c1"
>
<div
<span
class="c2"
>
<span
Expand All @@ -2385,7 +2385,7 @@ exports[`SectionLabel Without bar With plain title should render correctly 1`] =
This is text in a SectionLabel.
</span>
</span>
</div>
</span>
</h2>
</div>
`;
Expand Down Expand Up @@ -2504,7 +2504,7 @@ exports[`SectionLabel Without bar With plain title should render correctly with
<h2
class="c1"
>
<div
<span
class="c2"
>
<span
Expand All @@ -2518,7 +2518,7 @@ exports[`SectionLabel Without bar With plain title should render correctly with
بعض محتوى النص
</span>
</span>
</div>
</span>
</h2>
</div>
`;
Expand Down Expand Up @@ -2637,7 +2637,7 @@ exports[`SectionLabel Without bar With plain title should render correctly with
<h2
class="c1"
>
<div
<span
class="c2"
>
<span
Expand All @@ -2651,7 +2651,7 @@ exports[`SectionLabel Without bar With plain title should render correctly with
This is text in a SectionLabel rendering in ltr mode.
</span>
</span>
</div>
</span>
</h2>
</div>
`;
2 changes: 1 addition & 1 deletion packages/components/psammead-section-label/src/titles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const paddingReverseDir = ({ dir }) =>
// This makes it work right. I don't fully understand how, but am
// eternally grateful to the Flexbugs project.
// https://github.com/philipwalton/flexbugs#flexbug-3
const FlexColumn = styled.div`
const FlexColumn = styled.span`
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you check if we really need this FlexColumn or if we could try to merge it along with FlexRow, so we avoid having that many nested spans?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

If we remove FlexColumn or merge it with FlexRow everything still looks great on Chrome, FireFox and Safari. However, it causes the bar to get shifted down on Internet Explorer. And even though IE is a low priority browser for us, section labels are on every front page, so I don't think it's worth making this change just to avoid having a lot of spans in the DOM.

Screenshot 2020-04-03 at 11 42 43

Copy link
Contributor

Choose a reason for hiding this comment

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

All right, thanks for investing though :)

display: flex;
flex-direction: column;
`;
Expand Down