From ce2dbb8ce03b9c6169bf1352f04e1da8567f2645 Mon Sep 17 00:00:00 2001 From: Tomasz Kajtoch Date: Tue, 23 Jul 2024 22:11:25 +0200 Subject: [PATCH] docs(website): convert button examples to use the simplified interactive component examples syntax --- .../navigation/button/overview.mdx | 2084 ++++++++--------- 1 file changed, 1029 insertions(+), 1055 deletions(-) diff --git a/packages/website/docs/02_components/navigation/button/overview.mdx b/packages/website/docs/02_components/navigation/button/overview.mdx index 72664cb90492..bb807c9c9a8e 100644 --- a/packages/website/docs/02_components/navigation/button/overview.mdx +++ b/packages/website/docs/02_components/navigation/button/overview.mdx @@ -20,421 +20,413 @@ The most standard button component is **EuiButton** which comes in two styles an When using colors other than `primary`, be sure that either the words or an icon also represents the status. For instance, don't rely on color alone to represent dangerous actions but use words like "Delete" not "Confirm". The `text` and `accent` colors should be used sparingly as they can easily be confused with other states like disabled and danger. - - ```tsx - import React from 'react'; - import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; - - const buttons = [ - 'primary', - 'success', - 'warning', - 'danger', - 'text', - 'accent', - 'disabled', - ]; +```tsx interactive +import React from 'react'; +import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; + +const buttons = [ + 'primary', + 'success', + 'warning', + 'danger', + 'text', + 'accent', + 'disabled', +]; + +export default () => ( +
+ {buttons.map((value) => ( + <> + + + {}} + > + {value.charAt(0).toUpperCase() + value.slice(1)} + + - export default () => ( -
- {buttons.map((value) => ( - <> - - - {}} - > - {value.charAt(0).toUpperCase() + value.slice(1)} - - - - - {}} - > - Filled - - - - - {}} - > - Small - - - - - {}} - > - Small and filled - - - - - {}} - > - Full width - - - - - - ))} -
- ); - ``` - + + {}} + > + Filled + + + + + {}} + > + Small + + + + + {}} + > + Small and filled + + + + + {}} + > + Full width + + + + + + ))} +
+); +``` ## Empty button Use **EuiButtonEmpty** when you want to reduce the importance of the button, but still want to align it to the rest of the buttons. It is also the only button component that supports down to size `xs`. - - ```tsx - import React from 'react'; - import { - EuiButtonEmpty, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - } from '@elastic/eui'; - - const buttons = ['primary', 'success', 'warning', 'danger', 'text', 'disabled']; - - export default () => ( -
- {buttons.map((value) => ( - <> - - - {}} - > - {value.charAt(0).toUpperCase() + value.slice(1)} - - - - - {}} - > - Small - - - - - {}} - > - Extra small - - - - - - ))} -
- ); - ``` - +```tsx interactive +import React from 'react'; +import { + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, +} from '@elastic/eui'; + +const buttons = ['primary', 'success', 'warning', 'danger', 'text', 'disabled']; + +export default () => ( +
+ {buttons.map((value) => ( + <> + + + {}} + > + {value.charAt(0).toUpperCase() + value.slice(1)} + + + + + {}} + > + Small + + + + + {}} + > + Extra small + + + + + + ))} +
+); +``` ## Flush empty button When aligning **EuiButtonEmpty** components to the left or the right, you should make sure they’re flush with the edge of their container, so that they’re horizontally aligned with the other content in the container. - - ```tsx - import React from 'react'; - import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +```tsx interactive +import React from 'react'; +import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; - export default () => ( - - - Flush left - +export default () => ( + + + Flush left + - - Flush right - + + Flush right + - - Flush both - - - ); - ``` - + + Flush both + + +); +``` ## Buttons with icons All button components accept an `iconType` which must be an acceptable [**EuiIcon**](#/display/icons) type. Multi-color icons like app icons will be converted to single color. Icons can be displayed on the opposite side by passing `iconSide="right"`. - - ```tsx - import React from 'react'; - import { - EuiButton, - EuiFlexGroup, - EuiFlexItem, - EuiButtonEmpty, - EuiSpacer, - } from '@elastic/eui'; - - export default () => ( -
- - - {}} iconType="heart"> - Primary - - +```tsx interactive +import React from 'react'; +import { + EuiButton, + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, + EuiSpacer, +} from '@elastic/eui'; - - {}}> - Filled - - +export default () => ( +
+ + + {}} iconType="heart"> + Primary + + - - {}}> - Small - - + + {}}> + Filled + + - - {}}> - Small and filled - - + + {}}> + Small + + - - {}}> - Full width - - - + + {}}> + Small and filled + + - + + {}}> + Full width + + + - - - {}} iconType="lensApp"> - Empty button - - + - - {}} iconType="lensApp" size="s"> - Small empty - - + + + {}} iconType="lensApp"> + Empty button + + - - {}} iconType="lensApp" size="xs"> - Extra small empty - - - + + {}} iconType="lensApp" size="s"> + Small empty + + - + + {}} iconType="lensApp" size="xs"> + Extra small empty + + + - - - {}} iconType="arrowDown"> - Icon right - - + - - {}} - > - Filled - - + + + {}} iconType="arrowDown"> + Icon right + + - - {}} - > - Small - - + + {}} + > + Filled + + - - {}} - > - Small and filled - - + + {}} + > + Small + + - - {}} - > - Full width - - - + + {}} + > + Small and filled + + - + + {}} + > + Full width + + + - - - {}} - iconType="arrowDown" - > - Icon right - - + - - {}} - iconType="arrowDown" - size="s" - > - Small empty - - + + + {}} + iconType="arrowDown" + > + Icon right + + - - {}} - iconType="arrowDown" - size="xs" - > - Extra small empty - - - + + {}} + iconType="arrowDown" + size="s" + > + Small empty + + - + + {}} + iconType="arrowDown" + size="xs" + > + Extra small empty + + + - - - {}} iconType="heart" isDisabled> - Disabled - - + - - {}} isDisabled> - Filled - - + + + {}} iconType="heart" isDisabled> + Disabled + + - - {}} isDisabled> - Small - - + + {}} isDisabled> + Filled + + - - {}} - isDisabled - > - Small and filled - - + + {}} isDisabled> + Small + + - - {}} isDisabled> - Full width - - - + + {}} + isDisabled + > + Small and filled + + - + + {}} isDisabled> + Full width + + + - - - {}} - iconType="dashboardApp" - > - Disabled app icon - - + - - {}} - iconType="arrowDown" - iconSide="right" - size="xs" - > - Disabled icon right - - - -
- ); - ``` - + + + {}} + iconType="dashboardApp" + > + Disabled app icon + + + + + {}} + iconType="arrowDown" + iconSide="right" + size="xs" + > + Disabled icon right + + + +
+); +``` ## Icon buttons @@ -446,142 +438,140 @@ An **EuiButtonIcon** is a button that only contains an icon (no text). Use the ` **EuiButtonIcon** requires an `aria-label` to express the meaning to screen readers. -::: - - - ```tsx - import React from 'react'; - import { - EuiButtonIcon, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiTitle, - EuiCode, - } from '@elastic/eui'; - - const colors = ['primary', 'success', 'warning', 'danger', 'text', 'accent']; - - export default () => ( - <> - - {colors.map((color) => ( - - {}} - iconType="help" - aria-label="Help" - /> - - ))} - - - -

- Display (empty, base,{' '} - fill) -

- - - - - - - - - - - - - - - -

Disabled

- - - - - - - - - - - - - - - -

- Size (xs, s, m) -

- - - - - - - - - - - - - - - -

All icons types inherit button color

- - - - - - - - - - +::: + +```tsx interactive +import React from 'react'; +import { + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, + EuiTitle, + EuiCode, +} from '@elastic/eui'; + +const colors = ['primary', 'success', 'warning', 'danger', 'text', 'accent']; + +export default () => ( + <> + + {colors.map((color) => ( + {}} + iconType="help" + aria-label="Help" /> - - - - - - ); - ``` - + ))} + + + +

+ Display (empty, base,{' '} + fill) +

+ + + + + + + + + + + + + + + +

Disabled

+ + + + + + + + + + + + + + + +

+ Size (xs, s, m) +

+ + + + + + + + + + + + + + + +

All icons types inherit button color

+ + + + + + + + + + + + + + + + + +); +``` ## Buttons as links @@ -593,117 +583,113 @@ it is not usually recommended. For more specific information on how to integrate If you are creating a purely text-based link, like the one in the previous paragraph, use [**EuiLink**](#/navigation/link) instead. - - ```tsx - import React, { Fragment } from 'react'; - import { - EuiButton, - EuiButtonEmpty, - EuiButtonIcon, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, +```tsx interactive +import React, { Fragment } from 'react'; +import { + EuiButton, + EuiButtonEmpty, + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, } from '@elastic/eui'; - export default () => ( - - - - Link to elastic.co - - - - - Link to elastic.co - - - - - - - - - - - - - - Disabled link - - - - - - Disabled empty link - - - - - - - - - ); - ``` - - -## Loading state - -Setting the `isLoading` prop to true will add the loading spinner or swap the existing icon for the loading spinner -and set the button to disabled. It is good practice to also rename the button to "Loading…". - - - ```tsx - import React from 'react'; - import { - EuiButton, - EuiFlexGroup, - EuiFlexItem, - EuiButtonEmpty, - } from '@elastic/eui'; - - export default () => ( +export default () => ( + - Loading… + Link to elastic.co - - Loading… - + + Link to elastic.co + + + + + + + + + - - Loading… + + Disabled link - {}} isLoading> - Loading… + + Disabled empty link - {}} isLoading iconSide="right"> - Loading… - + - - ); - ``` - + + +); +``` + +## Loading state + +Setting the `isLoading` prop to true will add the loading spinner or swap the existing icon for the loading spinner +and set the button to disabled. It is good practice to also rename the button to "Loading…". + +```tsx interactive +import React from 'react'; +import { + EuiButton, + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, +} from '@elastic/eui'; + +export default () => ( + + + Loading… + + + + + Loading… + + + + + + Loading… + + + + + {}} isLoading> + Loading… + + + + + {}} isLoading iconSide="right"> + Loading… + + + +); +``` ## Split buttons @@ -711,80 +697,78 @@ EUI [does not support](https://github.com/elastic/eui/issues/4171) split buttons we recommend using separate buttons for the main and overflow actions. You can achieve this by simply using the `display` and `size` props **EuiButtonIcon** to match that of the primary action button. - - ```tsx - import React, { useState } from 'react'; - import { - EuiButton, - EuiButtonIcon, - EuiFlexGroup, - EuiFlexItem, - EuiContextMenuPanel, - EuiContextMenuItem, - EuiPopover, - useGeneratedHtmlId, - } from '@elastic/eui'; - - export default () => { - const [isPopoverOpen, setPopover] = useState(false); - const splitButtonPopoverId = useGeneratedHtmlId({ - prefix: 'splitButtonPopover', - }); - - const onButtonClick = () => { - setPopover(!isPopoverOpen); - }; +```tsx interactive +import React, { useState } from 'react'; +import { + EuiButton, + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, + EuiContextMenuPanel, + EuiContextMenuItem, + EuiPopover, + useGeneratedHtmlId, +} from '@elastic/eui'; - const closePopover = () => { - setPopover(false); - }; +export default () => { + const [isPopoverOpen, setPopover] = useState(false); + const splitButtonPopoverId = useGeneratedHtmlId({ + prefix: 'splitButtonPopover', + }); - const items = [ - - Copy - , - - Edit - , - - Share - , - ]; - - return ( - <> - - - - Last 15 min - - - - - } - isOpen={isPopoverOpen} - closePopover={closePopover} - panelPaddingSize="none" - anchorPosition="downLeft" - > - - - - - - ); + const onButtonClick = () => { + setPopover(!isPopoverOpen); + }; + + const closePopover = () => { + setPopover(false); }; - ``` - + + const items = [ + + Copy + , + + Edit + , + + Share + , + ]; + + return ( + <> + + + + Last 15 min + + + + + } + isOpen={isPopoverOpen} + closePopover={closePopover} + panelPaddingSize="none" + anchorPosition="downLeft" + > + + + + + + ); +}; +``` ## Toggle buttons @@ -795,38 +779,36 @@ Though there are two **exclusive** situations to consider. 1. If your button changes its readable **text**, via children or `aria-label`, then there is no additional accessibility concern. - - ```tsx - import React, { useState } from 'react'; - import { EuiButton, EuiButtonIcon } from '@elastic/eui'; +```tsx interactive +import React, { useState } from 'react'; +import { EuiButton, EuiButtonIcon } from '@elastic/eui'; - export default () => { - const [toggle0On, setToggle0On] = useState(false); - const [toggle1On, setToggle1On] = useState(true); +export default () => { + const [toggle0On, setToggle0On] = useState(false); + const [toggle1On, setToggle1On] = useState(true); - return ( - <> - { - setToggle0On((isOn) => !isOn); - }} - > - {toggle0On ? 'Hey there good lookin' : 'Toggle me'} - -   - { - setToggle1On((isOn) => !isOn); - }} - /> - - ); - }; - ``` - + return ( + <> + { + setToggle0On((isOn) => !isOn); + }} + > + {toggle0On ? 'Hey there good lookin' : 'Toggle me'} + +   + { + setToggle1On((isOn) => !isOn); + }} + /> + + ); +}; +``` 2. If your button only changes the **visual** appearance, you must add `aria-pressed` passing a boolean for the on and off states. All EUI button types provide a helper prop for this called `isSelected`. @@ -837,45 +819,43 @@ Do not add `aria-pressed` or `isSelected` if you also change the readable text. ::: - - ```tsx - import React, { useState } from 'react'; - import { EuiButton, EuiButtonIcon } from '@elastic/eui'; +```tsx interactive +import React, { useState } from 'react'; +import { EuiButton, EuiButtonIcon } from '@elastic/eui'; - export default () => { - const [toggle2On, setToggle2On] = useState(true); - const [toggle3On, setToggle3On] = useState(false); +export default () => { + const [toggle2On, setToggle2On] = useState(true); + const [toggle3On, setToggle3On] = useState(false); - return ( - <> - { - setToggle2On((isOn) => !isOn); - }} - > - Toggle me - -   - { - setToggle3On((isOn) => !isOn); - }} - /> - - ); - }; - ``` - + return ( + <> + { + setToggle2On((isOn) => !isOn); + }} + > + Toggle me + +   + { + setToggle3On((isOn) => !isOn); + }} + /> + + ); +}; +``` ## Button groups @@ -889,245 +869,241 @@ This is only for accessibility, however, so it will be visibly hidden. ::: - - ```tsx - import React, { useState, Fragment } from 'react'; - import { - EuiButtonGroup, - EuiSpacer, - EuiTitle, - useGeneratedHtmlId, - } from '@elastic/eui'; - - export default () => { - const basicButtonGroupPrefix = useGeneratedHtmlId({ - prefix: 'basicButtonGroup', - }); - const multiSelectButtonGroupPrefix = useGeneratedHtmlId({ - prefix: 'multiSelectButtonGroup', - }); - const disabledButtonGroupPrefix = useGeneratedHtmlId({ - prefix: 'disabledButtonGroup', - }); - - const toggleButtons = [ - { - id: `${basicButtonGroupPrefix}__0`, - label: 'Option one', - }, - { - id: `${basicButtonGroupPrefix}__1`, - label: 'Option two is selected by default', - }, - { - id: `${basicButtonGroupPrefix}__2`, - label: 'Option three', - }, - ]; +```tsx interactive +import React, { useState, Fragment } from 'react'; +import { + EuiButtonGroup, + EuiSpacer, + EuiTitle, + useGeneratedHtmlId, +} from '@elastic/eui'; - const toggleButtonsDisabled = [ - { - id: `${disabledButtonGroupPrefix}__0`, - label: 'Option one', - }, - { - id: `${disabledButtonGroupPrefix}__1`, - label: 'Option two is selected by default', - }, - { - id: `${disabledButtonGroupPrefix}__2`, - label: 'Option three', - }, - ]; +export default () => { + const basicButtonGroupPrefix = useGeneratedHtmlId({ + prefix: 'basicButtonGroup', + }); + const multiSelectButtonGroupPrefix = useGeneratedHtmlId({ + prefix: 'multiSelectButtonGroup', + }); + const disabledButtonGroupPrefix = useGeneratedHtmlId({ + prefix: 'disabledButtonGroup', + }); + + const toggleButtons = [ + { + id: `${basicButtonGroupPrefix}__0`, + label: 'Option one', + }, + { + id: `${basicButtonGroupPrefix}__1`, + label: 'Option two is selected by default', + }, + { + id: `${basicButtonGroupPrefix}__2`, + label: 'Option three', + }, + ]; - const toggleButtonsMulti = [ - { - id: `${multiSelectButtonGroupPrefix}__0`, - label: 'Option 1', - }, - { - id: `${multiSelectButtonGroupPrefix}__1`, - label: 'Option 2 is selected by default', - }, - { - id: `${multiSelectButtonGroupPrefix}__2`, - label: 'Option 3', - }, - ]; - - const [toggleIdSelected, setToggleIdSelected] = useState( - `${basicButtonGroupPrefix}__1` - ); - const [toggleIdDisabled, setToggleIdDisabled] = useState( - `${disabledButtonGroupPrefix}__1` - ); - const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({ - [`${multiSelectButtonGroupPrefix}__1`]: true, - }); - - const onChange = (optionId) => { - setToggleIdSelected(optionId); - }; + const toggleButtonsDisabled = [ + { + id: `${disabledButtonGroupPrefix}__0`, + label: 'Option one', + }, + { + id: `${disabledButtonGroupPrefix}__1`, + label: 'Option two is selected by default', + }, + { + id: `${disabledButtonGroupPrefix}__2`, + label: 'Option three', + }, + ]; - const onChangeDisabled = (optionId) => { - setToggleIdDisabled(optionId); - }; + const toggleButtonsMulti = [ + { + id: `${multiSelectButtonGroupPrefix}__0`, + label: 'Option 1', + }, + { + id: `${multiSelectButtonGroupPrefix}__1`, + label: 'Option 2 is selected by default', + }, + { + id: `${multiSelectButtonGroupPrefix}__2`, + label: 'Option 3', + }, + ]; - const onChangeMulti = (optionId) => { - const newToggleIdToSelectedMap = { - ...toggleIdToSelectedMap, - ...{ - [optionId]: !toggleIdToSelectedMap[optionId], - }, - }; - setToggleIdToSelectedMap(newToggleIdToSelectedMap); - }; + const [toggleIdSelected, setToggleIdSelected] = useState( + `${basicButtonGroupPrefix}__1` + ); + const [toggleIdDisabled, setToggleIdDisabled] = useState( + `${disabledButtonGroupPrefix}__1` + ); + const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({ + [`${multiSelectButtonGroupPrefix}__1`]: true, + }); - return ( - - onChange(id)} - /> - - -

Primary & multi select

- - - onChangeMulti(id)} - color="primary" - type="multi" - /> - - -

Disabled & full width

- - - onChangeDisabled(id)} - buttonSize="m" - isDisabled - isFullWidth - /> - - ); + const onChange = (optionId) => { + setToggleIdSelected(optionId); }; - ``` - -### Icon only button groups + const onChangeDisabled = (optionId) => { + setToggleIdDisabled(optionId); + }; -If you're just displaying a group of icons, add the prop `isIconOnly`. + const onChangeMulti = (optionId) => { + const newToggleIdToSelectedMap = { + ...toggleIdToSelectedMap, + ...{ + [optionId]: !toggleIdToSelectedMap[optionId], + }, + }; + setToggleIdToSelectedMap(newToggleIdToSelectedMap); + }; + + return ( + + onChange(id)} + /> + + +

Primary & multi select

+ + + onChangeMulti(id)} + color="primary" + type="multi" + /> + + +

Disabled & full width

+ + + onChangeDisabled(id)} + buttonSize="m" + isDisabled + isFullWidth + /> + + ); +}; +``` - - ```tsx - import React, { useState, Fragment } from 'react'; - import { EuiButtonGroup, htmlIdGenerator } from '@elastic/eui'; +### Icon only button groups - const idPrefix3 = htmlIdGenerator()(); +If you're just displaying a group of icons, add the prop `isIconOnly`. - export default () => { - const toggleButtonsIcons = [ - { - id: `${idPrefix3}0`, - label: 'Align left', - iconType: 'editorAlignLeft', - }, - { - id: `${idPrefix3}1`, - label: 'Align center', - iconType: 'editorAlignCenter', - }, - { - id: `${idPrefix3}2`, - label: 'Align right', - iconType: 'editorAlignRight', - isDisabled: true, - }, - ]; - - const toggleButtonsIconsMulti = [ - { - id: `${idPrefix3}3`, - label: 'Bold', - name: 'bold', - iconType: 'editorBold', - }, - { - id: `${idPrefix3}4`, - label: 'Italic', - name: 'italic', - iconType: 'editorItalic', - isDisabled: true, - }, - { - id: `${idPrefix3}5`, - label: 'Underline', - name: 'underline', - iconType: 'editorUnderline', - }, - { - id: `${idPrefix3}6`, - label: 'Strikethrough', - name: 'strikethrough', - iconType: 'editorStrike', - }, - ]; +```tsx interactive +import React, { useState, Fragment } from 'react'; +import { EuiButtonGroup, htmlIdGenerator } from '@elastic/eui'; + +const idPrefix3 = htmlIdGenerator()(); + +export default () => { + const toggleButtonsIcons = [ + { + id: `${idPrefix3}0`, + label: 'Align left', + iconType: 'editorAlignLeft', + }, + { + id: `${idPrefix3}1`, + label: 'Align center', + iconType: 'editorAlignCenter', + }, + { + id: `${idPrefix3}2`, + label: 'Align right', + iconType: 'editorAlignRight', + isDisabled: true, + }, + ]; - const [toggleIconIdSelected, setToggleIconIdSelected] = useState( - `${idPrefix3}1` - ); - const [toggleIconIdToSelectedMap, setToggleIconIdToSelectedMap] = useState( - {} - ); + const toggleButtonsIconsMulti = [ + { + id: `${idPrefix3}3`, + label: 'Bold', + name: 'bold', + iconType: 'editorBold', + }, + { + id: `${idPrefix3}4`, + label: 'Italic', + name: 'italic', + iconType: 'editorItalic', + isDisabled: true, + }, + { + id: `${idPrefix3}5`, + label: 'Underline', + name: 'underline', + iconType: 'editorUnderline', + }, + { + id: `${idPrefix3}6`, + label: 'Strikethrough', + name: 'strikethrough', + iconType: 'editorStrike', + }, + ]; - const onChangeIcons = (optionId) => { - setToggleIconIdSelected(optionId); - }; + const [toggleIconIdSelected, setToggleIconIdSelected] = useState( + `${idPrefix3}1` + ); + const [toggleIconIdToSelectedMap, setToggleIconIdToSelectedMap] = useState( + {} + ); - const onChangeIconsMulti = (optionId) => { - const newToggleIconIdToSelectedMap = { - ...toggleIconIdToSelectedMap, - ...{ - [optionId]: !toggleIconIdToSelectedMap[optionId], - }, - }; + const onChangeIcons = (optionId) => { + setToggleIconIdSelected(optionId); + }; - setToggleIconIdToSelectedMap(newToggleIconIdToSelectedMap); + const onChangeIconsMulti = (optionId) => { + const newToggleIconIdToSelectedMap = { + ...toggleIconIdToSelectedMap, + ...{ + [optionId]: !toggleIconIdToSelectedMap[optionId], + }, }; - return ( - - onChangeIcons(id)} - isIconOnly - /> -    - onChangeIconsMulti(id)} - type="multi" - isIconOnly - /> - - ); + setToggleIconIdToSelectedMap(newToggleIconIdToSelectedMap); }; - ``` - + + return ( + + onChangeIcons(id)} + isIconOnly + /> +    + onChangeIconsMulti(id)} + type="multi" + isIconOnly + /> + + ); +}; +``` ### Button groups in forms @@ -1137,112 +1113,110 @@ Compressed groups should always be `fullWidth` so they line up nicely in their s For a more detailed example of how to integrate with forms, see the ["Complex example"](#/forms/compressed-forms#complex-example) on the compressed forms page. - - ```tsx - import React, { useState } from 'react'; - import { - EuiButtonGroup, - EuiSpacer, - EuiPanel, - useGeneratedHtmlId, - } from '@elastic/eui'; - - export default () => { - const compressedToggleButtonGroupPrefix = useGeneratedHtmlId({ - prefix: 'compressedToggleButtonGroup', - }); - const multiSelectButtonGroupPrefix = useGeneratedHtmlId({ - prefix: 'multiSelectButtonGroup', - }); - - const toggleButtonsCompressed = [ - { - id: `${compressedToggleButtonGroupPrefix}__0`, - label: 'fine', - }, - { - id: `${compressedToggleButtonGroupPrefix}__1`, - label: 'rough', - }, - { - id: `${compressedToggleButtonGroupPrefix}__2`, - label: 'coarse', - }, - ]; - - const toggleButtonsIconsMulti = [ - { - id: `${multiSelectButtonGroupPrefix}__0`, - label: 'Bold', - name: 'bold', - iconType: 'editorBold', - }, - { - id: `${multiSelectButtonGroupPrefix}__1`, - label: 'Italic', - name: 'italic', - iconType: 'editorItalic', - isDisabled: true, - }, - { - id: `${multiSelectButtonGroupPrefix}__2`, - label: 'Underline', - name: 'underline', - iconType: 'editorUnderline', - }, - { - id: `${multiSelectButtonGroupPrefix}__3`, - label: 'Strikethrough', - name: 'strikethrough', - iconType: 'editorStrike', - }, - ]; +```tsx interactive +import React, { useState } from 'react'; +import { + EuiButtonGroup, + EuiSpacer, + EuiPanel, + useGeneratedHtmlId, +} from '@elastic/eui'; - const [toggleIconIdToSelectedMapIcon, setToggleIconIdToSelectedMapIcon] = - useState({}); - const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState( - `${compressedToggleButtonGroupPrefix}__1` - ); +export default () => { + const compressedToggleButtonGroupPrefix = useGeneratedHtmlId({ + prefix: 'compressedToggleButtonGroup', + }); + const multiSelectButtonGroupPrefix = useGeneratedHtmlId({ + prefix: 'multiSelectButtonGroup', + }); + + const toggleButtonsCompressed = [ + { + id: `${compressedToggleButtonGroupPrefix}__0`, + label: 'fine', + }, + { + id: `${compressedToggleButtonGroupPrefix}__1`, + label: 'rough', + }, + { + id: `${compressedToggleButtonGroupPrefix}__2`, + label: 'coarse', + }, + ]; - const onChangeCompressed = (optionId) => { - setToggleCompressedIdSelected(optionId); - }; + const toggleButtonsIconsMulti = [ + { + id: `${multiSelectButtonGroupPrefix}__0`, + label: 'Bold', + name: 'bold', + iconType: 'editorBold', + }, + { + id: `${multiSelectButtonGroupPrefix}__1`, + label: 'Italic', + name: 'italic', + iconType: 'editorItalic', + isDisabled: true, + }, + { + id: `${multiSelectButtonGroupPrefix}__2`, + label: 'Underline', + name: 'underline', + iconType: 'editorUnderline', + }, + { + id: `${multiSelectButtonGroupPrefix}__3`, + label: 'Strikethrough', + name: 'strikethrough', + iconType: 'editorStrike', + }, + ]; - const onChangeIconsMultiIcons = (optionId) => { - const newToggleIconIdToSelectedMapIcon = { - ...toggleIconIdToSelectedMapIcon, - ...{ - [optionId]: !toggleIconIdToSelectedMapIcon[optionId], - }, - }; + const [toggleIconIdToSelectedMapIcon, setToggleIconIdToSelectedMapIcon] = + useState({}); + const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState( + `${compressedToggleButtonGroupPrefix}__1` + ); + + const onChangeCompressed = (optionId) => { + setToggleCompressedIdSelected(optionId); + }; - setToggleIconIdToSelectedMapIcon(newToggleIconIdToSelectedMapIcon); + const onChangeIconsMultiIcons = (optionId) => { + const newToggleIconIdToSelectedMapIcon = { + ...toggleIconIdToSelectedMapIcon, + ...{ + [optionId]: !toggleIconIdToSelectedMapIcon[optionId], + }, }; - return ( - - onChangeCompressed(id)} - buttonSize="compressed" - isFullWidth - /> - - onChangeIconsMultiIcons(id)} - type="multi" - buttonSize="compressed" - isIconOnly - /> - - ); + setToggleIconIdToSelectedMapIcon(newToggleIconIdToSelectedMapIcon); }; - ``` - + + return ( + + onChangeCompressed(id)} + buttonSize="compressed" + isFullWidth + /> + + onChangeIconsMultiIcons(id)} + type="multi" + buttonSize="compressed" + isIconOnly + /> + + ); +}; +```