Add Compressed form components, color-picker, and combobox, and small…

… button components and filter-button (#1301)

* Add internal small button family components

Signed-off-by: Miki <[email protected]>

* Add internal compressed form family components

Signed-off-by: Miki <[email protected]>

* Add internal compressed color picker component

Signed-off-by: Miki <[email protected]>

* Add internal compressed combo-box component

Signed-off-by: Miki <[email protected]>

* Add internal compressed filter-button component

Signed-off-by: Miki <[email protected]>

* Update changelog

Signed-off-by: Miki <[email protected]>

---------

Signed-off-by: Miki <[email protected]>
(cherry picked from commit 7a6a456)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

packages/eslint-plugin/rules/href_or_on_click.js

@@ -9,7 +9,14 @@
  * GitHub history for details.
  */
 
-const componentNames = ['OuiButton', 'OuiButtonEmpty', 'OuiLink', 'OuiBadge'];
+const componentNames = [
+  'OuiButton',
+  'OuiSmallButton',
+  'OuiButtonEmpty',
+  'OuiSmallButtonEmpty',
+  'OuiLink',
+  'OuiBadge',
+];
 
 module.exports = {
   meta: {

packages/eslint-plugin/rules/href_or_on_click.test.js

@@ -59,6 +59,41 @@ ruleTester.run('@opensearch-project/oui/href-or-on-click', rule, {
         )
       `),
     },
+    {
+      code: dedent(`
+        module.export = () => (
+          <OuiSmallButton />
+        )
+      `),
+    },
+    {
+      code: dedent(`
+        module.export = () => (
+          <OuiSmallButton href="/" />
+        )
+      `),
+    },
+    {
+      code: dedent(`
+        module.export = () => (
+          <OuiSmallButton href={'/' + 'home'} />
+        )
+      `),
+    },
+    {
+      code: dedent(`
+        module.export = () => (
+          <OuiSmallButton onClick={executeAction} />
+        )
+      `),
+    },
+    {
+      code: dedent(`
+        module.export = () => (
+          <OuiSmallButton onClick={() => executeAction()} />
+        )
+      `),
+    },
   ],
 
   invalid: [
@@ -102,5 +137,32 @@ ruleTester.run('@opensearch-project/oui/href-or-on-click', rule, {
         },
       ],
     },
+    {
+      code: dedent(`
+        module.export = () => (
+          <OuiSmallButton href="/" onClick={fooBar} />
+        )
+      `),
+
+      errors: [
+        {
+          message: '<OuiSmallButton> accepts either `href` or `onClick`, not both.',
+        },
+      ],
+    },
+    {
+      code: dedent(`
+        module.export = () => (
+          <OuiSmallButtonEmpty href="/" onClick={fooBar} />
+        )
+      `),
+
+      errors: [
+        {
+          message:
+            '<OuiSmallButtonEmpty> accepts either `href` or `onClick`, not both.',
+        },
+      ],
+    },
   ],
 });

src/components/button/button.tsx

@@ -314,3 +314,15 @@ export const OuiButton: FunctionComponent<Props> = ({
     />
   );
 };
+
+export type OuiSmallButtonProps = Omit<OuiButtonProps, 'size'>;
+
+// Cannot Omit<Props, 'size'> directly due to Exclude changing optional prop types
+type SmallProps = ExclusiveUnion<
+  Omit<OuiButtonPropsForAnchor, 'size'>,
+  Omit<OuiButtonPropsForButton, 'size'>
+>;
+
+export const OuiSmallButton: FunctionComponent<SmallProps> = (props) => (
+  <OuiButton {...props} size="s" />
+);

src/components/button/button_empty/button_empty.tsx

@@ -227,3 +227,14 @@ export const OuiButtonEmpty: FunctionComponent<OuiButtonEmptyProps> = ({
     </button>
   );
 };
+
+// @internal
+export type OuiSmallButtonEmptyProps = ExclusiveUnion<
+  Omit<OuiButtonEmptyPropsForAnchor, 'size'>,
+  Omit<OuiButtonEmptyPropsForButton, 'size'>
+>;
+
+// @internal
+export const OuiSmallButtonEmpty: FunctionComponent<OuiSmallButtonEmptyProps> = (
+  props
+) => <OuiButtonEmpty {...props} size="s" />;

src/components/button/button_empty/index.ts

@@ -34,4 +34,6 @@ export {
   OuiButtonEmptyColor,
   OuiButtonEmptyProps,
   OuiButtonEmptySizes,
+  OuiSmallButtonEmpty,
+  OuiSmallButtonEmptyProps,
 } from './button_empty';

src/components/button/button_group/button_group.tsx

@@ -211,3 +211,92 @@ export const OuiButtonGroup: FunctionComponent<Props> = ({
     </fieldset>
   );
 };
+
+// @internal
+export type OuiSmallButtonGroupProps = CommonProps & {
+  isDisabled?: boolean;
+  /**
+   * Expands the whole group to the full width of the container.
+   * Each button gets equal widths no matter the content
+   */
+  isFullWidth?: boolean;
+  /**
+   * Hides the label to only show the `iconType` provided by the `option`
+   */
+  isIconOnly?: boolean;
+  /**
+   * A hidden group title (required for accessibility)
+   */
+  legend: string;
+  /**
+   * Compressed styles don't support `ghost` color (Color will be changed to "text")
+   */
+  color?: ButtonColor;
+  /**
+   * Actual type is `'single' | 'multi'`.
+   * Determines how the selection of the group should be handled.
+   * With `'single'` only one option can be selected at a time (similar to radio group).
+   * With `'multi'` multiple options selected (similar to checkbox group).
+   */
+  type?: 'single' | 'multi';
+  /**
+   * An array of #OuiButtonGroupOptionProps
+   */
+  options: OuiButtonGroupOptionProps[];
+} & (
+    | {
+        /**
+         * Default for `type` is single so it can also be excluded
+         */
+        type?: 'single';
+        /**
+         * The `name` attribute for radio inputs;
+         * Defaults to a random string
+         */
+        name?: string;
+        /**
+         * Styles the selected option to look selected (usually with `fill`)
+         * Required by and only used in `type='single'`.
+         */
+        idSelected: string;
+        /**
+         * Single: Returns the `id` of the clicked option and the `value`
+         */
+        onChange: (id: string, value?: any) => void;
+        idToSelectedMap?: never;
+      }
+    | {
+        type: 'multi';
+        /**
+         * A map of `id`s as keys with the selected boolean values.
+         * Required by and only used in `type='multi'`.
+         */
+        idToSelectedMap?: { [id: string]: boolean };
+        /**
+         * Multi: Returns the `id` of the clicked option
+         */
+        onChange: (id: string) => void;
+        idSelected?: never;
+        name?: never;
+      }
+  );
+
+// @internal
+type SmallProps = Omit<
+  HTMLAttributes<HTMLFieldSetElement>,
+  'onChange' | 'color'
+> &
+  OuiSmallButtonGroupProps;
+
+// @internal
+export const OuiSmallButtonGroup: FunctionComponent<SmallProps> = (props) => (
+  <OuiButtonGroup {...props} buttonSize="s" />
+);
+
+// @internal
+export type OuiCompressedButtonGroupProps = OuiSmallButtonGroupProps;
+
+// @internal
+export const OuiCompressedButtonGroup: FunctionComponent<SmallProps> = (
+  props
+) => <OuiButtonGroup {...props} buttonSize="compressed" />;

src/components/button/button_group/index.ts

@@ -32,4 +32,8 @@ export {
   OuiButtonGroup,
   OuiButtonGroupOptionProps,
   OuiButtonGroupProps,
+  OuiSmallButtonGroup,
+  OuiSmallButtonGroupProps,
+  OuiCompressedButtonGroup,
+  OuiCompressedButtonGroupProps,
 } from './button_group';

src/components/button/button_icon/button_icon.tsx

@@ -239,3 +239,17 @@ export const OuiButtonIcon: FunctionComponent<Props> = ({
     </button>
   );
 };
+
+// @internal
+export type OuiSmallButtonIconProps = Omit<OuiButtonIconProps, 'size'>;
+
+// @internal
+type SmallProps = ExclusiveUnion<
+  Omit<OuiButtonIconPropsForAnchor, 'size'>,
+  Omit<OuiButtonIconPropsForButton, 'size'>
+>;
+
+// @internal
+export const OuiSmallButtonIcon: FunctionComponent<SmallProps> = (props) => (
+  <OuiButtonIcon {...props} size="s" />
+);

src/components/button/button_icon/index.ts

@@ -33,4 +33,6 @@ export {
   OuiButtonIconColor,
   OuiButtonIconProps,
   OuiButtonIconPropsForButton,
+  OuiSmallButtonIcon,
+  OuiSmallButtonIconProps,
 } from './button_icon';

src/components/button/index.ts

@@ -34,24 +34,34 @@ export {
   ButtonSize,
   OuiButton,
   OuiButtonProps,
+  OuiSmallButton,
+  OuiSmallButtonProps,
 } from './button';
 
 export {
   OuiButtonEmpty,
   OuiButtonEmptyColor,
   OuiButtonEmptyProps,
   OuiButtonEmptySizes,
+  OuiSmallButtonEmpty,
+  OuiSmallButtonEmptyProps,
 } from './button_empty';
 
 export {
   OuiButtonIcon,
   OuiButtonIconColor,
   OuiButtonIconProps,
   OuiButtonIconPropsForButton,
+  OuiSmallButtonIcon,
+  OuiSmallButtonIconProps,
 } from './button_icon';
 
 export {
   OuiButtonGroup,
   OuiButtonGroupOptionProps,
   OuiButtonGroupProps,
+  OuiSmallButtonGroup,
+  OuiSmallButtonGroupProps,
+  OuiCompressedButtonGroup,
+  OuiCompressedButtonGroupProps,
 } from './button_group';

src/components/color_picker/color_picker.tsx

@@ -695,3 +695,14 @@ export const OuiColorPicker: FunctionComponent<OuiColorPickerProps> = ({
     </OuiPopover>
   );
 };
+
+// @internal
+export type OuiCompressedColorPickerProps = Omit<
+  OuiColorPickerProps,
+  'compressed'
+>;
+
+// @internal
+export const OuiCompressedColorPicker: FunctionComponent<OuiCompressedColorPickerProps> = (
+  props
+) => <OuiColorPicker {...props} compressed />;

src/components/color_picker/index.ts

@@ -28,7 +28,12 @@
  * under the License.
  */
 
-export { OuiColorPicker, OuiColorPickerProps } from './color_picker';
+export {
+  OuiColorPicker,
+  OuiColorPickerProps,
+  OuiCompressedColorPicker,
+  OuiCompressedColorPickerProps,
+} from './color_picker';
 export {
   OuiColorPickerSwatch,
   OuiColorPickerSwatchProps,

src/components/combo_box/combo_box.tsx

@@ -1106,3 +1106,17 @@ export class OuiComboBox<T> extends Component<
     );
   }
 }
+
+// @internal
+export type OuiCompressedComboBoxProps<T> = Omit<
+  OuiComboBoxProps<T>,
+  'compressed'
+>;
+
+// @internal
+export class OuiCompressedComboBox<T> extends OuiComboBox<T> {
+  static defaultProps = {
+    ...OuiComboBox.defaultProps,
+    compressed: true,
+  };
+}

src/components/combo_box/index.ts

@@ -28,7 +28,13 @@
  * under the License.
  */
 
-export { OuiComboBox, OuiComboBoxProps } from './combo_box';
+export {
+  OuiComboBox,
+  OuiComboBoxProps,
+  OuiCompressedComboBox,
+  OuiCompressedComboBoxProps,
+} from './combo_box';
+
 export * from './combo_box_input';
 export * from './combo_box_options_list';
 export {