Skip to content

Commit

Permalink
Improve props display (#19)
Browse files Browse the repository at this point in the history 
* Display all literal value as string

* Modify patterns for good example

* Display undefined in light gray

* props value wrap anywhere
  • Loading branch information
@tomoya
tomoya authored May 6, 2020
1 parent 9d90898 commit e7c8250
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 24 deletions.
5 changes: 3 additions & 2 deletions example/src/Box/Box.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ export default {
parameters: {
matrix: {
pattern: {
bg: ['white', 'blue', 'red', 'yellow'],
width: [1, '50%', 256],
bg: [undefined, 'red', 'yellow'],
bool: [true, false],
width: [undefined, '50%', 256],
p: [undefined, 2, 3],
},
},
Expand Down
48 changes: 28 additions & 20 deletions src/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,14 +278,15 @@ Array [
title
</span>
</Styled(span)>
:
:
<Styled(span)
color="rgba(51, 51, 51, 0.75)"
color="rgba(51, 51, 51, 0.25)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
<span
className="css-mtjg0i"
color="rgba(51, 51, 51, 0.75)"
className="css-12p2gsl"
color="rgba(51, 51, 51, 0.25)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
undefined
Expand Down Expand Up @@ -321,13 +322,14 @@ Array [
text
</span>
</Styled(span)>
:
:
<Styled(span)
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
<span
className="css-mtjg0i"
className="css-8v37fk"
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
Expand Down Expand Up @@ -439,13 +441,14 @@ Array [
title
</span>
</Styled(span)>
:
:
<Styled(span)
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
<span
className="css-mtjg0i"
className="css-8v37fk"
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
Expand Down Expand Up @@ -482,13 +485,14 @@ Array [
text
</span>
</Styled(span)>
:
:
<Styled(span)
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
<span
className="css-mtjg0i"
className="css-8v37fk"
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
Expand Down Expand Up @@ -604,14 +608,15 @@ Array [
title
</span>
</Styled(span)>
:
:
<Styled(span)
color="rgba(51, 51, 51, 0.75)"
color="rgba(51, 51, 51, 0.25)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
<span
className="css-mtjg0i"
color="rgba(51, 51, 51, 0.75)"
className="css-12p2gsl"
color="rgba(51, 51, 51, 0.25)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
undefined
Expand Down Expand Up @@ -647,13 +652,14 @@ Array [
text
</span>
</Styled(span)>
:
:
<Styled(span)
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
<span
className="css-mtjg0i"
className="css-8v37fk"
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
Expand Down Expand Up @@ -765,13 +771,14 @@ Array [
title
</span>
</Styled(span)>
:
:
<Styled(span)
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
<span
className="css-mtjg0i"
className="css-8v37fk"
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
Expand Down Expand Up @@ -808,13 +815,14 @@ Array [
text
</span>
</Styled(span)>
:
:
<Styled(span)
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
<span
className="css-mtjg0i"
className="css-8v37fk"
color="rgba(51, 51, 51, 0.75)"
fontFamily="\\"Nunito Sans\\", \\"Helvetica Neue\\", Helvetica, Arial, sans-serif"
>
Expand Down
9 changes: 7 additions & 2 deletions src/components/Matrix/Matrix.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-magic-numbers */
import * as React from 'react';
import { Box } from '../Box';
import { Text } from '../Text';
import { Text, OverflowWrapText } from '../Text';
import { Flex } from '../Flex';
import { createPropsCombinations } from '../../createPropsCombinations';

Expand Down Expand Up @@ -33,7 +33,12 @@ export const Matrix: React.FC<MatrixProps> = ({ component, propsPattern, origina
<Text fontWeight="bold" color="rgba(51, 51, 51, 0.75)">
{key}
</Text>
: <Text color="rgba(51, 51, 51, 0.75)">{value ?? 'undefined'}</Text>
:{' '}
<OverflowWrapText
color={
value === undefined ? 'rgba(51, 51, 51, 0.25)' : 'rgba(51, 51, 51, 0.75)'
}
>{`${value}`}</OverflowWrapText>
</Box>
</Box>
))}
Expand Down
8 changes: 8 additions & 0 deletions src/components/Text/OverflowWrapText.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import * as React from 'react';
import styled from '@emotion/styled';
import { Text } from './Text';
import { TextProps } from './types';

export const OverflowWrapText: React.FC<TextProps> = styled(Text)`
overflow-wrap: anywhere;
`;
1 change: 1 addition & 0 deletions src/components/Text/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { Text } from './Text';
export { OverflowWrapText } from './OverflowWrapText';
export { TextProps } from './types';

1 comment on commit e7c8250

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for website ready!

Built with commit e7c8250

https://https://storybook-addon-matrix-o8b51qk47.now.sh

Please sign in to comment.