<hr> style in DocumentWrapper and DocumentFormatting renders invisible

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.

[dsusskind]

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

[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!