From 7a6a45666ca7971d0dca35b3961876df1e6df78b Mon Sep 17 00:00:00 2001 From: Miki Date: Wed, 17 Jul 2024 08:58:26 -0700 Subject: [PATCH] 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 * Add internal compressed form family components Signed-off-by: Miki * Add internal compressed color picker component Signed-off-by: Miki * Add internal compressed combo-box component Signed-off-by: Miki * Add internal compressed filter-button component Signed-off-by: Miki * Update changelog Signed-off-by: Miki --------- Signed-off-by: Miki --- CHANGELOG.md | 2 + .../eslint-plugin/rules/href_or_on_click.js | 9 +- .../rules/href_or_on_click.test.js | 62 +++++++++++++ src/components/button/button.tsx | 12 +++ .../button/button_empty/button_empty.tsx | 11 +++ src/components/button/button_empty/index.ts | 2 + .../button/button_group/button_group.tsx | 89 +++++++++++++++++++ src/components/button/button_group/index.ts | 4 + .../button/button_icon/button_icon.tsx | 14 +++ src/components/button/button_icon/index.ts | 2 + src/components/button/index.ts | 10 +++ src/components/color_picker/color_picker.tsx | 11 +++ src/components/color_picker/index.ts | 7 +- src/components/combo_box/combo_box.tsx | 14 +++ src/components/combo_box/index.ts | 8 +- src/components/filter_group/filter_button.tsx | 47 +++++++++- src/components/filter_group/index.ts | 7 +- src/components/form/checkbox/checkbox.tsx | 11 +++ .../form/checkbox/checkbox_group.tsx | 13 +++ src/components/form/checkbox/index.ts | 10 ++- .../form/field_number/field_number.tsx | 11 +++ src/components/form/field_number/index.ts | 7 +- .../form/field_password/field_password.tsx | 11 +++ src/components/form/field_password/index.ts | 7 +- .../form/field_search/field_search.tsx | 14 +++ src/components/form/field_search/index.ts | 7 +- src/components/form/field_text/field_text.tsx | 8 ++ src/components/form/field_text/index.ts | 7 +- .../form/file_picker/file_picker.tsx | 14 +++ src/components/form/file_picker/index.ts | 7 +- .../form/form_fieldset/form_legend.tsx | 11 +++ src/components/form/form_fieldset/index.ts | 7 +- src/components/form/form_row/form_row.tsx | 14 +++ src/components/form/form_row/index.ts | 7 +- src/components/form/radio/index.ts | 9 +- src/components/form/radio/radio.tsx | 13 +++ src/components/form/radio/radio_group.tsx | 14 +++ src/components/form/range/dual_range.tsx | 11 +++ src/components/form/range/index.ts | 15 +++- src/components/form/range/range.tsx | 11 +++ src/components/form/select/index.ts | 8 +- src/components/form/select/select.tsx | 8 ++ src/components/form/super_select/index.ts | 8 +- .../form/super_select/super_select.tsx | 16 ++++ src/components/form/switch/index.ts | 8 +- src/components/form/switch/switch.tsx | 8 ++ src/components/form/text_area/index.ts | 7 +- src/components/form/text_area/text_area.tsx | 8 ++ src/components/index.js | 25 +++++- 49 files changed, 625 insertions(+), 21 deletions(-) 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 {