diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b332c5007..ff547030fa 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/packages/eslint-plugin/rules/href_or_on_click.js b/packages/eslint-plugin/rules/href_or_on_click.js
index af5025beb5..2110645503 100644
--- a/packages/eslint-plugin/rules/href_or_on_click.js
+++ b/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: {
diff --git a/packages/eslint-plugin/rules/href_or_on_click.test.js b/packages/eslint-plugin/rules/href_or_on_click.test.js
index b7b7ddda72..da026b74fd 100644
--- a/packages/eslint-plugin/rules/href_or_on_click.test.js
+++ b/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 = () => (
+
+ )
+ `),
+ },
+ {
+ code: dedent(`
+ module.export = () => (
+
+ )
+ `),
+ },
+ {
+ code: dedent(`
+ module.export = () => (
+
+ )
+ `),
+ },
+ {
+ code: dedent(`
+ module.export = () => (
+
+ )
+ `),
+ },
+ {
+ code: dedent(`
+ module.export = () => (
+ executeAction()} />
+ )
+ `),
+ },
],
invalid: [
@@ -102,5 +137,32 @@ ruleTester.run('@opensearch-project/oui/href-or-on-click', rule, {
},
],
},
+ {
+ code: dedent(`
+ module.export = () => (
+
+ )
+ `),
+
+ errors: [
+ {
+ message: ' accepts either `href` or `onClick`, not both.',
+ },
+ ],
+ },
+ {
+ code: dedent(`
+ module.export = () => (
+
+ )
+ `),
+
+ errors: [
+ {
+ message:
+ ' accepts either `href` or `onClick`, not both.',
+ },
+ ],
+ },
],
});
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 4851405827..d091a866dd 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -314,3 +314,15 @@ export const OuiButton: FunctionComponent = ({
/>
);
};
+
+export type OuiSmallButtonProps = Omit;
+
+// Cannot Omit directly due to Exclude changing optional prop types
+type SmallProps = ExclusiveUnion<
+ Omit,
+ Omit
+>;
+
+export const OuiSmallButton: FunctionComponent = (props) => (
+
+);
diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx
index cb5467cd06..4c4495ebda 100644
--- a/src/components/button/button_empty/button_empty.tsx
+++ b/src/components/button/button_empty/button_empty.tsx
@@ -227,3 +227,14 @@ export const OuiButtonEmpty: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiSmallButtonEmptyProps = ExclusiveUnion<
+ Omit,
+ Omit
+>;
+
+// @internal
+export const OuiSmallButtonEmpty: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/button/button_empty/index.ts b/src/components/button/button_empty/index.ts
index 7aa64a510e..faf18afe33 100644
--- a/src/components/button/button_empty/index.ts
+++ b/src/components/button/button_empty/index.ts
@@ -34,4 +34,6 @@ export {
OuiButtonEmptyColor,
OuiButtonEmptyProps,
OuiButtonEmptySizes,
+ OuiSmallButtonEmpty,
+ OuiSmallButtonEmptyProps,
} from './button_empty';
diff --git a/src/components/button/button_group/button_group.tsx b/src/components/button/button_group/button_group.tsx
index 2faa5ecf88..c0e5a00f3c 100644
--- a/src/components/button/button_group/button_group.tsx
+++ b/src/components/button/button_group/button_group.tsx
@@ -211,3 +211,92 @@ export const OuiButtonGroup: FunctionComponent = ({
);
};
+
+// @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,
+ 'onChange' | 'color'
+> &
+ OuiSmallButtonGroupProps;
+
+// @internal
+export const OuiSmallButtonGroup: FunctionComponent = (props) => (
+
+);
+
+// @internal
+export type OuiCompressedButtonGroupProps = OuiSmallButtonGroupProps;
+
+// @internal
+export const OuiCompressedButtonGroup: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/button/button_group/index.ts b/src/components/button/button_group/index.ts
index 6abbb0b81b..dd1ae5a3dd 100644
--- a/src/components/button/button_group/index.ts
+++ b/src/components/button/button_group/index.ts
@@ -32,4 +32,8 @@ export {
OuiButtonGroup,
OuiButtonGroupOptionProps,
OuiButtonGroupProps,
+ OuiSmallButtonGroup,
+ OuiSmallButtonGroupProps,
+ OuiCompressedButtonGroup,
+ OuiCompressedButtonGroupProps,
} from './button_group';
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
index e9d0c98c00..15feb756bf 100644
--- a/src/components/button/button_icon/button_icon.tsx
+++ b/src/components/button/button_icon/button_icon.tsx
@@ -239,3 +239,17 @@ export const OuiButtonIcon: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiSmallButtonIconProps = Omit;
+
+// @internal
+type SmallProps = ExclusiveUnion<
+ Omit,
+ Omit
+>;
+
+// @internal
+export const OuiSmallButtonIcon: FunctionComponent = (props) => (
+
+);
diff --git a/src/components/button/button_icon/index.ts b/src/components/button/button_icon/index.ts
index 1fb2631541..fdae01fdbd 100644
--- a/src/components/button/button_icon/index.ts
+++ b/src/components/button/button_icon/index.ts
@@ -33,4 +33,6 @@ export {
OuiButtonIconColor,
OuiButtonIconProps,
OuiButtonIconPropsForButton,
+ OuiSmallButtonIcon,
+ OuiSmallButtonIconProps,
} from './button_icon';
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 6c2aeb7f81..45df038aaf 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -34,6 +34,8 @@ export {
ButtonSize,
OuiButton,
OuiButtonProps,
+ OuiSmallButton,
+ OuiSmallButtonProps,
} from './button';
export {
@@ -41,6 +43,8 @@ export {
OuiButtonEmptyColor,
OuiButtonEmptyProps,
OuiButtonEmptySizes,
+ OuiSmallButtonEmpty,
+ OuiSmallButtonEmptyProps,
} from './button_empty';
export {
@@ -48,10 +52,16 @@ export {
OuiButtonIconColor,
OuiButtonIconProps,
OuiButtonIconPropsForButton,
+ OuiSmallButtonIcon,
+ OuiSmallButtonIconProps,
} from './button_icon';
export {
OuiButtonGroup,
OuiButtonGroupOptionProps,
OuiButtonGroupProps,
+ OuiSmallButtonGroup,
+ OuiSmallButtonGroupProps,
+ OuiCompressedButtonGroup,
+ OuiCompressedButtonGroupProps,
} from './button_group';
diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx
index 7f0d8a42df..caf1efd741 100644
--- a/src/components/color_picker/color_picker.tsx
+++ b/src/components/color_picker/color_picker.tsx
@@ -695,3 +695,14 @@ export const OuiColorPicker: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiCompressedColorPickerProps = Omit<
+ OuiColorPickerProps,
+ 'compressed'
+>;
+
+// @internal
+export const OuiCompressedColorPicker: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/color_picker/index.ts b/src/components/color_picker/index.ts
index 9afba2e282..60b95099bc 100644
--- a/src/components/color_picker/index.ts
+++ b/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,
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index fa1de7d014..236b105646 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -1106,3 +1106,17 @@ export class OuiComboBox extends Component<
);
}
}
+
+// @internal
+export type OuiCompressedComboBoxProps = Omit<
+ OuiComboBoxProps,
+ 'compressed'
+>;
+
+// @internal
+export class OuiCompressedComboBox extends OuiComboBox {
+ static defaultProps = {
+ ...OuiComboBox.defaultProps,
+ compressed: true,
+ };
+}
diff --git a/src/components/combo_box/index.ts b/src/components/combo_box/index.ts
index 917db439e9..fd96c097a8 100644
--- a/src/components/combo_box/index.ts
+++ b/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 {
diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx
index 457e2bdfcd..0911fed807 100644
--- a/src/components/filter_group/filter_button.tsx
+++ b/src/components/filter_group/filter_button.tsx
@@ -33,7 +33,12 @@ import classNames from 'classnames';
import { OuiI18n } from '../i18n';
import { OuiNotificationBadge } from '../badge/notification_badge';
-import { OuiButtonEmpty, OuiButtonEmptyProps } from '../button/button_empty';
+
+import {
+ OuiButtonEmpty,
+ OuiButtonEmptyProps,
+ OuiSmallButtonEmptyProps,
+} from '../button/button_empty';
import { useInnerText } from '../inner_text';
@@ -168,3 +173,43 @@ export const OuiFilterButton: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiSmallFilterButtonProps = OuiSmallButtonEmptyProps & {
+ /**
+ * Bolds the button if true
+ */
+ hasActiveFilters?: boolean;
+ /**
+ * Pass the total number of filters available and it will
+ * add a subdued notification badge showing the number
+ */
+ numFilters?: number;
+ /**
+ * Pass the number of selected filters and it will
+ * add a bright notification badge showing the number
+ */
+ numActiveFilters?: number;
+ /**
+ * Applies a visual state to the button useful when using with a popover.
+ */
+ isSelected?: boolean;
+ /**
+ * Should the button grow to fill its container, best used for dropdown buttons
+ */
+ grow?: boolean;
+ /**
+ * Remove border after button, good for opposite filters
+ */
+ withNext?: boolean;
+ /**
+ * _DEPRECATED: use `withNext`_
+ * Remove border after button, good for opposite filters
+ */
+ noDivider?: boolean;
+};
+
+// @internal
+export const OuiSmallFilterButton: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/filter_group/index.ts b/src/components/filter_group/index.ts
index 6c3b04b52b..161b5f0a03 100644
--- a/src/components/filter_group/index.ts
+++ b/src/components/filter_group/index.ts
@@ -30,7 +30,12 @@
export { OuiFilterGroup, OuiFilterGroupProps } from './filter_group';
-export { OuiFilterButton, OuiFilterButtonProps } from './filter_button';
+export {
+ OuiFilterButton,
+ OuiFilterButtonProps,
+ OuiSmallFilterButton,
+ OuiSmallFilterButtonProps,
+} from './filter_button';
export {
OuiFilterSelectItem,
diff --git a/src/components/form/checkbox/checkbox.tsx b/src/components/form/checkbox/checkbox.tsx
index 4eb083ec8b..e8e0739045 100644
--- a/src/components/form/checkbox/checkbox.tsx
+++ b/src/components/form/checkbox/checkbox.tsx
@@ -161,3 +161,14 @@ export class OuiCheckbox extends Component {
}
}
}
+
+// @internal
+export type OuiCompressedCheckboxProps = Omit;
+
+// @internal
+export class OuiCompressedCheckbox extends OuiCheckbox {
+ static defaultProps = {
+ ...OuiCheckbox.defaultProps,
+ compressed: true,
+ };
+}
diff --git a/src/components/form/checkbox/checkbox_group.tsx b/src/components/form/checkbox/checkbox_group.tsx
index 515a5c2ac1..2fa94101a9 100644
--- a/src/components/form/checkbox/checkbox_group.tsx
+++ b/src/components/form/checkbox/checkbox_group.tsx
@@ -121,3 +121,16 @@ export const OuiCheckboxGroup: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiCompressedCheckboxGroupProps = CommonProps & {
+ options: OuiCheckboxGroupOption[];
+ idToSelectedMap: OuiCheckboxGroupIdToSelectedMap;
+ onChange: (optionId: string) => void;
+ disabled?: boolean;
+} & ExclusiveUnion;
+
+// @internal
+export const OuiCompressedCheckboxGroup: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/form/checkbox/index.ts b/src/components/form/checkbox/index.ts
index 0af047faca..90fca7c9b6 100644
--- a/src/components/form/checkbox/index.ts
+++ b/src/components/form/checkbox/index.ts
@@ -28,9 +28,17 @@
* under the License.
*/
-export { OuiCheckbox, OuiCheckboxProps } from './checkbox';
+export {
+ OuiCheckbox,
+ OuiCheckboxProps,
+ OuiCompressedCheckbox,
+ OuiCompressedCheckboxProps,
+} from './checkbox';
+
export {
OuiCheckboxGroup,
OuiCheckboxGroupProps,
OuiCheckboxGroupOption,
+ OuiCompressedCheckboxGroup,
+ OuiCompressedCheckboxGroupProps,
} from './checkbox_group';
diff --git a/src/components/form/field_number/field_number.tsx b/src/components/form/field_number/field_number.tsx
index d2a14ceaa5..430fc095a0 100644
--- a/src/components/form/field_number/field_number.tsx
+++ b/src/components/form/field_number/field_number.tsx
@@ -149,3 +149,14 @@ export const OuiFieldNumber: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiCompressedFieldNumberProps = Omit<
+ OuiFieldNumberProps,
+ 'compressed'
+>;
+
+// @internal
+export const OuiCompressedFieldNumber: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/form/field_number/index.ts b/src/components/form/field_number/index.ts
index b75d97a6cd..afc314df24 100644
--- a/src/components/form/field_number/index.ts
+++ b/src/components/form/field_number/index.ts
@@ -28,4 +28,9 @@
* under the License.
*/
-export { OuiFieldNumber, OuiFieldNumberProps } from './field_number';
+export {
+ OuiFieldNumber,
+ OuiFieldNumberProps,
+ OuiCompressedFieldNumber,
+ OuiCompressedFieldNumberProps,
+} from './field_number';
diff --git a/src/components/form/field_password/field_password.tsx b/src/components/form/field_password/field_password.tsx
index 6044102d5f..461f21f533 100644
--- a/src/components/form/field_password/field_password.tsx
+++ b/src/components/form/field_password/field_password.tsx
@@ -200,3 +200,14 @@ OuiFieldPassword.defaultProps = {
isLoading: false,
compressed: false,
};
+
+// @internal
+export type OuiCompressedFieldPasswordProps = Omit<
+ OuiFieldPasswordProps,
+ 'compressed'
+>;
+
+// @internal
+export const OuiCompressedFieldPassword: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/form/field_password/index.ts b/src/components/form/field_password/index.ts
index f36e5fbe6c..d5c124be9b 100644
--- a/src/components/form/field_password/index.ts
+++ b/src/components/form/field_password/index.ts
@@ -28,4 +28,9 @@
* under the License.
*/
-export { OuiFieldPassword, OuiFieldPasswordProps } from './field_password';
+export {
+ OuiFieldPassword,
+ OuiFieldPasswordProps,
+ OuiCompressedFieldPassword,
+ OuiCompressedFieldPasswordProps,
+} from './field_password';
diff --git a/src/components/form/field_search/field_search.tsx b/src/components/form/field_search/field_search.tsx
index 55e7400fd1..9a4ecdc0c8 100644
--- a/src/components/form/field_search/field_search.tsx
+++ b/src/components/form/field_search/field_search.tsx
@@ -291,3 +291,17 @@ export class OuiFieldSearch extends Component<
);
}
}
+
+// @internal
+export type OuiCompressedFieldSearchProps = Omit<
+ OuiFieldSearchProps,
+ 'compressed'
+>;
+
+// @internal
+export class OuiCompressedFieldSearch extends OuiFieldSearch {
+ static defaultProps = {
+ ...OuiFieldSearch.defaultProps,
+ compressed: true,
+ };
+}
diff --git a/src/components/form/field_search/index.ts b/src/components/form/field_search/index.ts
index b50c406a09..5539ca0a4f 100644
--- a/src/components/form/field_search/index.ts
+++ b/src/components/form/field_search/index.ts
@@ -28,4 +28,9 @@
* under the License.
*/
-export { OuiFieldSearch, OuiFieldSearchProps } from './field_search';
+export {
+ OuiFieldSearch,
+ OuiFieldSearchProps,
+ OuiCompressedFieldSearch,
+ OuiCompressedFieldSearchProps,
+} from './field_search';
diff --git a/src/components/form/field_text/field_text.tsx b/src/components/form/field_text/field_text.tsx
index bb02673367..b36cbe7022 100644
--- a/src/components/form/field_text/field_text.tsx
+++ b/src/components/form/field_text/field_text.tsx
@@ -130,3 +130,11 @@ export const OuiFieldText: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiCompressedFieldTextProps = Omit;
+
+// @internal
+export const OuiCompressedFieldText: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/form/field_text/index.ts b/src/components/form/field_text/index.ts
index 35ab55177e..3dd3a6591b 100644
--- a/src/components/form/field_text/index.ts
+++ b/src/components/form/field_text/index.ts
@@ -28,4 +28,9 @@
* under the License.
*/
-export { OuiFieldText, OuiFieldTextProps } from './field_text';
+export {
+ OuiFieldText,
+ OuiFieldTextProps,
+ OuiCompressedFieldText,
+ OuiCompressedFieldTextProps,
+} from './field_text';
diff --git a/src/components/form/file_picker/file_picker.tsx b/src/components/form/file_picker/file_picker.tsx
index 79f64bee5d..79bc7c40ce 100644
--- a/src/components/form/file_picker/file_picker.tsx
+++ b/src/components/form/file_picker/file_picker.tsx
@@ -263,3 +263,17 @@ export class OuiFilePicker extends Component {
);
}
}
+
+// @internal
+export type OuiCompressedFilePickerProps = Omit<
+ OuiFilePickerProps,
+ 'compressed'
+>;
+
+// @internal
+export class OuiCompressedFilePicker extends OuiFilePicker {
+ static defaultProps = {
+ ...OuiFilePicker.defaultProps,
+ compressed: true,
+ };
+}
diff --git a/src/components/form/file_picker/index.ts b/src/components/form/file_picker/index.ts
index 36779fcdfe..af79d15e84 100644
--- a/src/components/form/file_picker/index.ts
+++ b/src/components/form/file_picker/index.ts
@@ -28,4 +28,9 @@
* under the License.
*/
-export { OuiFilePicker, OuiFilePickerProps } from './file_picker';
+export {
+ OuiFilePicker,
+ OuiFilePickerProps,
+ OuiCompressedFilePicker,
+ OuiCompressedFilePickerProps,
+} from './file_picker';
diff --git a/src/components/form/form_fieldset/form_legend.tsx b/src/components/form/form_fieldset/form_legend.tsx
index 4404ec0b6c..76685c5c0b 100644
--- a/src/components/form/form_fieldset/form_legend.tsx
+++ b/src/components/form/form_fieldset/form_legend.tsx
@@ -75,3 +75,14 @@ export const OuiFormLegend: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiCompressedFormLegendProps = Omit<
+ OuiFormLegendProps,
+ 'compressed'
+>;
+
+// @internal
+export const OuiCompressedFormLegend: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/form/form_fieldset/index.ts b/src/components/form/form_fieldset/index.ts
index c4092a2373..e3f18b3de8 100644
--- a/src/components/form/form_fieldset/index.ts
+++ b/src/components/form/form_fieldset/index.ts
@@ -29,4 +29,9 @@
*/
export { OuiFormFieldset, OuiFormFieldsetProps } from './form_fieldset';
-export { OuiFormLegend, OuiFormLegendProps } from './form_legend';
+export {
+ OuiFormLegend,
+ OuiFormLegendProps,
+ OuiCompressedFormLegend,
+ OuiCompressedFormLegendProps,
+} from './form_legend';
diff --git a/src/components/form/form_row/form_row.tsx b/src/components/form/form_row/form_row.tsx
index e654909df1..d3303703b0 100644
--- a/src/components/form/form_row/form_row.tsx
+++ b/src/components/form/form_row/form_row.tsx
@@ -328,3 +328,17 @@ export class OuiFormRow extends Component {
);
}
}
+
+// @internal
+export type OuiCompressedFormRowProps = ExclusiveUnion<
+ Omit,
+ Omit
+>;
+
+// @internal
+export class OuiCompressedFormRow extends OuiFormRow {
+ static defaultProps = {
+ ...OuiFormRow.defaultProps,
+ display: 'rowCompressed',
+ };
+}
diff --git a/src/components/form/form_row/index.ts b/src/components/form/form_row/index.ts
index ebc2fb85c2..2a3606a2e8 100644
--- a/src/components/form/form_row/index.ts
+++ b/src/components/form/form_row/index.ts
@@ -28,4 +28,9 @@
* under the License.
*/
-export { OuiFormRow, OuiFormRowProps } from './form_row';
+export {
+ OuiFormRow,
+ OuiFormRowProps,
+ OuiCompressedFormRow,
+ OuiCompressedFormRowProps,
+} from './form_row';
diff --git a/src/components/form/radio/index.ts b/src/components/form/radio/index.ts
index b36bd20698..309ce14182 100644
--- a/src/components/form/radio/index.ts
+++ b/src/components/form/radio/index.ts
@@ -28,9 +28,16 @@
* under the License.
*/
-export { OuiRadio, OuiRadioProps } from './radio';
+export {
+ OuiRadio,
+ OuiRadioProps,
+ OuiCompressedRadio,
+ OuiCompressedRadioProps,
+} from './radio';
export {
OuiRadioGroup,
OuiRadioGroupProps,
OuiRadioGroupOption,
+ OuiCompressedRadioGroup,
+ OuiCompressedRadioGroupProps,
} from './radio_group';
diff --git a/src/components/form/radio/radio.tsx b/src/components/form/radio/radio.tsx
index 619010618d..603c1c4abd 100644
--- a/src/components/form/radio/radio.tsx
+++ b/src/components/form/radio/radio.tsx
@@ -120,3 +120,16 @@ export const OuiRadio: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiCompressedRadioProps = CommonProps &
+ Omit, 'onChange' | 'id'> &
+ ExclusiveUnion<
+ ExclusiveUnion, idWithLabel>,
+ withId
+ >;
+
+// @internal
+export const OuiCompressedRadio: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/form/radio/radio_group.tsx b/src/components/form/radio/radio_group.tsx
index 4b1f22bad4..fe9d7fcf36 100644
--- a/src/components/form/radio/radio_group.tsx
+++ b/src/components/form/radio/radio_group.tsx
@@ -126,3 +126,17 @@ export const OuiRadioGroup: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiCompressedRadioGroupProps = CommonProps & {
+ disabled?: boolean;
+ name?: string;
+ options: OuiRadioGroupOption[];
+ idSelected?: string;
+ onChange: OuiRadioGroupChangeCallback;
+} & ExclusiveUnion;
+
+// @internal
+export const OuiCompressedRadioGroup: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
index 03e5cd2804..3af12d8468 100644
--- a/src/components/form/range/dual_range.tsx
+++ b/src/components/form/range/dual_range.tsx
@@ -794,3 +794,14 @@ export class OuiDualRange extends Component {
return thePopover || theRange;
}
}
+
+// @internal
+export type OuiCompressedDualRangeProps = Omit;
+
+// @internal
+export class OuiCompressedDualRange extends OuiDualRange {
+ static defaultProps = {
+ ...OuiDualRange.defaultProps,
+ compressed: true,
+ };
+}
diff --git a/src/components/form/range/index.ts b/src/components/form/range/index.ts
index 761232419a..5cbb294d45 100644
--- a/src/components/form/range/index.ts
+++ b/src/components/form/range/index.ts
@@ -28,5 +28,16 @@
* under the License.
*/
-export { OuiDualRange, OuiDualRangeProps } from './dual_range';
-export { OuiRange, OuiRangeProps } from './range';
+export {
+ OuiDualRange,
+ OuiDualRangeProps,
+ OuiCompressedDualRange,
+ OuiCompressedDualRangeProps,
+} from './dual_range';
+
+export {
+ OuiRange,
+ OuiRangeProps,
+ OuiCompressedRange,
+ OuiCompressedRangeProps,
+} from './range';
diff --git a/src/components/form/range/range.tsx b/src/components/form/range/range.tsx
index 1f9be802af..ce1f153cf6 100644
--- a/src/components/form/range/range.tsx
+++ b/src/components/form/range/range.tsx
@@ -357,3 +357,14 @@ export class OuiRange extends Component {
return thePopover ? thePopover : theRange;
}
}
+
+// @internal
+export type OuiCompressedRangeProps = Omit;
+
+// @internal
+export class OuiCompressedRange extends OuiRange {
+ static defaultProps = {
+ ...OuiRange.defaultProps,
+ compressed: true,
+ };
+}
diff --git a/src/components/form/select/index.ts b/src/components/form/select/index.ts
index 83feff2be4..6a126b75ba 100644
--- a/src/components/form/select/index.ts
+++ b/src/components/form/select/index.ts
@@ -28,4 +28,10 @@
* under the License.
*/
-export { OuiSelect, OuiSelectProps, OuiSelectOption } from './select';
+export {
+ OuiSelect,
+ OuiSelectProps,
+ OuiSelectOption,
+ OuiCompressedSelect,
+ OuiCompressedSelectProps,
+} from './select';
diff --git a/src/components/form/select/select.tsx b/src/components/form/select/select.tsx
index ce31ae86e8..9d4545c026 100644
--- a/src/components/form/select/select.tsx
+++ b/src/components/form/select/select.tsx
@@ -178,3 +178,11 @@ export const OuiSelect: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiCompressedSelectProps = Omit;
+
+// @internal
+export const OuiCompressedSelect: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/form/super_select/index.ts b/src/components/form/super_select/index.ts
index 2309754441..628f189ce8 100644
--- a/src/components/form/super_select/index.ts
+++ b/src/components/form/super_select/index.ts
@@ -28,7 +28,13 @@
* under the License.
*/
-export { OuiSuperSelect, OuiSuperSelectProps } from './super_select';
+export {
+ OuiSuperSelect,
+ OuiSuperSelectProps,
+ OuiCompressedSuperSelect,
+ OuiCompressedSuperSelectProps,
+} from './super_select';
+
export {
OuiSuperSelectControl,
OuiSuperSelectControlProps,
diff --git a/src/components/form/super_select/super_select.tsx b/src/components/form/super_select/super_select.tsx
index 710f67c1f5..122a91fce9 100644
--- a/src/components/form/super_select/super_select.tsx
+++ b/src/components/form/super_select/super_select.tsx
@@ -346,3 +346,19 @@ export class OuiSuperSelect extends Component<
);
}
}
+
+// @internal
+export type OuiCompressedSuperSelectProps = Omit<
+ OuiSuperSelectProps,
+ 'compressed'
+>;
+
+// @internal
+export class OuiCompressedSuperSelect extends OuiSuperSelect<
+ T
+> {
+ static defaultProps = {
+ ...OuiSuperSelect.defaultProps,
+ compressed: true,
+ };
+}
diff --git a/src/components/form/switch/index.ts b/src/components/form/switch/index.ts
index cab5b4abd9..6518ec9f01 100644
--- a/src/components/form/switch/index.ts
+++ b/src/components/form/switch/index.ts
@@ -28,4 +28,10 @@
* under the License.
*/
-export { OuiSwitch, OuiSwitchProps, OuiSwitchEvent } from './switch';
+export {
+ OuiSwitch,
+ OuiSwitchProps,
+ OuiSwitchEvent,
+ OuiCompressedSwitch,
+ OuiCompressedSwitchProps,
+} from './switch';
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
index bdc13cd255..bfeddde9a2 100644
--- a/src/components/form/switch/switch.tsx
+++ b/src/components/form/switch/switch.tsx
@@ -163,3 +163,11 @@ export const OuiSwitch: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiCompressedSwitchProps = Omit;
+
+// @internal
+export const OuiCompressedSwitch: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/form/text_area/index.ts b/src/components/form/text_area/index.ts
index 2daecd57e8..99b94f715a 100644
--- a/src/components/form/text_area/index.ts
+++ b/src/components/form/text_area/index.ts
@@ -28,4 +28,9 @@
* under the License.
*/
-export { OuiTextArea, OuiTextAreaProps } from './text_area';
+export {
+ OuiTextArea,
+ OuiTextAreaProps,
+ OuiCompressedTextArea,
+ OuiCompressedTextAreaProps,
+} from './text_area';
diff --git a/src/components/form/text_area/text_area.tsx b/src/components/form/text_area/text_area.tsx
index 9b5ac4a131..c19d80140e 100644
--- a/src/components/form/text_area/text_area.tsx
+++ b/src/components/form/text_area/text_area.tsx
@@ -105,3 +105,11 @@ export const OuiTextArea: FunctionComponent = ({
);
};
+
+// @internal
+export type OuiCompressedTextAreaProps = Omit;
+
+// @internal
+export const OuiCompressedTextArea: FunctionComponent = (
+ props
+) => ;
diff --git a/src/components/index.js b/src/components/index.js
index 80ff0c43cd..eeb6131f7e 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -33,6 +33,10 @@ export {
OuiButtonEmpty,
OuiButtonIcon,
OuiButtonGroup,
+ OuiSmallButton,
+ OuiSmallButtonEmpty,
+ OuiSmallButtonIcon,
+ OuiSmallButtonGroup,
} from './button';
export { OuiCallOut } from './call_out';
@@ -53,9 +57,10 @@ export {
OuiColorStops,
OuiHue,
OuiSaturation,
+ OuiCompressedColorPicker,
} from './color_picker';
-export { OuiComboBox } from './combo_box';
+export { OuiComboBox, OuiCompressedComboBox } from './combo_box';
export { OuiComment, OuiCommentList } from './comment_list';
@@ -115,6 +120,7 @@ export {
OuiFilterButton,
OuiFilterGroup,
OuiFilterSelectItem,
+ OuiSmallFilterButton,
} from './filter_group';
export { OuiFacetButton, OuiFacetGroup } from './facet';
@@ -158,6 +164,23 @@ export {
OuiSwitch,
OuiTextArea,
OuiValidatableControl,
+ OuiCompressedCheckbox,
+ OuiCompressedCheckboxGroup,
+ OuiCompressedDualRange,
+ OuiCompressedFieldNumber,
+ OuiCompressedFieldPassword,
+ OuiCompressedFieldSearch,
+ OuiCompressedFieldText,
+ OuiCompressedFilePicker,
+ OuiCompressedFormLegend,
+ OuiCompressedFormRow,
+ OuiCompressedRadio,
+ OuiCompressedRadioGroup,
+ OuiCompressedRange,
+ OuiCompressedSelect,
+ OuiCompressedSuperSelect,
+ OuiCompressedSwitch,
+ OuiCompressedTextArea,
} from './form';
export {