@iress-oss/ids-mcp-server 5.14.2 → 6.0.0-alpha.0

package/generated/docs/foundations-z-index-stacking-docs.md

@@ -0,0 +1,31 @@
+[](#z-index-stacking)Z-index (stacking)
+=======================================
+
+The z-index determines the stacking order of elements. Elements with a higher z-index always sit in front of elements with a lower z-index. Each index has been mapped to the appropriate elevation(s).
+
+[](#reference)Reference
+-----------------------
+
+| Name | Usage | Value |
+| --- | --- | --- |
+| DEFAULT | The default z-index used for most elements. Can be combined with raised and floating elevations. | 0 |
+| MODAL | Used for IressModal. Can be combined with floating elevation. | 400 |
+| NAVBAR | Used for navbars. Can be combined with overflow elevation. | 100 |
+| POPOVER | Used for IressPopover. Can be combined with floating elevation. | 200 |
+| SLIDEOUT | Used for IressSlideout. Can be combined with floating elevation. | 300 |
+| TOAST | Used for IressToast. Can be combined with floating elevation. | 500 |
+| TOOLTIP | Used for IressTooltip. Can be combined with floating elevation. | 600 |
+
+* * *
+
+[](#for-developers)For developers
+---------------------------------
+
+If you are using the IDS components, the z-indexes have already been mapped out to their respective components based on the usage above. They are hardcoded into the components, so you don't need to worry about them.
+
+The mapping is exported as `Z_INDEX` from the `@iress-oss/ids-components` package, in case you need to reference it in your own code.
+
+On this page
+
+*   [Reference](#reference)
+*   [For developers](#for-developers)

package/generated/docs/get-started-develop-docs.md

@@ -12,10 +12,108 @@ Set up your environment to use the latest version of the Iress Design System (ID
 [](#set-up-the-component-library)Set up the component library
 -------------------------------------------------------------
 
-1.  Install using: `yarn add @iress-oss/ids-components`
-2.  Import the styles: `import '@iress-oss/ids-components/dist/style.css'`
-3.  Import the components: `import { IressButton, IressText } from '@iress-oss/ids-components'`
-4.  Use the components: `<IressButton>Click me</IressButton>`
+1.  Install using the command line:
+    
+    \[data-radix-scroll-area-viewport\] {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      -webkit-overflow-scrolling: touch;
+    }
+    \[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+      display: none;
+    }
+    :where(\[data-radix-scroll-area-viewport\]) {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+    }
+    :where(\[data-radix-scroll-area-content\]) {
+      flex-grow: 1;
+    }
+    
+    yarn add @iress-oss/ids-components
+    
+    Copy
+    
+2.  Import the styles:
+    
+    \[data-radix-scroll-area-viewport\] {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      -webkit-overflow-scrolling: touch;
+    }
+    \[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+      display: none;
+    }
+    :where(\[data-radix-scroll-area-viewport\]) {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+    }
+    :where(\[data-radix-scroll-area-content\]) {
+      flex-grow: 1;
+    }
+    
+    import '@iress-oss/ids-components/dist/style.css';
+    
+    Copy
+    
+3.  Import the components. The provider is optional, but recommended for most applications. It sets up the design system and provides a consistent container for components like modals, slideouts, and toasts.
+    
+    \[data-radix-scroll-area-viewport\] {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      -webkit-overflow-scrolling: touch;
+    }
+    \[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+      display: none;
+    }
+    :where(\[data-radix-scroll-area-viewport\]) {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+    }
+    :where(\[data-radix-scroll-area-content\]) {
+      flex-grow: 1;
+    }
+    
+    import { IressProvider, IressButton } from '@iress-oss/ids-components';
+    
+    Copy
+    
+4.  Use the components:
+    
+    \[data-radix-scroll-area-viewport\] {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      -webkit-overflow-scrolling: touch;
+    }
+    \[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+      display: none;
+    }
+    :where(\[data-radix-scroll-area-viewport\]) {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+    }
+    :where(\[data-radix-scroll-area-content\]) {
+      flex-grow: 1;
+    }
+    
+    const App \= () \=> (
+      <IressButton onClick\={() \=> success({ children: 'Toast triggered' })}\>
+        Trigger toast  </IressButton\>
+    );
+    ReactDOM.createRoot(document.getElementById('root')!).render(
+      <IressProvider\>
+        <App />
+      </IressProvider\>,
+    );
+    
+    Copy
+    
+
+* * *
 
 [](#set-up-the-theme)Set up the theme
 -------------------------------------
@@ -27,22 +125,85 @@ Microfrontends
 
 If you are building a React App that is intended to be used as a microfrontend, please skip this step. Microfrontends should inherit the parent application's theme, and not define a theme itself, as it may conflict with other microfrontends in the same parent application.
 
-1.  Install using `yarn add @iress/ids-themes`
-2.  Import the component: `import { IressTheme } from '@iress/ids-themes'`
-3.  Add the component to your application: `<IressTheme name="iress-beta-theme-light" />`.
+1.  Install using the command line:
+    
+    \[data-radix-scroll-area-viewport\] {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      -webkit-overflow-scrolling: touch;
+    }
+    \[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+      display: none;
+    }
+    :where(\[data-radix-scroll-area-viewport\]) {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+    }
+    :where(\[data-radix-scroll-area-content\]) {
+      flex-grow: 1;
+    }
+    
+    yarn add @iress/ids-themes
+    
+    Copy
+    
+2.  Import the component:
+    
+    \[data-radix-scroll-area-viewport\] {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      -webkit-overflow-scrolling: touch;
+    }
+    \[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+      display: none;
+    }
+    :where(\[data-radix-scroll-area-viewport\]) {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+    }
+    :where(\[data-radix-scroll-area-content\]) {
+      flex-grow: 1;
+    }
+    
+    import { IressTheme } from '@iress-oss/ids-components';
+    
+    Copy
+    
+3.  Add the component to your application:
+    
+    \[data-radix-scroll-area-viewport\] {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      -webkit-overflow-scrolling: touch;
+    }
+    \[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+      display: none;
+    }
+    :where(\[data-radix-scroll-area-viewport\]) {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+    }
+    :where(\[data-radix-scroll-area-content\]) {
+      flex-grow: 1;
+    }
+    
+    ReactDOM.createRoot(document.getElementById('root')!).render(
+      <IressProvider\>
+        <IressTheme />
+        <App />
+      </IressProvider\>,
+    );
+    
+    Copy
+    
 
 For alternative ways to import the theme, see the [Themes documentation](./?path=/docs/themes-introduction--docs).
 
-[](#set-up-the-icons)Set up the icons
--------------------------------------
-
-If you are planning to use the `<IressIcon />` component, you need to include the Font Awesome CSS in your application.
-
-You can do this by including the Font Awesome CSS [via the Iress CDN](./?path=/docs/components-icon--docs#installation).
-
 On this page
 
 *   [Requirements](#requirements)
 *   [Set up the component library](#set-up-the-component-library)
-*   [Set up the theme](#set-up-the-theme)
-*   [Set up the icons](#set-up-the-icons)
+*   [Set up the theme](#set-up-the-theme)