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

Dirty hack for vertical alignment of the expandable text & icon

Browse Source
This commit is contained in:
patrick.lafrance 2019-11-20 17:18:05 -05:00
parent 794442c6a8
commit 78cb7bac30
3 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/components/src/blocks/PropsTable/PropJsDoc.tsx
View File

@ -8,7 +8,7 @@ interface PropJsDocProps {
tags: JsDocTags;
}
export const Table = styled.table<{}>(({ theme }) => ({
export const Table = styled.table(({ theme }) => ({
'&&': {
// Escape default table styles
borderCollapse: 'collapse',

3
lib/components/src/blocks/PropsTable/PropRow.tsx
View File

@ -6,7 +6,6 @@ import { styled } from '@storybook/theming';
import { PropDef } from './PropDef';
import { PropJsDoc } from './PropJsDoc';
import { PropValue } from './PropValue';
import { codeCommon } from '../../typography/DocumentFormatting';
export interface PropRowProps {
@ -27,7 +26,9 @@ const Description = styled.div(({ theme }) => ({
margin: '0',
},
},
code: codeCommon({ theme }),
'& code': {
lineHeight: '18px',
margin: 0,

24
lib/components/src/blocks/PropsTable/PropValue.tsx
View File

@ -6,9 +6,10 @@ import { PropSummaryValue } from './PropDef';
import { WithTooltipPure } from '../../tooltip/WithTooltip';
import { Icons } from '../../icon/icon';
import { SyntaxHighlighter } from '../../syntaxhighlighter/syntaxhighlighter';
import { codeCommon } from '../../typography/DocumentFormatting';
const DIRTY_PADDING_TOP_IN_PX = 3;
interface PropValueProps {
value?: PropSummaryValue;
}
@ -26,26 +27,27 @@ const Text = styled.span(({ theme }) => ({
fontSize: theme.typography.size.s2 - 1,
}));
const Expandable = styled.div(codeCommon, ({ theme }) => ({
const Expandable = styled.div<{}>(codeCommon, ({ theme }) => ({
fontFamily: theme.typography.fonts.mono,
lineHeight: '18px',
display: 'inline-block',
color: theme.color.secondary,
margin: 0,
paddingTop: `${DIRTY_PADDING_TOP_IN_PX}px`,
whiteSpace: 'nowrap',
display: 'flex',
alignItems: 'center',
}));
const ArrowIcon = styled(Icons)(({ theme }) => ({
const ArrowIcon = styled(Icons)({
height: 10,
width: 10,
minWidth: 10,
marginLeft: '4px',
alignSelf: 'center',
display: 'inline-flex',
}));
marginTop: `-${DIRTY_PADDING_TOP_IN_PX}px`,
});
const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme, width }) => ({
width: `${width}ch`,
width,
minWidth: '200px',
maxWith: '800px',
padding: '15px',
@ -62,10 +64,10 @@ const PropText: FC<PropTextProps> = ({ text }) => {
return <Text>{text}</Text>;
};
const inferDetailWidth = memoize(1000)(function(detail: string): number {
const calculateDetailWidth = memoize(1000)((detail: string): string => {
const lines = detail.split(/\r?\n/);
return Math.max(...lines.map(x => x.length));
return `${Math.max(...lines.map(x => x.length))}ch`;
});
const PropSummary: FC<PropSummaryProps> = ({ value }) => {
@ -87,7 +89,7 @@ const PropSummary: FC<PropSummaryProps> = ({ value }) => {
setIsOpen(isVisible);
}}
tooltip={
<StyledSyntaxHighlighter width={inferDetailWidth(detail)} language="jsx" format={false}>
<StyledSyntaxHighlighter width={calculateDetailWidth(detail)} language="jsx" format={false}>
{detail}
</StyledSyntaxHighlighter>
}