@iress-oss/ids-mcp-server 6.0.0-alpha.7 → 6.0.0-alpha.9

package/generated/docs/components_components-styled-docs.md

@@ -0,0 +1,477 @@
+Styled
+======
+
+Overview
+--------
+
+The `IressStyled` component provides an unopinionated wrapper that gives you direct access to all supported styling properties. Use it when you need custom styling without creating a dedicated component or writing custom CSS.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-styled--default)
+
+This is styled content using Panda CSS
+
+Hide codedrawOpen in CodeSandbox
+
+<IressStyled
+  bg\="colour.neutral.20"
+  borderRadius\="radius.050"
+  p\="spacing.4"
+\>
+  This is styled content using Panda CSS
+</IressStyled\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| bg | 
+string
+
+
+
+ | \- | colour.neutral.20 |
+| borderRadius | 
+
+string
+
+
+
+ | \- | radius.050 |
+| children | 
+
+Content to be styled.
+
+ReactNode
+
+
+
+ | \- | 
+
+"This is styled content using Panda CSS"
+
+ |
+| element | 
+
+The HTML element or custom component to render.
+
+T
+
+
+
+ | \- | Set object |
+| p | 
+
+string
+
+
+
+ | \- | spacing.4 |
+
+Usage
+-----
+
+### The `element` prop
+
+With the `element` prop you can select which HTML element the component should render as. It renders as a `div` by default, but can be set to any standard HTML element like `section`, `article`, `aside`, `nav`, `main`, `header`, `footer`, or `span`.
+
+This allows you to maintain proper semantic HTML structure while applying custom styling.
+
+[](./iframe.html?id=components-styled--elements)
+
+### Section Element
+
+This is rendered as a section element.
+
+### Article Element
+
+This is rendered as an article element.
+
+### Aside Element
+
+This is rendered as an aside element.
+
+### Nav Element
+
+This is rendered as a nav element.
+
+Hide codedrawOpen in CodeSandbox
+
+<IressStack gap\="spacing.3"\>
+  <IressStyled
+    bg\="colour.neutral.20"
+    borderRadius\="radius.050"
+    element\="section"
+    p\="spacing.4"
+  \>
+    <IressText element\="h3"\>
+      Section Element    </IressText\>
+    <IressText\>
+      This is rendered as a section element.    </IressText\>
+  </IressStyled\>
+  <IressStyled
+    bg\="colour.neutral.20"
+    borderRadius\="radius.050"
+    element\="article"
+    p\="spacing.4"
+  \>
+    <IressText element\="h3"\>
+      Article Element    </IressText\>
+    <IressText\>
+      This is rendered as an article element.    </IressText\>
+  </IressStyled\>
+  <IressStyled
+    bg\="colour.neutral.20"
+    borderRadius\="radius.050"
+    element\="aside"
+    p\="spacing.4"
+  \>
+    <IressText element\="h3"\>
+      Aside Element    </IressText\>
+    <IressText\>
+      This is rendered as an aside element.    </IressText\>
+  </IressStyled\>
+  <IressStyled
+    bg\="colour.neutral.20"
+    borderRadius\="radius.050"
+    element\="nav"
+    p\="spacing.4"
+  \>
+    <IressText element\="h3"\>
+      Nav Element    </IressText\>
+    <IressText\>
+      This is rendered as a nav element.    </IressText\>
+  </IressStyled\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be styled.
+
+ReactNode
+
+
+
+ | \- | \- |
+| element | 
+
+The HTML element or custom component to render.
+
+T
+
+
+
+ | \- | \- |
+
+### Styling props
+
+You can apply any of the styling props supported by the design system.
+
+[
+
+View supported styling props
+
+](/?path=/docs/styling-props-reference--docs#reference)
+
+#### Spacing
+
+Use spacing tokens to control padding and margin. The spacing system provides consistent values from `spacing.0` to `spacing.10`.
+
+[](./iframe.html?id=components-styled--spacing)
+
+Small padding (spacing.2)
+
+Medium padding (spacing.4)
+
+Large padding (spacing.6)
+
+With margin (spacing.4)
+
+Hide codedrawOpen in CodeSandbox
+
+<IressStack gap\="spacing.3"\>
+  <IressStyled
+    bg\="colour.neutral.20"
+    borderRadius\="radius.050"
+    p\="spacing.2"
+  \>
+    <IressText\>
+      Small padding (spacing.2)    </IressText\>
+  </IressStyled\>
+  <IressStyled
+    bg\="colour.neutral.20"
+    borderRadius\="radius.050"
+    p\="spacing.4"
+  \>
+    <IressText\>
+      Medium padding (spacing.4)    </IressText\>
+  </IressStyled\>
+  <IressStyled
+    bg\="colour.neutral.20"
+    borderRadius\="radius.050"
+    p\="spacing.6"
+  \>
+    <IressText\>
+      Large padding (spacing.6)    </IressText\>
+  </IressStyled\>
+  <IressStyled
+    bg\="colour.system.info.surface"
+    borderRadius\="radius.050"
+    m\="spacing.4"
+    p\="spacing.4"
+  \>
+    <IressText\>
+      With margin (spacing.4)    </IressText\>
+  </IressStyled\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be styled.
+
+ReactNode
+
+
+
+ | \- | \- |
+| element | 
+
+The HTML element or custom component to render.
+
+T
+
+
+
+ | \- | Set object |
+| margin | 
+
+\-
+
+ | \- | \- |
+| padding | 
+
+\-
+
+ | \- | \- |
+
+#### Colors
+
+Apply design system color tokens to set background colors, text colors, and border colors. Use semantic color tokens like `colour.system.info.surface` for consistent theming.
+
+[](./iframe.html?id=components-styled--colors)
+
+Info color scheme
+
+Success color scheme
+
+Warning color scheme
+
+Danger color scheme
+
+Hide codedrawOpen in CodeSandbox
+
+<IressStack gap\="spacing.3"\>
+  <IressStyled
+    bg\="colour.system.info.surface"
+    borderRadius\="radius.050"
+    color\="colour.system.info.text"
+    p\="spacing.4"
+  \>
+    <IressText\>
+      Info color scheme    </IressText\>
+  </IressStyled\>
+  <IressStyled
+    bg\="colour.system.success.surface"
+    borderRadius\="radius.050"
+    color\="colour.system.success.text"
+    p\="spacing.4"
+  \>
+    <IressText\>
+      Success color scheme    </IressText\>
+  </IressStyled\>
+  <IressStyled
+    bg\="colour.system.warning.surface"
+    borderRadius\="radius.050"
+    color\="colour.system.warning.text"
+    p\="spacing.4"
+  \>
+    <IressText\>
+      Warning color scheme    </IressText\>
+  </IressStyled\>
+  <IressStyled
+    bg\="colour.system.danger.surface"
+    borderRadius\="radius.050"
+    color\="colour.system.danger.text"
+    p\="spacing.4"
+  \>
+    <IressText\>
+      Danger color scheme    </IressText\>
+  </IressStyled\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backgroundColor | 
+\-
+
+ | \- | \- |
+| children | 
+
+Content to be styled.
+
+ReactNode
+
+
+
+ | \- | \- |
+| color | 
+
+\-
+
+ | \- | \- |
+| element | 
+
+The HTML element or custom component to render.
+
+T
+
+
+
+ | \- | Set object |
+
+#### Complex compositions
+
+Combine multiple styling properties to create rich, semantic HTML structures. The component provides full access to Panda CSS props for maximum flexibility.
+
+[](./iframe.html?id=components-styled--complex)
+
+Complex Styled Component
+------------------------
+
+The `IressStyled` component provides full access to Panda CSS styling props, allowing you to create complex layouts and designs without writing custom CSS.
+
+This example demonstrates combining multiple styling properties to create a rich, semantic HTML structure with custom styling.
+
+Hide codedrawOpen in CodeSandbox
+
+<IressStyled
+  bg\="colour.neutral.10"
+  borderRadius\="radius.100"
+  layerStyle\="elevation.raised"
+  m\="auto"
+  maxWidth\="2/12"
+  p\="spacing.5"
+\>
+  <IressStyled mb\="spacing.4"\>
+    <IressIcon
+      color\="colour.system.info.text"
+      name\="info"
+      textStyle\="typography.body.lg"
+    />
+    <IressText
+      element\="h2"
+      textStyle\="typography.heading.3"
+    \>
+      Complex Styled Component    </IressText\>
+  </IressStyled\>
+  <IressText
+    element\="p"
+    mb\="spacing.3"
+  \>
+    The{' '}
+    <code\>
+      IressStyled    </code\>
+    {' '}component provides full access to Panda CSS styling props, allowing you to create complex layouts and designs without writing custom CSS.
+  </IressText\>
+  <IressStyled
+    bg\="colour.neutral.20"
+    borderRadius\="radius.050"
+    p\="spacing.4"
+  \>
+    <IressText\>
+      This example demonstrates combining multiple styling properties to create a rich, semantic HTML structure with custom styling.    </IressText\>
+  </IressStyled\>
+</IressStyled\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| backgroundColor | 
+\-
+
+ | \- | \- |
+| borderRadius | 
+
+\-
+
+ | \- | \- |
+| children | 
+
+Content to be styled.
+
+ReactNode
+
+
+
+ | \- | \- |
+| element | 
+
+The HTML element or custom component to render.
+
+T
+
+
+
+ | \- | Set object |
+| margin | 
+
+\-
+
+ | \- | \- |
+| padding | 
+
+\-
+
+ | \- | \- |
+
+When to use
+-----------
+
+*   **Custom layouts**: When you need to create a unique layout that doesn't match existing components
+*   **Semantic HTML**: When you need to use specific HTML elements with custom styling
+*   **Quick prototyping**: For rapid development without creating dedicated styled components
+*   **One-off designs**: When a design pattern doesn't warrant creating a reusable component
+
+When not to use
+---------------
+
+*   **Repeated patterns**: If you're using the same styling multiple times, create a dedicated component instead
+*   **Simple spacing**: Use layout components like `IressStack` or `IressInline` for simple spacing needs
+*   **Typography**: Use `IressText` for text styling with semantic elements