Permalink
Browse files

fix fit headings (#418)

  • Loading branch information...
kenwheeler committed Nov 14, 2017
1 parent 3e25ab0 commit 87ad299da9809a3b8123ae3644c200b7c8ea154d
Showing with 31 additions and 16 deletions.
  1. +4 −4 src/components/__snapshots__/heading.test.js.snap
  2. +27 −12 src/components/heading.js
@@ -49,7 +49,7 @@ exports[`<Heading /> should render the fit configuration correctly. 1`] = `
className="css-1449yoq"
height={0}
>
<Styled(span)
<Styled(h1)
innerRef={[Function]}
lineHeight={1}
scale={NaN}
@@ -60,12 +60,12 @@ exports[`<Heading /> should render the fit configuration correctly. 1`] = `
}
}
>
<span
<h1
className="css-piqx9m"
>
This Header Fits!
</span>
</Styled(span)>
</h1>
</Styled(h1)>
</div>
</Styled(div)>
</Heading>
View
@@ -13,7 +13,7 @@ const StyledHeader = styled.div(({ height, styles }) => [
},
]);
const StyledSpan = styled.span(({ scale, lineHeight, styles }) => [
const dynamicHeaderFitStyles = ({ scale, lineHeight, styles }) => [
{
fontSize: 16,
display: 'block',
@@ -25,7 +25,15 @@ const StyledSpan = styled.span(({ scale, lineHeight, styles }) => [
},
styles.typeface,
styles.user,
]);
];
const dynamicStyledFitHeaders = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce(
(memo, tag) => ({
...memo,
[tag]: styled(tag)(dynamicHeaderFitStyles),
}),
{}
);
const dynamicHeaderStyles = ({ lineHeight, styles }) => [
styles.context,
@@ -34,6 +42,7 @@ const dynamicHeaderStyles = ({ lineHeight, styles }) => [
styles.typeface,
styles.user,
];
const dynamicStyledHeaders = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce(
(memo, tag) => ({
...memo,
@@ -95,16 +104,22 @@ export default class Heading extends Component {
base: getStyles.call(this),
}}
>
<StyledSpan
innerRef={t => {
this.textRef = t;
}}
scale={this.state.scale}
lineHeight={lineHeight}
styles={{ user: style, typeface: typefaceStyle }}
>
{children}
</StyledSpan>
{
createElement(
dynamicStyledFitHeaders[Tag],
{
innerRef: t => {
this.textRef = t;
},
scale: this.state.scale,
lineHeight,
styles: {
user: style,
typeface: typefaceStyle
}
}, children
)
}
</StyledHeader>
);
}

0 comments on commit 87ad299

Please sign in to comment.