Add alpha page with examples

Author: chazdean

polaris.shopify.com/content/components/bleed/index.md

@@ -0,0 +1,27 @@
+---
+title: Bleed
+description: Use to create a container that applies negative margins. This will allow content to Bleed into the surrounding layout.
+category: Structure
+keywords:
+  - layout
+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.
+examples:
+  - fileName: bleed-vertical.tsx
+    title: Vertical
+    description: >-
+      Use to set bleed vertically.
+  - fileName: bleed-horizontal.tsx
+    title: Horizontal
+    description: >-
+      Use to set bleed horizontally.
+  - fileName: bleed-specific-direction.tsx
+    title: Specific direction
+    description: >-
+      Use to set bleed in a specific direction
+  - fileName: bleed-all-directions.tsx
+    title: All directions
+    description: >-
+      Use to set bleed in all directions
+---

polaris.shopify.com/pages/examples/bleed-all-directions.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Bleed, Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+const styles = {
+  background: 'var(--p-background-selected)',
+  borderRadius: 'var(--p-border-radius-05)',
+  border: '1px solid var(--p-surface-dark)',
+  padding: 'var(--p-space-4)',
+  height: 'var(--p-space-12)',
+  opacity: 0.7,
+};
+
+function BleedAllDirectionsExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <Box background="surface" border="base" padding="4">
+        <Bleed spacing="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              All directions
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+    </div>
+  );
+}
+
+export default withPolarisExample(BleedAllDirectionsExample);

polaris.shopify.com/pages/examples/bleed-horizontal.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Bleed, Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+const styles = {
+  background: 'var(--p-background-selected)',
+  borderRadius: 'var(--p-border-radius-05)',
+  border: '1px solid var(--p-surface-dark)',
+  padding: 'var(--p-space-4)',
+  height: 'var(--p-space-12)',
+  opacity: 0.7,
+};
+
+function BleedHorizontalExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <Box background="surface" border="base" padding="4">
+        <Bleed horizontal="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              horizontal
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+    </div>
+  );
+}
+
+export default withPolarisExample(BleedHorizontalExample);

polaris.shopify.com/pages/examples/bleed-specific-direction.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {Bleed, Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+const styles = {
+  background: 'var(--p-background-selected)',
+  borderRadius: 'var(--p-border-radius-05)',
+  border: '1px solid var(--p-surface-dark)',
+  padding: 'var(--p-space-4)',
+  height: 'var(--p-space-12)',
+  opacity: 0.7,
+};
+
+function BleedSpecificDirectionExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <Box background="surface" border="base" padding="4">
+        <Bleed top="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              top
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+      <br />
+      <Box background="surface" border="base" padding="4">
+        <Bleed right="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              right
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+      <br />
+      <Box background="surface" border="base" padding="4">
+        <Bleed left="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              left
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+      <br />
+      <Box background="surface" border="base" padding="4">
+        <Bleed bottom="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              bottom
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+      <br />
+    </div>
+  );
+}
+
+export default withPolarisExample(BleedSpecificDirectionExample);

polaris.shopify.com/pages/examples/bleed-vertical.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Bleed, Box, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+const styles = {
+  background: 'var(--p-background-selected)',
+  borderRadius: 'var(--p-border-radius-05)',
+  border: '1px solid var(--p-surface-dark)',
+  padding: 'var(--p-space-4)',
+  height: 'var(--p-space-12)',
+  opacity: 0.7,
+};
+
+function BleedVerticalExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <Box background="surface" border="base" padding="4">
+        <Bleed vertical="6">
+          <div style={styles}>
+            <Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
+              vertical
+            </Text>
+          </div>
+        </Bleed>
+      </Box>
+    </div>
+  );
+}
+
+export default withPolarisExample(BleedVerticalExample);