mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
Added new ArgsTable state for inAddonPanel that removes some chrome
This commit is contained in:
domyen
parent
0a770338d6
commit
8a8ef67dfc
@ -36,6 +36,12 @@ Compact.args = {
|
||||
compact: true,
|
||||
};
|
||||
|
||||
export const inAddonPanel = Story.bind({});
|
||||
inAddonPanel.args = {
|
||||
...Normal.args,
|
||||
inAddonPanel: true,
|
||||
};
|
||||
|
||||
const sectionRows = {
|
||||
a: { ...stringType, table: { ...stringType.table, ...propsSection } },
|
||||
b: { ...numberType, table: { ...stringType.table, ...propsSection } },
|
||||
|
||||
@ -8,132 +8,146 @@ import { EmptyBlock } from '../EmptyBlock';
|
||||
import { Link } from '../../typography/link/link';
|
||||
import { ResetWrapper } from '../../typography/DocumentFormatting';
|
||||
|
||||
export const TableWrapper = styled.table<{ compact?: boolean }>(({ theme, compact }) => ({
|
||||
'&&': {
|
||||
// Resets for cascading/system styles
|
||||
borderCollapse: 'collapse',
|
||||
borderSpacing: 0,
|
||||
color: theme.color.defaultText,
|
||||
tr: {
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
},
|
||||
|
||||
'td, th': {
|
||||
padding: 0,
|
||||
border: 'none',
|
||||
verticalAlign: 'top',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
// End Resets
|
||||
|
||||
fontSize: theme.typography.size.s2 - 1,
|
||||
lineHeight: '20px',
|
||||
textAlign: 'left',
|
||||
width: '100%',
|
||||
|
||||
// Margin collapse
|
||||
marginTop: 25,
|
||||
marginBottom: 40,
|
||||
|
||||
'thead th:first-of-type, td:first-of-type': {
|
||||
width: '30%',
|
||||
},
|
||||
|
||||
'th:first-of-type, td:first-of-type': {
|
||||
paddingLeft: 20,
|
||||
},
|
||||
|
||||
'th:last-of-type, td:last-of-type': {
|
||||
paddingRight: 20,
|
||||
...(compact ? null : { width: '20%' }),
|
||||
},
|
||||
|
||||
th: {
|
||||
color:
|
||||
theme.base === 'light'
|
||||
? transparentize(0.25, theme.color.defaultText)
|
||||
: transparentize(0.45, theme.color.defaultText),
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
|
||||
'&:not(:first-of-type)': {
|
||||
paddingLeft: 15,
|
||||
paddingRight: 15,
|
||||
},
|
||||
},
|
||||
|
||||
td: {
|
||||
paddingTop: '10px',
|
||||
paddingBottom: '10px',
|
||||
|
||||
'&:not(:first-of-type)': {
|
||||
paddingLeft: 15,
|
||||
paddingRight: 15,
|
||||
},
|
||||
|
||||
'&:last-of-type': {
|
||||
paddingRight: 20,
|
||||
},
|
||||
},
|
||||
|
||||
// Table "block" styling
|
||||
// Emphasize tbody's background and set borderRadius
|
||||
// Calling out because styling tables is finicky
|
||||
|
||||
// Makes border alignment consistent w/other DocBlocks
|
||||
marginLeft: 1,
|
||||
marginRight: 1,
|
||||
|
||||
[`tr:first-child${ignoreSsrWarning}`]: {
|
||||
[`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
|
||||
borderTopLeftRadius: theme.appBorderRadius,
|
||||
},
|
||||
[`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
|
||||
borderTopRightRadius: theme.appBorderRadius,
|
||||
},
|
||||
},
|
||||
|
||||
[`tr:last-child${ignoreSsrWarning}`]: {
|
||||
[`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
|
||||
borderBottomLeftRadius: theme.appBorderRadius,
|
||||
},
|
||||
[`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
|
||||
borderBottomRightRadius: theme.appBorderRadius,
|
||||
},
|
||||
},
|
||||
|
||||
tbody: {
|
||||
// slightly different than the other DocBlock shadows to account for table styling gymnastics
|
||||
boxShadow:
|
||||
theme.base === 'light'
|
||||
? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px,
|
||||
${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px`
|
||||
: `rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
|
||||
${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`,
|
||||
borderRadius: theme.appBorderRadius,
|
||||
|
||||
export const TableWrapper = styled.table<{ compact?: boolean; inAddonPanel?: boolean }>(
|
||||
({ theme, compact, inAddonPanel }) => ({
|
||||
'&&': {
|
||||
// Resets for cascading/system styles
|
||||
borderCollapse: 'collapse',
|
||||
borderSpacing: 0,
|
||||
color: theme.color.defaultText,
|
||||
tr: {
|
||||
background: 'transparent',
|
||||
// border: 'none',
|
||||
// background: 'none',
|
||||
},
|
||||
|
||||
'td, th': {
|
||||
padding: 0,
|
||||
border: 'none',
|
||||
verticalAlign: 'top',
|
||||
overflow: 'hidden',
|
||||
[`&:not(:first-child${ignoreSsrWarning})`]: {
|
||||
borderTopWidth: 1,
|
||||
borderTopStyle: 'solid',
|
||||
borderTopColor:
|
||||
theme.base === 'light'
|
||||
? darken(0.1, theme.background.content)
|
||||
: lighten(0.05, theme.background.content),
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
// End Resets
|
||||
|
||||
fontSize: theme.typography.size.s2 - 1,
|
||||
lineHeight: '20px',
|
||||
textAlign: 'left',
|
||||
width: '100%',
|
||||
|
||||
// Margin collapse
|
||||
marginTop: inAddonPanel ? 0 : 25,
|
||||
marginBottom: inAddonPanel ? 0 : 40,
|
||||
|
||||
'thead th:first-of-type, td:first-of-type': {
|
||||
width: '30%',
|
||||
},
|
||||
|
||||
'th:first-of-type, td:first-of-type': {
|
||||
paddingLeft: 20,
|
||||
},
|
||||
|
||||
'th:last-of-type, td:last-of-type': {
|
||||
paddingRight: 20,
|
||||
...(compact ? null : { width: '20%' }),
|
||||
},
|
||||
|
||||
th: {
|
||||
color:
|
||||
theme.base === 'light'
|
||||
? transparentize(0.25, theme.color.defaultText)
|
||||
: transparentize(0.45, theme.color.defaultText),
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
|
||||
'&:not(:first-of-type)': {
|
||||
paddingLeft: 15,
|
||||
paddingRight: 15,
|
||||
},
|
||||
},
|
||||
|
||||
td: {
|
||||
background: theme.background.content,
|
||||
paddingTop: '10px',
|
||||
paddingBottom: '10px',
|
||||
|
||||
'&:not(:first-of-type)': {
|
||||
paddingLeft: 15,
|
||||
paddingRight: 15,
|
||||
},
|
||||
|
||||
'&:last-of-type': {
|
||||
paddingRight: 20,
|
||||
},
|
||||
},
|
||||
|
||||
// Table "block" styling
|
||||
// Emphasize tbody's background and set borderRadius
|
||||
// Calling out because styling tables is finicky
|
||||
|
||||
// Makes border alignment consistent w/other DocBlocks
|
||||
marginLeft: inAddonPanel ? 0 : 1,
|
||||
marginRight: inAddonPanel ? 0 : 1,
|
||||
|
||||
[`tr:first-child${ignoreSsrWarning}`]: {
|
||||
[`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
|
||||
borderTopLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius,
|
||||
},
|
||||
[`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
|
||||
borderTopRightRadius: inAddonPanel ? 0 : theme.appBorderRadius,
|
||||
},
|
||||
},
|
||||
|
||||
[`tr:last-child${ignoreSsrWarning}`]: {
|
||||
[`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
|
||||
borderBottomLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius,
|
||||
},
|
||||
[`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
|
||||
borderBottomRightRadius: inAddonPanel ? 0 : theme.appBorderRadius,
|
||||
},
|
||||
},
|
||||
|
||||
tbody: {
|
||||
// slightly different than the other DocBlock shadows to account for table styling gymnastics
|
||||
boxShadow:
|
||||
!inAddonPanel &&
|
||||
(theme.base === 'light'
|
||||
? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px,
|
||||
${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px`
|
||||
: `rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
|
||||
${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`),
|
||||
borderRadius: theme.appBorderRadius,
|
||||
|
||||
tr: {
|
||||
background: 'transparent',
|
||||
overflow: 'hidden',
|
||||
...(inAddonPanel
|
||||
? {
|
||||
borderTopWidth: 1,
|
||||
borderTopStyle: 'solid',
|
||||
borderTopColor:
|
||||
theme.base === 'light'
|
||||
? darken(0.1, theme.background.content)
|
||||
: lighten(0.05, theme.background.content),
|
||||
}
|
||||
: {
|
||||
[`&:not(:first-child${ignoreSsrWarning})`]: {
|
||||
borderTopWidth: 1,
|
||||
borderTopStyle: 'solid',
|
||||
borderTopColor:
|
||||
theme.base === 'light'
|
||||
? darken(0.1, theme.background.content)
|
||||
: lighten(0.05, theme.background.content),
|
||||
},
|
||||
}),
|
||||
},
|
||||
|
||||
td: {
|
||||
background: theme.background.content,
|
||||
},
|
||||
},
|
||||
// End finicky table styling
|
||||
},
|
||||
// End finicky table styling
|
||||
},
|
||||
}));
|
||||
})
|
||||
);
|
||||
|
||||
export enum ArgsTableError {
|
||||
NO_COMPONENT = 'No component found.',
|
||||
@ -145,6 +159,7 @@ export interface ArgsTableRowProps {
|
||||
args?: Args;
|
||||
updateArgs?: (args: Args) => void;
|
||||
compact?: boolean;
|
||||
inAddonPanel?: boolean;
|
||||
}
|
||||
|
||||
export interface ArgsTableErrorProps {
|
||||
@ -204,7 +219,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
|
||||
);
|
||||
}
|
||||
|
||||
const { rows, args, updateArgs, compact } = props as ArgsTableRowProps;
|
||||
const { rows, args, updateArgs, compact, inAddonPanel } = props as ArgsTableRowProps;
|
||||
|
||||
const groups = groupRows(rows);
|
||||
|
||||
@ -224,10 +239,10 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
|
||||
if (!compact) colSpan += 2;
|
||||
const expandable = Object.keys(groups.sections).length > 0;
|
||||
|
||||
const common = { updateArgs, compact };
|
||||
const common = { updateArgs, compact, inAddonPanel };
|
||||
return (
|
||||
<ResetWrapper>
|
||||
<TableWrapper {...{ compact }} className="docblock-argstable">
|
||||
<TableWrapper {...{ compact, inAddonPanel }} className="docblock-argstable">
|
||||
<thead className="docblock-argstable-head">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user