Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #8897 from fraincs/#8504
FIX #8504 - HTML elements get their classes dropped in MDX
  • Loading branch information
ndelangen authored and shilman committed Feb 25, 2020
1 parent c25cb3f commit dd47540
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 16 deletions.
22 changes: 22 additions & 0 deletions examples/cra-ts-kitchen-sink/src/stories/Classes.stories.mdx
@@ -0,0 +1,22 @@
import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Classes Stripped" />

# Preview

<style>
{`
.a-custom-class {
border: 10px solid hotpink;
}
.a-custom-classname {
border: 10px solid blue;
}
`}
</style>

<div class="a-custom-class">
<div className="a-custom-classname">
This box should have BOTH a pink and blue border
</div>
</div>
18 changes: 2 additions & 16 deletions lib/components/src/html.tsx
@@ -1,19 +1,5 @@
import * as React from 'react';
import * as rawComponents from './typography/DocumentFormatting';
import { components as rawComponents } from './typography/DocumentFormatting';

export * from './typography/DocumentFormatting';

export const components = Object.entries(rawComponents).reduce(
(acc, [k, V]) => ({
...acc,
[k.toLowerCase()]: ({ className, ...rest }: { className: string }) => {
return (
<V
{...rest}
className={`sbdocs sbdocs-${k.toLowerCase()}${className ? ` ${className}` : ''}`}
/>
);
},
}),
{}
);
export { rawComponents as components };
40 changes: 40 additions & 0 deletions lib/components/src/typography/DocumentFormatting.tsx
Expand Up @@ -341,3 +341,43 @@ export const TT = styled.title<{}>(codeCommon);
*/

export const ResetWrapper = styled.div<{}>(withReset);

const nameSpaceClassNames = ({ ...props }, key: string) => {
const classes = [props.class, props.className];
// eslint-disable-next-line no-param-reassign
delete props.class;

// eslint-disable-next-line no-param-reassign
props.className = ['sbdocs', `sbdocs-${key}`, ...classes].filter(Boolean).join(' ');

return props;
};

export const components = {
h1: (props => <H1 {...nameSpaceClassNames(props, 'h1')} />) as typeof H1,
h2: (props => <H2 {...nameSpaceClassNames(props, 'h2')} />) as typeof H2,
h3: (props => <H3 {...nameSpaceClassNames(props, 'h3')} />) as typeof H3,
h4: (props => <H4 {...nameSpaceClassNames(props, 'h4')} />) as typeof H4,
h5: (props => <H5 {...nameSpaceClassNames(props, 'h5')} />) as typeof H5,
h6: (props => <H6 {...nameSpaceClassNames(props, 'h6')} />) as typeof H6,
pre: (props => <Pre {...nameSpaceClassNames(props, 'pre')} />) as typeof Pre,
a: (props => <A {...nameSpaceClassNames(props, 'a')} />) as typeof A,
hr: (props => <HR {...nameSpaceClassNames(props, 'hr')} />) as typeof HR,
dl: (props => <DL {...nameSpaceClassNames(props, 'dl')} />) as typeof DL,
blockquote: (props => (
<Blockquote {...nameSpaceClassNames(props, 'blockquote')} />
)) as typeof Blockquote,
table: (props => <Table {...nameSpaceClassNames(props, 'table')} />) as typeof Table,
img: (props => <Img {...nameSpaceClassNames(props, 'img')} />) as typeof Img,
div: (props => <Div {...nameSpaceClassNames(props, 'div')} />) as typeof Div,
span: (props => <Span {...nameSpaceClassNames(props, 'span')} />) as typeof Span,
li: (props => <LI {...nameSpaceClassNames(props, 'li')} />) as typeof LI,
ul: (props => <UL {...nameSpaceClassNames(props, 'ul')} />) as typeof UL,
ol: (props => <OL {...nameSpaceClassNames(props, 'ol')} />) as typeof OL,
p: (props => <P {...nameSpaceClassNames(props, 'p')} />) as typeof P,
code: (props => <Code {...nameSpaceClassNames(props, 'code')} />) as typeof Code,
tt: (props => <TT {...nameSpaceClassNames(props, 'tt')} />) as typeof TT,
resetwrapper: (props => (
<ResetWrapper {...nameSpaceClassNames(props, 'resetwrapper')} />
)) as typeof ResetWrapper,
};

0 comments on commit dd47540

Please sign in to comment.