Storybook: <hr> style in DocumentWrapper and DocumentFormatting renders invisible

[dsusskind]

Describe the bug
The styles applied to <hr> tags in DocumentWrapper and DocumentFormatting cause the element to render invisible. See https://github.com/storybookjs/storybook/blob/master/lib/components/src/typography/DocumentFormatting.tsx#L181:

    hr {
      border: 0 none;
      color: ${props.theme.appBorderColor};
      height: 4px;
      padding: 0;
    }

Applying border: 0 none with any color results in nothing being displayed since a horizontal rule has no content and only the border is shown.

This should likely be setting border-top instead, similar to what is done in theming https://github.com/storybookjs/storybook/blob/master/lib/theming/src/global.ts#L109:

      hr: {
        ...resetStyles.hr,
        borderTop: `1px solid ${color.border}`,
      },

To Reproduce
This occurs when using the notes addon if the story's notes contains <hr> or --- in markdown. This likely also occurs anywhere else DocumentWrapping or DocumentFormatter is used.

Expected behavior
Horizontal rules should be rendered with the theme's border color.

I'll be happy to open a PR for this but please let me know if I've missed something and the current behavior actually is expected.

[shilman]

Sounds like a bug. @domyen ?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@dsusskind Sorry for the late response. This sounds like a bug to me. If you could open a PR with the fix and also an example inside examples/official-storybook to make it easier for our designer @domyen to review, that would be amazing!

[dsusskind]

No worries and thanks for following up. Sure I’ll put something up for review next week.

[dsusskind]

Hey @shilman and @domyen, I have a PR open for this: #8659. I added <hr> and --- elements to a few examples in official-storybook. Thanks!

[dsusskind]

I was ambitious in closing this, realized it should probably stay open until the fix actually gets released

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.40 containing PR #8659 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.