diff --git a/polaris-react/src/components/Text/README.md b/polaris-react/src/components/Text/README.md deleted file mode 100644 index 02b51c047e6..00000000000 --- a/polaris-react/src/components/Text/README.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -name: Text -category: Titles and text -keywords: - - titles - - text - - typographic - - spacing - - display - - heading - - body - - success - - critical - - warning - - subdued - - regular - - medium - - semibold - - bold - - list -status: - value: Alpha - message: This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution. ---- - -# Text - -Typography helps establish hierarchy and communicate important content by creating clear visual patterns. - ---- - -## Examples - -### Heading extra small - -Use to create a extra small heading text. - -```jsx - - Online store dashboard - -``` - -### Heading small - -Use to create a small heading text. - -```jsx - - Online store dashboard - -``` - -### Heading medium - -Use to create a medium heading text. - -```jsx - - Online store dashboard - -``` - -### Heading large - -Use to create a large heading text. - -```jsx - - Online store dashboard - -``` - -### Heading extra large - -Use to create an extra large heading text. - -```jsx - - Online store dashboard - -``` - -### Heading 2xl - -Use to create a 2xl heading text. - -```jsx - - Online store dashboard - -``` - -### Heading 3xl - -Use to create a 3xl heading text. - -```jsx - - Online store dashboard - -``` - -### Heading 4xl - -Use to create a 4xl heading text. - -```jsx - - Online store dashboard - -``` - -### Body small - -Use to create a small body text. - -```jsx - - Shopify POS is the easiest way to sell your products in person. Available for - iPad, iPhone, and Android. - -``` - -### Body medium - -Use to create a medium body text. - -```jsx - - Shopify POS is the easiest way to sell your products in person. Available for - iPad, iPhone, and Android. - -``` - -### Body large - -Use to create a large body text. - -```jsx - - Shopify POS is the easiest way to sell your products in person. Available for - iPad, iPhone, and Android. - -``` - -### With align inherit - -Use to inherit parent alignment. - -```jsx - - Manage your Shopify store on-the-go with real-time notifications, access to - your dashboard, and order management, all from your smartphone. - -``` - -### With align start - -Use to align text at start of horizontal line. - -```jsx - - Manage your Shopify store on-the-go with real-time notifications, access to - your dashboard, and order management, all from your smartphone. - -``` - -### With align center - -Use to align text at center of horizontal line. - -```jsx - - Manage your Shopify store on-the-go with real-time notifications, access to - your dashboard, and order management, all from your smartphone. - -``` - -### With align end - -Use to align text at end of horizontal line. - -```jsx - - Manage your Shopify store on-the-go with real-time notifications, access to - your dashboard, and order management, all from your smartphone. - -``` - -### With align justify - -Use to align text on a vertical line. - -```jsx - - Manage your Shopify store on-the-go with real-time notifications, access to - your dashboard, and order management, all from your smartphone. - -``` - -### With font weight regular - -Use to give text a regular font weight. - -```jsx - - Sales this year - -``` - -### With font weight medium - -Use to give text a medium font weight. - -```jsx - - Sales this year - -``` - -### With font weight semibold - -Use to give text a semibold font weight. - -```jsx - - Sales this year - -``` - -### With font weight bold - -Use to give text a bold font weight. - -```jsx - - Sales this year - -``` - -### With color success - -Use in combination with a symbol showing an increasing value to indicate an upward trend. - -```jsx - - Orders increased - -``` - -### With color critical - -Use in combination with a symbol showing a decreasing value to indicate a downward trend. - -```jsx - - Orders decreased - -``` - -### With color warning - -Use to denote something that needs attention, or that merchants need to take action on. - -```jsx - - Scheduled maintenance - -``` - -### With color subdued - -Use to de-emphasize a piece of text that is less important to merchants than other nearby text. May also be used to indicate when normal content is absent, for example, “No supplier listed”. Don’t use only for aesthetic effect. - -```jsx - - No supplier listed - -``` - -### In a definition list - -Use as the `dt` and `dd` elements in a definition list - -```jsx -
- - Definition Title - - - Definition Description - -
-``` diff --git a/polaris.shopify.com/content/components/layout-and-structure/bleed.md b/polaris.shopify.com/content/components/layout-and-structure/bleed.md index b88d3ff4cc1..42fffbdd9e5 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/bleed.md +++ b/polaris.shopify.com/content/components/layout-and-structure/bleed.md @@ -3,7 +3,6 @@ title: Bleed category: Layout and structure keywords: - layout -status: Alpha examples: - fileName: bleed-horizontal.tsx title: Horizontal @@ -28,13 +27,6 @@ Applies negative margin to allow content to bleed out into the surrounding layou - - This component is a work in progress and ready for exploratory usage, with - breaking changes expected in minor version updates. Please use with caution. - Learn more about our [component - lifecycles](/getting-started/components-lifecycle). - - diff --git a/polaris.shopify.com/content/components/layout-and-structure/block-stack.md b/polaris.shopify.com/content/components/layout-and-structure/block-stack.md index e0b1c73d8bc..9bed02f0fe6 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/block-stack.md +++ b/polaris.shopify.com/content/components/layout-and-structure/block-stack.md @@ -10,7 +10,6 @@ keywords: - equal width - right-aligned stack - stack layout -status: Alpha examples: - fileName: block-stack-with-gap.tsx title: Gap @@ -35,13 +34,6 @@ Use to display children vertically and horizontally with full width by default. - - This component is a work in progress and ready for exploratory usage, with - breaking changes expected in minor version updates. Please use with caution. - Learn more about our [component - lifecycles](/getting-started/components-lifecycle). - - diff --git a/polaris.shopify.com/content/components/layout-and-structure/box.md b/polaris.shopify.com/content/components/layout-and-structure/box.md index 7c1af461157..e1c69037fc2 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/box.md +++ b/polaris.shopify.com/content/components/layout-and-structure/box.md @@ -6,7 +6,6 @@ keywords: - box - responsive - tokens -status: Alpha examples: - fileName: box-with-color.tsx title: Color @@ -39,13 +38,6 @@ Box is the most primitive layout component. It’s a way to access Polaris desig - - This component is a work in progress and ready for exploratory usage, with - breaking changes expected in minor version updates. Please use with caution. - Learn more about our [component - lifecycles](/getting-started/components-lifecycle). - - diff --git a/polaris.shopify.com/content/components/layout-and-structure/card.md b/polaris.shopify.com/content/components/layout-and-structure/card.md index 2b6fdfc6a81..f1d930e2abf 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/card.md +++ b/polaris.shopify.com/content/components/layout-and-structure/card.md @@ -21,7 +21,6 @@ keywords: - subdued card for secondary content - callout - call out -status: Alpha examples: - fileName: card-default.tsx title: Default @@ -50,13 +49,6 @@ Cards are used to group similar concepts and tasks together for merchants to sca - - This component is a work in progress and ready for exploratory usage, with - breaking changes expected in minor version updates. Please use with caution. - Learn more about our [component - lifecycles](/getting-started/components-lifecycle). - - diff --git a/polaris.shopify.com/content/components/layout-and-structure/divider.md b/polaris.shopify.com/content/components/layout-and-structure/divider.md index c44076f0587..deaf4f9fa20 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/divider.md +++ b/polaris.shopify.com/content/components/layout-and-structure/divider.md @@ -5,7 +5,6 @@ keywords: - layout - divider - border -status: Alpha examples: - fileName: divider-with-border-color.tsx title: Color @@ -21,13 +20,6 @@ Use to separate or group content. - - This component is a work in progress and ready for exploratory usage, with - breaking changes expected in minor version updates. Please use with caution. - Learn more about our [component - lifecycles](/getting-started/components-lifecycle). - - diff --git a/polaris.shopify.com/content/components/layout-and-structure/grid.md b/polaris.shopify.com/content/components/layout-and-structure/grid.md index e355643d9c2..2ad640977d2 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/grid.md +++ b/polaris.shopify.com/content/components/layout-and-structure/grid.md @@ -12,7 +12,6 @@ keywords: - containers - full width containers - css grid -status: Alpha examples: - fileName: grid-two-column.tsx title: Two column @@ -37,13 +36,6 @@ Create complex layouts based on [CSS Grid](https://developer.mozilla.org/en-US/d - - This component is a work in progress and ready for exploratory usage, with - breaking changes expected in minor version updates. Please use with caution. - Learn more about our [component - lifecycles](/getting-started/components-lifecycle). - - diff --git a/polaris.shopify.com/content/components/layout-and-structure/inline-grid.md b/polaris.shopify.com/content/components/layout-and-structure/inline-grid.md index c102638be4c..d2974042778 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/inline-grid.md +++ b/polaris.shopify.com/content/components/layout-and-structure/inline-grid.md @@ -6,7 +6,6 @@ keywords: - columns - grid - responsive -status: Alpha examples: - fileName: inline-grid-with-varying-gap.tsx title: Gap @@ -31,13 +30,6 @@ Use to lay out children horizontally with equal gap between columns. Based on [C - - This component is a work in progress and ready for exploratory usage, with - breaking changes expected in minor version updates. Please use with caution. - Learn more about our [component - lifecycles](/getting-started/components-lifecycle). - - diff --git a/polaris.shopify.com/content/components/layout-and-structure/inline-stack.md b/polaris.shopify.com/content/components/layout-and-structure/inline-stack.md index 9eb103398da..bf863882b97 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/inline-stack.md +++ b/polaris.shopify.com/content/components/layout-and-structure/inline-stack.md @@ -13,7 +13,6 @@ keywords: - vertical centering - horizontal row of components - stack -status: Alpha examples: - fileName: inline-stack-with-non-wrapping.tsx title: Non-wrapping @@ -42,13 +41,6 @@ Use to display children horizontally in a row. Based on CSS Flexbox. - - This component is a work in progress and ready for exploratory usage, with - breaking changes expected in minor version updates. Please use with caution. - Learn more about our [component - lifecycles](/getting-started/components-lifecycle). - -