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]>

CHANGELOG.md

@@ -11,6 +11,8 @@
 ### 📈 Features/Enhancements
 
 - [OuiFilterGroup] Allow popovers to size to content ([#1280](https://github.com/opensearch-project/oui/pull/1280))
+- Add compressed form, color-picker, and combo-box internal components ([#1301](https://github.com/opensearch-project/oui/pull/1301))
+- Add small button and filter-button internal components ([#1301](https://github.com/opensearch-project/oui/pull/1301))
 
 ### 🐛 Bug Fixes
 

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 {