@iress-oss/ids-mcp-server 5.14.2 → 5.20.1

package/generated/docs/components-buttongroup-docs.md

@@ -1,310 +0,0 @@
-[](#buttongroup)ButtonGroup
-===========================
-
-Overview
---------
-
-A description that describes the purpose of this component
-
-Button group
-
-Option 1Option 2Option 3Option 4
-
-Hide code
-
-\[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; }
-
-<IressButtonGroup label\="Button group"\>
-  <IressButton\>
-    Option 1  </IressButton\>
-  <IressButton\>
-    Option 2  </IressButton\>
-  <IressButton\>
-    Option 3  </IressButton\>
-  <IressButton\>
-    Option 4  </IressButton\>
-</IressButtonGroup\>
-
-Copy
-
-[](#usage)Usage
----------------
-
-Button Group requires some `label` text to describe what the group of buttons represent. The `label` text can be visually hidden (but still read by screenreaders) using the `hiddenLabel` prop.
-
-The `children` prop should contain multiple `IressButton` components.
-
-You can use the `onChange` prop to watch when a button is clicked.
-
-**Note:**
-
-*   The `options` props, originally used to map a set of strings to `IressButton`, has been deprecated. Instead, you can use array.map to map the options to `IressButton` in your own application.
-*   The `mode` prop on `IressButton` is not supported when used inside an `IressButtonGroup`.
-
-Button group
-
-Option 1Option 2Option 3Option 4
-
-Hide code
-
-\[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; }
-
-<IressButtonGroup label\="Button group"\>
-  <IressButton\>
-    Option 1  </IressButton\>
-  <IressButton\>
-    Option 2  </IressButton\>
-  <IressButton\>
-    Option 3  </IressButton\>
-  <IressButton\>
-    Option 4  </IressButton\>
-</IressButtonGroup\>
-
-Copy
-
-[](#examples)Examples
----------------------
-
-### [](#rich-buttons)Rich buttons
-
-By passing the buttons as children you have more control over the display of the button allowing you to use icons or tooltips.
-
-**Note:** In this case, please set the `value` prop on the `IressButton` component to ensure the correct value is used when the button is clicked.
-
-Text alignment
-
-Left
-
-Center
-
-Right
-
-* * *
-
-Justify
-
-Hide code
-
-\[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; }
-
-<IressButtonGroup label\="Text alignment"\>
-  <IressTooltip tooltipText\="Left"\>
-    <IressButton value\="left"\>
-      <IressIcon name\="align-left" />
-      <span className\="iress-sr-only"\>
-        Left      </span\>
-    </IressButton\>
-  </IressTooltip\>
-  <IressTooltip tooltipText\="Center"\>
-    <IressButton value\="center"\>
-      <IressIcon name\="align-center" />
-      <span className\="iress-sr-only"\>
-        Center      </span\>
-    </IressButton\>
-  </IressTooltip\>
-  <IressTooltip tooltipText\="Right"\>
-    <IressButton value\="right"\>
-      <IressIcon name\="align-right" />
-      <span className\="iress-sr-only"\>
-        Right      </span\>
-    </IressButton\>
-  </IressTooltip\>
-  <IressDivider
-    gutter\="sm"
-    vertical
-  />
-  <IressTooltip tooltipText\="Justify"\>
-    <IressButton value\="justify"\>
-      <IressIcon name\="align-justify" />
-      <span className\="iress-sr-only"\>
-        Justify      </span\>
-    </IressButton\>
-  </IressTooltip\>
-</IressButtonGroup\>
-
-Copy
-
-### [](#multi-select)Multi-select
-
-By default, only one button in the group can be selected at a time. By setting the `multiple` prop, multiple buttons can be selected.
-
-Multiple options can be selected
-
-Option 1Option 2Option 3Option 4
-
-Hide code
-
-\[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; }
-
-<IressButtonGroup
-  label\="Multiple options can be selected"
-  multiple
-\>
-  <IressButton\>
-    Option 1  </IressButton\>
-  <IressButton\>
-    Option 2  </IressButton\>
-  <IressButton\>
-    Option 3  </IressButton\>
-  <IressButton\>
-    Option 4  </IressButton\>
-</IressButtonGroup\>
-
-Copy
-
-### [](#pre-selecting-buttons)Pre-selecting buttons
-
-Buttons within the group can be pre-selected using the `defaultSelected` prop (for uncontrolled components), or the `selected` prop if you are planning to control the state yourself.
-
-If the button group is in its default single select mode, these props expects a string that matches the text of one of the buttons, or the `value` prop of the button if it has been set.
-
-In multi-select mode, these props expects an array of matching strings.
-
-Selected option for single select
-
-Option 1Option 2Option 3Option 4
-
-Hide code
-
-\[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; }
-
-<IressButtonGroup
-  defaultSelected\="Option 2"
-  label\="Selected option for single select"
-\>
-  <IressButton\>
-    Option 1  </IressButton\>
-  <IressButton\>
-    Option 2  </IressButton\>
-  <IressButton\>
-    Option 3  </IressButton\>
-  <IressButton\>
-    Option 4  </IressButton\>
-</IressButtonGroup\>
-
-Copy
-
-Selected option for multi-select
-
-Option 1Option 2Option 3Option 4
-
-Hide code
-
-\[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; }
-
-<IressButtonGroup
-  defaultSelected\={\[
-    'Option 2',
-    'Option 4'
-  \]}
-  label\="Selected option for multi-select"
-  multiple
-\>
-  <IressButton\>
-    Option 1  </IressButton\>
-  <IressButton\>
-    Option 2  </IressButton\>
-  <IressButton\>
-    Option 3  </IressButton\>
-  <IressButton\>
-    Option 4  </IressButton\>
-</IressButtonGroup\>
-
-Copy
-
-### [](#onchange-event)`onChange` event
-
-The Button Group emits an event when any of the selected buttons change. The event detail (`ButtonGroupChange`) consist of a string or an array of strings (depending on if it's in single or multi select mode) that represents the selected button(s).
-
-Trigger toasts by selecting an option below
-
-Option 1Option 2Option 3Option 4
-
-Hide code
-
-\[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; }
-
-{
-  args: {
-    ...ButtonChildren.args,
-    label: 'Trigger toasts by selecting an option below'
-  },
-  render: args \=> {
-    const {
-      success
-    } \= useToaster();
-    return <IressButtonGroup {...args} onChange\={selected \=> {
-      success({
-        children: \`Selected: ${selected.selected ? String(selected.selected) : 'none'}\`
-      });
-    }} /\>;
-  },
-  decorators: \[Story \=> <IressToasterProvider\>
-        <Story />
-      </IressToasterProvider\>\]
-}
-
-Copy
-
-### [](#hidden-label)Hidden label
-
-If you would like to visually hide the label, you can use the `hiddenLabel` prop.
-
-Button group
-
-Option 1Option 2Option 3Option 4
-
-Hide code
-
-\[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; }
-
-<IressButtonGroup
-  hiddenLabel
-  label\="Button group"
-\>
-  <IressButton\>
-    Option 1  </IressButton\>
-  <IressButton\>
-    Option 2  </IressButton\>
-  <IressButton\>
-    Option 3  </IressButton\>
-  <IressButton\>
-    Option 4  </IressButton\>
-</IressButtonGroup\>
-
-Copy
-
-### [](#headings-as-labels)Headings as labels
-
-For semantic reasons, you may need the label to be rendered as a heading. In this case, you can pass the element directly to the `label` prop. The component will automatically add the `id` required to connect the button group to its label.
-
-Heading as label
-----------------
-
-Option 1Option 2Option 3Option 4
-
-Hide code
-
-\[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; }
-
-{
-  args: {
-    ...ButtonChildren.args,
-    label: <IressText element\="h2"\>Heading as label</IressText\>
-  }
-}
-
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-*   [Examples](#examples)
-    *   [Rich buttons](#rich-buttons)
-    *   [Multi-select](#multi-select)
-    *   [Pre-selecting buttons](#pre-selecting-buttons)
-    *   [onChange event](#onchange-event)
-    *   [Hidden label](#hidden-label)
-    *   [Headings as labels](#headings-as-labels)