diff --git a/package/src/components/Select/__snapshots__/Select.test.js.snap b/package/src/components/Select/__snapshots__/Select.test.js.snap index 8e6743f1..0fe7dbb1 100644 --- a/package/src/components/Select/__snapshots__/Select.test.js.snap +++ b/package/src/components/Select/__snapshots__/Select.test.js.snap @@ -28,7 +28,7 @@ exports[`basic snapshot test 1`] = ` Select options

Title Text
-
Heading Text
-
Subheading Text
-
Body Text
-
Label Text
-
Caption Text
- -##### Choosing a type style - -Type styles are generally named for their usage within the UI. The Body text style is the most generic, and is used throughout the UI in various capacities. - -#### Type scale - -This type scale defines the font sizes that can be used by the default Catalyst theme. Type generally does not exceed 1.5rem/24px. - -| rem | px | Actual size | -| -------- | ---- | ------------------------------------------------------------------------------------------------------------ | -| 0.75rem | 12px | Connecting the world through commerce | -| 0.875rem | 14px | Connecting the world through commerce | -| 1rem | 16px | Connecting the world through commerce | -| 1.125rem | 18px | Connecting the world through commerce | -| 1.25rem | 20px | Connecting the world through commerce | -| 1.5rem | 24px | Connecting the world through commerce | -| 1.75rem | 28px | Connecting the world through commerce | -| 2rem | 32px | Connecting the world through commerce | -| 2.25rem | 36px | Connecting the world through commerce | -| 2.625rem | 42px | Connecting the world through commerce | - -#### Type treatments - -##### Font weight - -The default Catalyst theme uses [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro) font in Regular and Bold weights, which can be used to create content hierarchy. - -| | Regular 400 | Bold 700 | SemiBold 600 | -| ---------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| Title | Regular 400 | Bold 700 | | -| Heading | Regular 400 | Bold 700 | | -| Subheading | Regular 400 | Bold 700 | | -| Body | Regular 400 | Bold 700 | SemiBold 600 | -| Label | Regular 400 | Bold 700 | | -| Caption | Regular 400 | Bold 700 | | - -Generally used for emphasis, the bold weight shouldn’t be applied to anything longer than short text strings. - -##### Line height - -Leading, or line-height, is an important factor in the legibility of copy. The default Catalyst theme uses two line heights for text: - -- 1.5 for body copy -- 1.25 for labels, captions, headings, subheadings and titles. - -| Line height | Ratio | -| ----------------------- | ------ | -| Body text | 1:1.5 | -| Headers, titles, labels | 1:1.25 | - -Body copy benefits from more spacing between lines for improved legibility, while the other styles rarely run for multiple lines and don’t require as much leading. - -#### Type styles specs and usage - -Here are the typography specs for the default Catalyst theme at a glance. For information about using a custom theme to override these defaults, refer to [Theming Components](./#!/Theming%20Components). - -
Title Text
-
Heading Text
-
Subheading Text
-
-**Usage**

-Use the Title style for top-level admin panel titles.

-**Specs**

-Weight - Regular
-Size - 1.5rem
-Line height - 1.25
-Character spacing - .03em +### Overview + +All Catalyst components and text use default styles as specified in the Typography component and theme. See the [Material-UI docs for Typography](https://material-ui.com/api/typography/) for more details. + +### Types + +Use these default types by specifying the correct `variant` from below: + +#### Headers + +Use headers in the Primary App Bar, the titles of Cards, Inline Alerts, the Confirm Dialog and more. Header text by default is not bolded. Use `fontWeightSemiBold` to add emphasis. + +```jsx +import Typography from "@material-ui/core/Typography"; +import { typography } from '@material-ui/system'; +
+ + h1. Connecting the world through commerce + + + h2. Connecting the world through commerce + + + h3. Connecting the world through commerce + + + h4. Connecting the world through commerce + + + h5. Connecting the world through commerce + + + h6. Connecting the world through commerce +
- -
-**Usage**

-Use the Heading style for card titles.

-**Specs**

-Weight - Regular
-Size - 1rem
-Line height - 1.25
-Character spacing - .03em +``` + +#### Body text + +Body text is used in Tables and various Card content. + +```jsx +import Typography from "@material-ui/core/Typography"; +
+ + body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam + dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. + + + body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam + dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam. +
+``` -
-**Usage**

-Use the Subheading style to denote new sections within cards.

-**Specs**

-Weight - Regular
-Size - 1.125rem
-Line height - 1.25
-Character spacing - .03em -
+#### Captions -
Body Text
-
Label Text
-
Caption Text
-
-**Usage**

-The Body text style is used widely throughout the UI. Any text that isn’t a title, heading, subheading, label or caption would generally use the Body style. -

-**Specs**

-Weight - Regular
-Size - 1rem
-Line height - 1.5
-Character spacing - .03em -
+Captions are used in Chips and help text under form fields, often in a lighter color. -
-**Usage**

-Use labels with form field and input elements to signify the element’s function to the user.

-**Specs**

-Weight - Regular
-Size - .875rem
-Line height - 1.25
-Character spacing - .02em +```jsx +import Typography from "@material-ui/core/Typography"; +
+ + caption text +
+``` + +#### Buttons + +Button text always uses font weight of semibold, unless it is a text-only button. Button text can be in dark colors, or white. -
-**Usage**

-Use the Caption style for help/hint text. It’s used with some form fields which require a description, and can also be used stand-alone within a card when necessary. -

-**Specs**

-Weight - Regular
-Size - .875rem
-Line height - 1.25
-Character spacing - .02em +```jsx +import Typography from "@material-ui/core/Typography"; +
+ + Button +
+``` \ No newline at end of file