feat: vertical oriented button group (#755) (#1461)

* feat: vertical oriented button group This commit added a new prop(orientation) to the current OuiButtonGroup, the possible values are `horizontal` and `vertical`. The default value is `horizontal` which match the current UI behavior. With `vertical` prop, the button group will be oriented vertically. related issue: #659 Signed-off-by: Yulong Ruan <[email protected]> * doc(changelog): add changelog for vertical button group Signed-off-by: Yulong Ruan <[email protected]> * fix(lint): fix sass lint Signed-off-by: Yulong Ruan <[email protected]> --------- Signed-off-by: Yulong Ruan <[email protected]> (cherry picked from commit 3c191a5) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Viraj Sanghvi <[email protected]>
opensearch-project · Jan 10, 2025 · d0ef965 · d0ef965
1 parent f86a916
commit d0ef965
Show file tree

Hide file tree

Showing 7 changed files with 840 additions and 7 deletions.
diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
@@ -139,6 +139,11 @@ const buttonGroupIconsHtml = renderToHtml(ButtonGroupIcons);
 import ButtonGroupCompressed from './button_group_compressed';
 const buttonGroupCompressedSource = require('!!raw-loader!./button_group_compressed');
 const buttonGroupCompressedHtml = renderToHtml(ButtonGroupCompressed);
+
+import ButtonGroupVertical from './button_group_vertical';
+const ButtonGroupVerticalSource = require('!!raw-loader!./button_group_vertical');
+const ButtonGroupVerticalHtml = renderToHtml(ButtonGroupVertical);
+
 const buttonGroupSnippet = [
   `<OuiButtonGroup
   type="single"
@@ -171,6 +176,23 @@ const buttonGroupIconsSnippet = [
 />`,
 ];
 
+const ButtonGroupVerticalSnippet = [
+  `<OuiButtonGroup
+  orientation="vertical"
+  isIconOnly
+  legend={legend}
+  options={[
+    {
+      id,
+      label,
+      iconType,
+    }
+  ]}
+  idToSelectedMap={{ optionId: true }}
+  onChange={(optionId, optionValue) => {}}
+/>`,
+];
+
 export const ButtonExample = {
   title: 'Button',
   sections: [
@@ -469,6 +491,26 @@ export const ButtonExample = {
       demo: <ButtonGroupIcons />,
       snippet: buttonGroupIconsSnippet,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: ButtonGroupVerticalSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: ButtonGroupVerticalHtml,
+        },
+      ],
+      wrapText: false,
+      text: (
+        <OuiTitle size="xs">
+          <h3>Vertical orientated</h3>
+        </OuiTitle>
+      ),
+      demo: <ButtonGroupVertical />,
+      snippet: ButtonGroupVerticalSnippet,
+    },
     {
       source: [
         {

diff --git a/src-docs/src/views/button/button_group_vertical.js b/src-docs/src/views/button/button_group_vertical.js
@@ -0,0 +1,179 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React, { useState, Fragment } from 'react';
+
+import {
+  OuiButtonGroup,
+  OuiSpacer,
+  OuiTitle,
+} from '../../../../src/components';
+
+import { htmlIdGenerator } from '../../../../src/services';
+
+const idPrefix = htmlIdGenerator()();
+const idPrefix3 = htmlIdGenerator()();
+
+export default () => {
+  const [toggleIdSelected, setToggleIdSelected] = useState(`${idPrefix}1`);
+
+  const onChange = (optionId) => {
+    setToggleIdSelected(optionId);
+  };
+
+  const toggleButtons = [
+    {
+      id: `${idPrefix}0`,
+      label: 'Option one',
+    },
+    {
+      id: `${idPrefix}1`,
+      label: 'Option two',
+    },
+    {
+      id: `${idPrefix}2`,
+      label: 'Option three',
+    },
+  ];
+
+  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',
+    },
+  ];
+
+  const [toggleIconIdSelected, setToggleIconIdSelected] = useState(
+    `${idPrefix3}1`
+  );
+  const [toggleIconIdToSelectedMap, setToggleIconIdToSelectedMap] = useState(
+    {}
+  );
+
+  const onChangeIcons = (optionId) => {
+    setToggleIconIdSelected(optionId);
+  };
+
+  const onChangeIconsMulti = (optionId) => {
+    const newToggleIconIdToSelectedMap = {
+      ...toggleIconIdToSelectedMap,
+      ...{
+        [optionId]: !toggleIconIdToSelectedMap[optionId],
+      },
+    };
+
+    setToggleIconIdToSelectedMap(newToggleIconIdToSelectedMap);
+  };
+
+  return (
+    <Fragment>
+      <OuiButtonGroup
+        orientation="vertical"
+        legend="This is a vertical group"
+        options={toggleButtons}
+        idSelected={toggleIdSelected}
+        onChange={(id) => onChange(id)}
+      />
+      &nbsp;&nbsp;
+      <OuiButtonGroup
+        orientation="vertical"
+        legend="Text align"
+        options={toggleButtonsIcons}
+        idSelected={toggleIconIdSelected}
+        onChange={(id) => onChangeIcons(id)}
+        isIconOnly
+      />
+      &nbsp;&nbsp;
+      <OuiButtonGroup
+        orientation="vertical"
+        legend="Text style"
+        options={toggleButtonsIconsMulti}
+        idToSelectedMap={toggleIconIdToSelectedMap}
+        onChange={(id) => onChangeIconsMulti(id)}
+        type="multi"
+        isIconOnly
+      />
+      <OuiSpacer />
+      <OuiTitle size="xxs">
+        <h3>Compressed</h3>
+      </OuiTitle>
+      <OuiButtonGroup
+        buttonSize="compressed"
+        orientation="vertical"
+        legend="This is a vertical group"
+        options={toggleButtons}
+        idSelected={toggleIdSelected}
+        onChange={(id) => onChange(id)}
+      />
+      &nbsp;&nbsp;
+      <OuiButtonGroup
+        buttonSize="compressed"
+        orientation="vertical"
+        legend="Text align"
+        options={toggleButtonsIcons}
+        idSelected={toggleIconIdSelected}
+        onChange={(id) => onChangeIcons(id)}
+        isIconOnly
+      />
+      &nbsp;&nbsp;
+      <OuiButtonGroup
+        buttonSize="compressed"
+        orientation="vertical"
+        legend="Text style"
+        options={toggleButtonsIconsMulti}
+        idToSelectedMap={toggleIconIdToSelectedMap}
+        onChange={(id) => onChangeIconsMulti(id)}
+        type="multi"
+        isIconOnly
+      />
+    </Fragment>
+  );
+};