GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 21:01:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11281 from storybookjs/fix/addon-docs/list_styles

Browse Source 
Addon-docs: Apply list styles over reset
This commit is contained in:
Michael Shilman 2020-07-27 14:32:30 +08:00 committed by GitHub
commit 20812c9cc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/components/src/blocks/DocsPage.stories.tsx
View File

@ -1,4 +1,6 @@
import React from 'react';
import { Global, css } from '@emotion/core';
import { Title, Subtitle, DocsPageWrapper } from './DocsPage';
import { ArgsTable, Source, Description } from './index';
import * as Story from './Story.stories';
@ -10,10 +12,28 @@ import * as description from './Description.stories';
export default {
title: 'Docs/DocsPage',
component: DocsPageWrapper,
// The goal of this decorator is to mimic some CSS reset.
// Like Tailwind CSS or Bulma do, for example.
decorators: [
(storyFn) => (
<>
<Global
styles={css`
ul,
ol {
list-style: none;
}
`}
/>
{storyFn()}
</>
),
],
parameters: {
layout: 'fullscreen',
},
};
export const WithSubtitle = () => (
<DocsPageWrapper>
<Title>DocsPage</Title>

4
lib/components/src/typography/DocumentFormatting.tsx
View File

@ -303,9 +303,9 @@ export const LI = styled.li<{}>(withReset, ({ theme }) => ({
'& code': codeCommon({ theme }),
}));
export const UL = styled.ul<{}>(withReset, withMargin, listCommon, {});
export const UL = styled.ul<{}>(withReset, withMargin, { ...listCommon, listStyle: 'disc' });
export const OL = styled.ol<{}>(withReset, withMargin, listCommon);
export const OL = styled.ol<{}>(withReset, withMargin, { ...listCommon, listStyle: 'decimal' });
export const P = styled.p<{}>(withReset, withMargin, ({ theme }) => ({
fontSize: theme.typography.size.s2,