Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

fix: text component docs #205

Merged
kuzhelov merged 6 commits into from
Sep 7, 2018
Merged

fix: text component docs #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
efe8050
fixing shorthand/children doc view for font sizes & font weights
Sep 6, 2018
531cf7f
adding shorthand for other text variants
Sep 7, 2018
8b28f39
adding accessibility content
Sep 7, 2018
c29dec7
Merge branch 'master' into fix/text-component-docs
kuzhelov Sep 7, 2018
7a51081
Merge branch 'master' into fix/text-component-docs
kuzhelov Sep 7, 2018
3be6141
update changelog
kuzhelov-ms Sep 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Correct Teams theme site variables @sergiorv ([#110](https://github.com/stardust-ui/react/pull/110))
- Fixed missing colors in Teams' siteVariables @mnajdova ([#200](https://github.com/stardust-ui/react/pull/200))
- Fixed Teams' siteVariables font sizes @levithomason ([#204](https://github.com/stardust-ui/react/pull/204))
- Fixed docs examples of `Text` component @codepretty ([#205](https://github.com/stardust-ui/react/pull/205))

### Features
- Add `state` to `props` in component styling functions @Bugaa92 ([#173](https://github.com/stardust-ui/react/pull/173))
Expand All @@ -31,6 +32,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Add `ButtonGroup` component @mnajdova ([#179](https://github.com/stardust-ui/react/pull/179))
- Add Button `text` prop @mnajdova ([#177](https://github.com/stardust-ui/react/pull/177))
- Add accessibility keyboard action handlers @sophieH29 ([#121](https://github.com/stardust-ui/react/pull/121))
- Add accessibility description for `Text` component @codepretty ([#205](https://github.com/stardust-ui/react/pull/205))

<!--------------------------------[ v0.5.0 ]------------------------------- -->
## [v0.5.0](https://github.com/stardust-ui/react/tree/v0.5.0) (2018-08-30)
Expand Down
8 changes: 8 additions & 0 deletions docs/src/examples/components/Text/States/TextExampleDisabled.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react'
import { Text } from '@stardust-ui/react'

const TextExampleDisabledShorthand = () => (
<Text disabled content="This feature has been disabled." />
)

export default TextExampleDisabledShorthand
6 changes: 6 additions & 0 deletions docs/src/examples/components/Text/States/TextExampleError.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from 'react'
import { Text } from '@stardust-ui/react'

const TextExampleErrorShorthand = () => <Text error content="There has been an error." />

export default TextExampleErrorShorthand
8 changes: 8 additions & 0 deletions docs/src/examples/components/Text/States/TextExampleSuccess.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react'
import { Text } from '@stardust-ui/react'

const TextExampleSuccessShorthand = () => (
<Text success content="Your action has completed successfully." />
)

export default TextExampleSuccessShorthand
16 changes: 8 additions & 8 deletions docs/src/examples/components/Text/Types/TextSizesExample.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@ import { Text } from '@stardust-ui/react'

const TextSizesExampleShorthand = () => (
<div>
<Text size="xs">Dicta voluptatum dolorem.</Text>
<Text size="xs" content="Dicta voluptatum dolorem." />
Copy link
Contributor

@kuzhelov kuzhelov Sep 7, 2018

Choose a reason for hiding this comment

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

👍

<br />
<Text size="sm">Dicta voluptatum dolorem.</Text>
<Text size="sm" content="Dicta voluptatum dolorem." />
<br />
<Text size="md">Dicta voluptatum dolorem.</Text>
<Text size="md" content="Dicta voluptatum dolorem." />
<br />
<Text size="lg">Dicta voluptatum dolorem.</Text>
<Text size="lg" content="Dicta voluptatum dolorem." />
<br />
<Text size="xl">Dicta voluptatum dolorem.</Text>
<Text size="xl" content="Dicta voluptatum dolorem." />
<br />
<Text size="2x">Dicta voluptatum dolorem.</Text>
<Text size="2x" content="Dicta voluptatum dolorem." />
<br />
<Text size="3x">Dicta voluptatum dolorem.</Text>
<Text size="3x" content="Dicta voluptatum dolorem." />
<br />
<Text size="4x">Dicta voluptatum dolorem.</Text>
<Text size="4x" content="Dicta voluptatum dolorem." />
</div>
)
export default TextSizesExampleShorthand
23 changes: 23 additions & 0 deletions docs/src/examples/components/Text/Types/TextSizesExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react'
import { Text } from '@stardust-ui/react'

const TextSizesExample = () => (
<div>
<Text size="xs">Dicta voluptatum dolorem.</Text>
Copy link
Contributor

@kuzhelov kuzhelov Sep 7, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

actually, this raises another point related to the values used for sizes. The problem is that it is hard to intuitively reason for the client about, say, which one is bigger: xl or 2x. Would propose to use values that are more intuitive in this sense (and address the issue by means of separate PR).

Quite similar sentiments are expressed in #136.

Copy link
Collaborator Author

@codepretty codepretty Sep 9, 2018

Choose a reason for hiding this comment

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

Completely agree. My next PR is going to use a theme-based enum to show the appropriate sizes.

What I'm still not sure about is what to do for naming and how that could vary among themes...

<br />
<Text size="sm">Dicta voluptatum dolorem.</Text>
<br />
<Text size="md">Dicta voluptatum dolorem.</Text>
<br />
<Text size="lg">Dicta voluptatum dolorem.</Text>
<br />
<Text size="xl">Dicta voluptatum dolorem.</Text>
<br />
<Text size="2x">Dicta voluptatum dolorem.</Text>
<br />
<Text size="3x">Dicta voluptatum dolorem.</Text>
<br />
<Text size="4x">Dicta voluptatum dolorem.</Text>
</div>
)
export default TextSizesExample
10 changes: 5 additions & 5 deletions docs/src/examples/components/Text/Types/TextWeightsExample.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import { Text } from '@stardust-ui/react'

const TextWeightsExampleShorthand = () => (
<div>
<Text weight="light">This text is light.</Text>
<Text weight="light" content="This text is light." />
<br />
<Text weight="semilight">This text is semilight.</Text>
<Text weight="semilight" content="This text is semilight." />
<br />
<Text weight="regular">This text is regular.</Text>
<Text weight="regular" content="This text is regular." />
<br />
<Text weight="semibold">This text is semibold.</Text>
<Text weight="semibold" content="This text is semibold." />
<br />
<Text weight="bold">This text is bold.</Text>
<Text weight="bold" content="This text is bold." />
</div>
)
export default TextWeightsExampleShorthand
17 changes: 17 additions & 0 deletions docs/src/examples/components/Text/Types/TextWeightsExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react'
import { Text } from '@stardust-ui/react'

const TextWeightsExample = () => (
<div>
<Text weight="light">This text is light.</Text>
<br />
<Text weight="semilight">This text is semilight.</Text>
<br />
<Text weight="regular">This text is regular.</Text>
<br />
<Text weight="semibold">This text is semibold.</Text>
<br />
<Text weight="bold">This text is bold.</Text>
</div>
)
export default TextWeightsExample
6 changes: 6 additions & 0 deletions docs/src/examples/components/Text/Variations/TextExampleAtMention.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from 'react'
import { Text } from '@stardust-ui/react'

const TextExampleAtMentionShorthand = () => <Text atMention content="@Russell Wilson" />

export default TextExampleAtMentionShorthand
8 changes: 8 additions & 0 deletions docs/src/examples/components/Text/Variations/TextExampleTimestamp.shorthand.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react'
import { Text } from '@stardust-ui/react'

const TextExampleTimestampShorthand = () => (
<Text timestamp title="August 28, 2018 at 11:16PM" content="Yesterday 11:16PM" />
)

export default TextExampleTimestampShorthand
3 changes: 3 additions & 0 deletions src/components/Text/Text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ export interface ITextProps {

/**
* A component containing text
* @accessibility
* Text is how people read the content on your website.
* Ensure that a contrast ratio of at least 4.5:1 exists between text and the background behind the text.
*/
class Text extends UIComponent<Extendable<ITextProps>, any> {
static className = 'ui-text'
Expand Down