Skip to content

Commit 4bd6b42

Browse files
jonnybelmontezume
jonnybel
authored and
montezume
committed
feat(text): add as prop while deprecating elementType (#631)
* feat(text): add as prop * chore: update specs and story * chore: update readme * refactor: use requiredIf * refactor: elementType to as * refactor: remove className prop from Text.Details component * refactor(text): use util for deprecation warning * fix(tag): style text with css selector after removal of classname prop
1 parent 6495cef commit 4bd6b42

File tree

20 files changed

+184
-99
lines changed

20 files changed

+184
-99
lines changed

‎.storybook/decorators/formik-box/formik-box.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ export default class FormikBox extends React.Component {
1515
return (
1616
<Spacings.Stack scale="l">
1717
<div>
18-
<Text.Subheadline elementType="h4">formik.values</Text.Subheadline>
18+
<Text.Subheadline as="h4">formik.values</Text.Subheadline>
1919
<pre>{JSON.stringify(this.props.formik.values, null, 2)}</pre>
2020
</div>
2121
<div>
22-
<Text.Subheadline elementType="h4">formik.touched</Text.Subheadline>
22+
<Text.Subheadline as="h4">formik.touched</Text.Subheadline>
2323
<pre>{JSON.stringify(this.props.formik.touched, null, 2)}</pre>
2424
</div>
2525
<div>
26-
<Text.Subheadline elementType="h4">formik.errors</Text.Subheadline>
26+
<Text.Subheadline as="h4">formik.errors</Text.Subheadline>
2727
<pre>{JSON.stringify(this.props.formik.errors, null, 2)}</pre>
2828
</div>
2929
</Spacings.Stack>

‎examples/form-fields.example.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,7 @@ const Story = injectIntl(props => (
395395
}}
396396
render={formik => (
397397
<Spacings.Stack scale="l">
398-
<Text.Headline elementType="h2">The form</Text.Headline>
398+
<Text.Headline as="h2">The form</Text.Headline>
399399
<div>
400400
<ProductForm formik={formik} />
401401
</div>

‎examples/form-inputs.example.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -576,7 +576,7 @@ const Story = injectIntl(props => {
576576
}}
577577
render={formik => (
578578
<Spacings.Stack scale="l">
579-
<Text.Headline elementType="h2">The form</Text.Headline>
579+
<Text.Headline as="h2">The form</Text.Headline>
580580
<div>
581581
<ProductForm
582582
formik={formik}

‎src/components/buttons/link-button/link-button.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const LinkBody = props => (
5151
size: 'medium',
5252
color: props.isDisabled ? 'neutral60' : 'primary',
5353
})}
54-
<Text.Body isInline={true}>{props.label}</Text.Body>
54+
<Text.Body as="span">{props.label}</Text.Body>
5555
</Spacings.Inline>
5656
);
5757

‎src/components/grid/grid.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ storiesOf('Components|Grid', module)
7979
' is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that elements children (which become Grid Items).'
8080
}
8181
</Text.Body>
82-
<Text.Headline elementType="h3">{'Getting started'}</Text.Headline>
82+
<Text.Headline as="h3">{'Getting started'}</Text.Headline>
8383
<Text.Body>
8484
{
8585
'In the Knobs section on the right panel, you can see all the supported CSS Grid properties, both for the parent container and for the children elements (items).'

‎src/components/internals/calendar-header/calendar-header.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const CalendarHeader = props => (
3333
onClick={props.onNextMonthClick}
3434
icon={<AngleRightIcon size="medium" />}
3535
/>
36-
<Text.Body isInline={true} isBold={true}>
36+
<Text.Body as="span" isBold={true}>
3737
{props.monthLabel}
3838
</Text.Body>
3939
</Spacings.Inline>

‎src/components/panels/collapsible-panel/collapsible-panel-header.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react';
33
import Text from '../../typography/text';
44

55
const CollapsiblePanelHeader = props => (
6-
<Text.Subheadline elementType="h4" isBold={true} truncate={true}>
6+
<Text.Subheadline as="h4" isBold={true} truncate={true}>
77
{props.children}
88
</Text.Subheadline>
99
);

‎src/components/spacings/inline/inline.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ storiesOf('Components|Spacings', module)
7676
<InlineColorWrapper>
7777
<Scale>
7878
<Inset scale="s" alignItems="center">
79-
<Text.Subheadline elementType="h4">
79+
<Text.Subheadline as="h4">
8080
{size.name.toUpperCase()}
8181
<Text.Detail>{size.pixels}</Text.Detail>
8282
</Text.Subheadline>

‎src/components/spacings/inset-squish/inset-squish.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ storiesOf('Components|Spacings', module)
5050
<InsetColorWrapper key={size.name}>
5151
<InsetSquish scale={size.name}>
5252
<Button>
53-
<Text.Subheadline elementType="h4">
53+
<Text.Subheadline as="h4">
5454
{size.name.toUpperCase()}
5555
<Text.Detail>{size.pixels}</Text.Detail>
5656
</Text.Subheadline>

‎src/components/spacings/inset/inset.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ storiesOf('Components|Spacings', module)
5353
<InsetColorWrapper key={size.name}>
5454
<Inset scale={size.name}>
5555
<Square>
56-
<Text.Subheadline elementType="h4">
56+
<Text.Subheadline as="h4">
5757
{size.name.toUpperCase()}
5858
<Text.Detail>{size.pixels}</Text.Detail>
5959
</Text.Subheadline>

‎src/components/spacings/spacings.visualroute.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const StackExample = ({ alignItems }) => (
113113
{sizes.map(size => (
114114
<StackColorWrapper key={size.name}>
115115
<Spacings.Inset scale="m">
116-
<Text.Subheadline elementType="h4">
116+
<Text.Subheadline as="h4">
117117
{size.name.toUpperCase()}
118118
<Text.Detail>{size.pixels}</Text.Detail>
119119
</Text.Subheadline>
@@ -145,7 +145,7 @@ const InlineExample = ({ alignItems }) => (
145145
<InlineColorWrapper>
146146
<Scale>
147147
<Spacings.Inset scale="s" alignItems="center">
148-
<Text.Subheadline elementType="h4">
148+
<Text.Subheadline as="h4">
149149
{size.name.toUpperCase()}
150150
<Text.Detail>{size.pixels}</Text.Detail>
151151
</Text.Subheadline>
@@ -189,7 +189,7 @@ export const component = () => (
189189
<InsetColorWrapper key={size.name}>
190190
<Spacings.Inset scale={size.name}>
191191
<Square>
192-
<Text.Subheadline elementType="h4">
192+
<Text.Subheadline as="h4">
193193
{size.name.toUpperCase()}
194194
<Text.Detail>{size.pixels}</Text.Detail>
195195
</Text.Subheadline>
@@ -207,7 +207,7 @@ export const component = () => (
207207
<InsetSquishColorWrapper key={size.name}>
208208
<Spacings.InsetSquish scale={size.name}>
209209
<Button>
210-
<Text.Subheadline elementType="h4">
210+
<Text.Subheadline as="h4">
211211
{size.name.toUpperCase()}
212212
<Text.Detail>{size.pixels}</Text.Detail>
213213
</Text.Subheadline>

‎src/components/spacings/stack/stack.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ storiesOf('Components|Spacings', module)
4646
{sizes.map(size => (
4747
<StackColorWrapper key={size.name}>
4848
<Inset scale="m">
49-
<Text.Subheadline elementType="h4">
49+
<Text.Subheadline as="h4">
5050
{size.name.toUpperCase()}
5151
<Text.Detail>{size.pixels}</Text.Detail>
5252
</Text.Subheadline>

‎src/components/tag/tag.js

+7-21
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ const getContentWrapperStyles = (props, theme) => {
4747
4848
/* fixing things for IE11 ... */
4949
width: 100%;
50+
51+
small {
52+
color: ${getTextDetailColor(props.isDisabled, theme)};
53+
}
5054
`;
5155
};
5256

@@ -126,22 +130,10 @@ export const TagLinkBody = props => {
126130
text-decoration: none;
127131
`}
128132
>
129-
<Text.Detail
130-
css={theme => css`
131-
color: ${getTextDetailColor(props.isDisabled, theme)};
132-
`}
133-
>
134-
{props.children}
135-
</Text.Detail>
133+
<Text.Detail>{props.children}</Text.Detail>
136134
</Link>
137135
) : (
138-
<Text.Detail
139-
css={theme => css`
140-
color: ${getTextDetailColor(props.isDisabled, theme)};
141-
`}
142-
>
143-
{props.children}
144-
</Text.Detail>
136+
<Text.Detail>{props.children}</Text.Detail>
145137
)}
146138
</div>
147139
);
@@ -196,13 +188,7 @@ export const TagNormalBody = props => (
196188
]}
197189
onClick={props.isDisabled ? undefined : props.onClick}
198190
>
199-
<Text.Detail
200-
css={theme => css`
201-
color: ${getTextDetailColor(props.isDisabled, theme)};
202-
`}
203-
>
204-
{props.children}
205-
</Text.Detail>
191+
<Text.Detail>{props.children}</Text.Detail>
206192
</div>
207193
);
208194
TagNormalBody.displayName = 'TagNormalBody';

‎src/components/typography/text/README.md

+7-4
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,19 @@ Wraps the given text in the given HTML header `size`.
1515
#### Usage
1616

1717
```js
18-
<Text.Headline elementType="h1">{'The title'}</Text.Headline>
18+
<Text.Headline as="h1">{'The title'}</Text.Headline>
1919
```
2020

2121
#### Properties
2222

2323
| Props | Type | Required | Values | Default | Description |
2424
| ------------- | ---------------- | :------: | -------------------- | ------- | -------------------------------------------------------------------- |
25-
| `elementType` | `String` | ✅ | `['h1', 'h2', 'h3']` | - | - |
25+
| `as` | `String` | ✅ | `['h1', 'h2', 'h3']` | - | - |
2626
| `children` | `PropTypes.node` | ✅ (\*) | - | - | - |
2727
| `intlMessage` | `intl message` | ✅ (\*) | - | - | An intl message object that will be rendered with `FormattedMessage` |
2828
| `title` | `String` | - | - | - | Text to show in a tooltip on hover over the element |
2929
| `truncate` | `Bool` | - | - | `false` | Option for truncate content in case the screen has small width |
30+
| `elementType` | `String` | - | `['h1', 'h2', 'h3']` | - | ⚠️ Deprecated |
3031

3132
> `*`: `children` is required only if `intlMessage` is not provided
3233
@@ -50,13 +51,14 @@ Wraps the given text in the given HTML header `size`.
5051

5152
| Props | Type | Required | Values | Default |
5253
| ------------- | ---------------- | :------: | ----------------------------------------------------------------- | ------- |
53-
| `elementType` | `String` | ✅ | `['h4', 'h5']` | - |
54+
| `as` | `String` | ✅ | `['h4', 'h5']` | - |
5455
| `isBold` | `Boolean` | - | - | `false` |
5556
| `tone` | `String` | - | `['primary', 'secondary', 'information', 'positive', 'negative']` | - |
5657
| `children` | `PropTypes.node` | ✅ (\*) | - | - |
5758
| `intlMessage` | `intl message` | ✅ (\*) | - | - | An intl message object that will be rendered with `FormattedMessage` |
5859
| `title` | `String` | - | - | - |
5960
| `truncate` | `Bool` | - | - | `false` |
61+
| `elementType` | `String` | - | `['h4', 'h5']` | - | ⚠️ Deprecated |
6062

6163
> `*`: `children` is required only if `intlMessage` is not provided
6264
@@ -94,14 +96,15 @@ Wraps the given text in a `<p>` element, for normal content.
9496

9597
| Props | Type | Required | Values | Default |
9698
| ------------- | ---------------- | :------: | ----------------------------------------------------------------------------- | ------- |
99+
| `as` | `String` | - | `['p', 'span']` | - |
97100
| `isBold` | `Boolean` | - | - | `false` |
98101
| `isItalic` | `Boolean` | - | - | `false` |
99102
| `tone` | `String` | - | `['primary', 'secondary', 'information', 'positive', 'negative', 'inverted']` | - |
100103
| `children` | `PropTypes.node` | ✅ (\*) | - | - |
101104
| `intlMessage` | `intl message` | ✅ (\*) | - | - | An intl message object that will be rendered with `FormattedMessage` |
102105
| `title` | `String` | - | - | - |
103106
| `truncate` | `Bool` | - | - | `false` |
104-
| `isInline` | `Bool` | - | - | `false` |
107+
| `isInline` | `Bool` | - | - | `false` | ⚠️ Deprecated |
105108

106109
> `*`: `children` is required only if `intlMessage` is not provided
107110

0 commit comments

Comments
 (0)