docs(aspect-ratio): update aspect ratio docs for v11 (#10636)

* docs(grid): scope storybook styles

* docs(aspect-ratio): update aspect ratio docs for v11

* docs(react): update storybook classes for next

Author: joshblack

packages/react/src/components/AspectRatio/AspectRatio-story.scss

@@ -5,7 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-.aspect-ratio-story .bx--aspect-ratio {
+.aspect-ratio-story .bx--aspect-ratio,
+.aspect-ratio-story .cds--aspect-ratio {
   background: #f7f1ff;
   padding: 1rem;
 }

packages/react/src/components/AspectRatio/next/AspectRatio.stories.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '../AspectRatio-story.scss';
+
+import React from 'react';
+import { Grid, Column } from '../../Grid';
+import { AspectRatio } from '../';
+import mdx from '../AspectRatio.mdx';
+
+export default {
+  title: 'Components/AspectRatio',
+  component: AspectRatio,
+  decorators: [
+    (Story) => (
+      <div className="aspect-ratio-story">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const AspectRatioStory = () => {
+  return (
+    <Grid>
+      <Column sm={1} md={2} lg={4}>
+        <AspectRatio ratio="1x1">Content</AspectRatio>
+      </Column>
+      <Column sm={1} md={2} lg={4}>
+        <AspectRatio ratio="1x1">Content</AspectRatio>
+      </Column>
+      <Column sm={1} md={2} lg={4}>
+        <AspectRatio ratio="1x1">Content</AspectRatio>
+      </Column>
+      <Column sm={1} md={2} lg={4}>
+        <AspectRatio ratio="1x1">Content</AspectRatio>
+      </Column>
+    </Grid>
+  );
+};
+
+AspectRatioStory.storyName = 'AspectRatio';
+
+export const Playground = {
+  argTypes: {
+    as: {
+      control: {
+        type: null,
+      },
+    },
+    children: {
+      control: {
+        type: null,
+      },
+    },
+    className: {
+      control: {
+        type: null,
+      },
+    },
+    ratio: {
+      control: {
+        type: 'select',
+      },
+      defaultValue: '1x1',
+      options: ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'],
+    },
+  },
+  render: ({ ratio }) => {
+    return (
+      <Grid>
+        <Column sm={1} md={2} lg={4}>
+          <AspectRatio ratio={ratio}>Content</AspectRatio>
+        </Column>
+        <Column sm={1} md={2} lg={4}>
+          <AspectRatio ratio={ratio}>Content</AspectRatio>
+        </Column>
+        <Column sm={1} md={2} lg={4}>
+          <AspectRatio ratio={ratio}>Content</AspectRatio>
+        </Column>
+        <Column sm={1} md={2} lg={4}>
+          <AspectRatio ratio={ratio}>Content</AspectRatio>
+        </Column>
+      </Grid>
+    );
+  },
+};

packages/react/src/components/Grid/next/Grid.stories.js

@@ -26,6 +26,15 @@ export default {
       page: mdx,
     },
   },
+  decorators: [
+    (Story) => {
+      return (
+        <div className="sb-css-grid-container">
+          <Story />
+        </div>
+      );
+    },
+  ],
 };
 
 export const Wide = () => {

packages/react/src/components/Grid/next/Grid.stories.scss

@@ -2,45 +2,45 @@
 @use '@carbon/styles/scss/type' as *;
 
 // Grid modes
-.cds--css-grid {
+.sb-css-grid-container .cds--css-grid {
   background-color: $blue-20;
   outline: 1px dashed $blue-40;
 }
 
-.cds--css-grid p {
+.sb-css-grid-container .cds--css-grid p {
   @include type-style('code-02');
 }
 
-.cds--css-grid p:first-of-type {
+.sb-css-grid-container .cds--css-grid p:first-of-type {
   //messing up progress indicator stories
   margin-top: 0;
 }
 
-.cds--css-grid.cds--css-grid--condensed {
+.sb-css-grid-container .cds--css-grid.cds--css-grid--condensed {
   background-color: $purple-20;
   outline: 1px dashed $purple-40;
 }
 
 // Only use background for subgrid example, not other subgrids in "mixed modes" story or others
-.cds--subgrid.example {
+.sb-css-grid-container .cds--subgrid.example {
   background-color: $green-20;
 }
 
 // Columns
-.cds--css-grid > [class*='col'],
-.cds--subgrid > [class*='col'] {
+.sb-css-grid-container .cds--css-grid > [class*='col'],
+.sb-css-grid-container .cds--subgrid > [class*='col'] {
   min-height: 80px;
 }
 
-.cds--css-grid > [class*='col'] {
+.sb-css-grid-container .cds--css-grid > [class*='col'] {
   background: $blue-10;
 }
 
-.cds--subgrid > [class*='col'] {
+.sb-css-grid-container .cds--subgrid > [class*='col'] {
   background: $green-10;
   outline: 1px dashed $green-30;
 }
 
-.cds--css-grid.cds--css-grid--condensed > [class*='col'] {
+.sb-css-grid-container.cds--css-grid.cds--css-grid--condensed > [class*='col'] {
   background: $purple-10;
 }