[EuiCheckbox][EuiRadio] Remove compressed props (#7818)

Author: cee-chen

packages/eui/changelogs/upcoming/7818.md

@@ -0,0 +1,8 @@
+**Breaking changes**
+
+- Removed the unused `compressed` prop from `EuiCheckbox` and `EuiRadio`. This prop was not doing anything on individual components.
+
+**CSS-in-JS conversions**
+
+- Converted `EuiCheckboxGroup` to Emotion
+- Converted `EuiRadioGroup` to Emotion

packages/eui/src-docs/src/views/selection_controls/checkbox.js

@@ -57,10 +57,10 @@ export default () => {
 
       <EuiCheckbox
         id={compressedCheckboxId}
-        label="I am a compressed checkbox"
+        label="I am a readonly checkbox"
         checked={checked}
         onChange={(e) => onChange(e)}
-        compressed
+        readOnly
       />
     </Fragment>
   );

packages/eui/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiCheckboxGroup (mocked checkbox) disabled is rendered 1`] = `
-<div>
+<div
+  class="euiCheckboxGroup emotion-euiCheckboxGroup"
+>
   <div
     data-eui-checkbox=""
   />
@@ -12,7 +14,9 @@ exports[`EuiCheckboxGroup (mocked checkbox) disabled is rendered 1`] = `
 `;
 
 exports[`EuiCheckboxGroup (mocked checkbox) idToSelectedMap is rendered 1`] = `
-<div>
+<div
+  class="euiCheckboxGroup emotion-euiCheckboxGroup"
+>
   <div
     data-eui-checkbox=""
   />
@@ -23,7 +27,9 @@ exports[`EuiCheckboxGroup (mocked checkbox) idToSelectedMap is rendered 1`] = `
 `;
 
 exports[`EuiCheckboxGroup (mocked checkbox) individual disabled is rendered 1`] = `
-<div>
+<div
+  class="euiCheckboxGroup emotion-euiCheckboxGroup"
+>
   <div
     data-eui-checkbox=""
   />
@@ -36,13 +42,15 @@ exports[`EuiCheckboxGroup (mocked checkbox) individual disabled is rendered 1`]
 exports[`EuiCheckboxGroup (mocked checkbox) is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiTestCss"
+  class="euiCheckboxGroup testClass1 testClass2 emotion-euiCheckboxGroup-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiCheckboxGroup (mocked checkbox) legend is rendered 1`] = `
-<fieldset>
+<fieldset
+  class="euiCheckboxGroup emotion-euiCheckboxGroup"
+>
   <legend
     class="euiFormLegend"
   >
@@ -52,7 +60,9 @@ exports[`EuiCheckboxGroup (mocked checkbox) legend is rendered 1`] = `
 `;
 
 exports[`EuiCheckboxGroup (mocked checkbox) options are rendered 1`] = `
-<div>
+<div
+  class="euiCheckboxGroup emotion-euiCheckboxGroup"
+>
   <div
     data-eui-checkbox=""
   />

packages/eui/src/components/form/checkbox/_checkbox_group.scss

@@ -1,2 +1 @@
 @import 'checkbox';
-@import 'checkbox_group';

packages/eui/src/components/form/checkbox/_index.scss

@@ -19,7 +19,6 @@ const meta: Meta<EuiCheckboxProps> = {
   component: EuiCheckbox,
   args: {
     checked: false,
-    compressed: false,
     disabled: false,
     indeterminate: false,
     // set up for easier testing/QA

packages/eui/src/components/form/checkbox/checkbox.stories.tsx

@@ -30,10 +30,6 @@ export interface EuiCheckboxProps
   inputRef?: (element: HTMLInputElement) => void;
   label?: ReactNode;
   disabled?: boolean;
-  /**
-   * when `true` creates a shorter height checkbox row
-   */
-  compressed?: boolean;
   indeterminate?: boolean;
   /**
    * Object of props passed to the <label/>
@@ -50,7 +46,6 @@ export const EuiCheckbox: FunctionComponent<EuiCheckboxProps> = ({
   onChange,
   type,
   disabled = false,
-  compressed = false,
   indeterminate = false,
   inputRef,
   labelProps,
@@ -60,7 +55,6 @@ export const EuiCheckbox: FunctionComponent<EuiCheckboxProps> = ({
     'euiCheckbox',
     {
       'euiCheckbox--noLabel': !label,
-      'euiCheckbox--compressed': compressed,
     },
     className
   );

packages/eui/src/components/form/checkbox/checkbox.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+
+export const euiCheckboxGroupStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiCheckboxGroup: css`
+    display: flex;
+    flex-direction: column;
+  `,
+  // Skip css`` to avoid generating a className
+  uncompressed: `
+    gap: ${euiTheme.size.xs}
+  `,
+  compressed: css`
+    gap: 0;
+  `,
+});

packages/eui/src/components/form/checkbox/checkbox_group.styles.ts

@@ -9,6 +9,7 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps, ExclusiveUnion } from '../../common';
 
 import {
@@ -17,6 +18,7 @@ import {
   EuiFormFieldset,
 } from '../form_fieldset';
 import { EuiCheckbox, EuiCheckboxProps } from './checkbox';
+import { euiCheckboxGroupStyles } from './checkbox_group.styles';
 
 export interface EuiCheckboxGroupOption
   extends Omit<EuiCheckboxProps, 'checked' | 'onChange'> {
@@ -43,10 +45,12 @@ export type EuiCheckboxGroupProps = CommonProps & {
   idToSelectedMap: EuiCheckboxGroupIdToSelectedMap;
   onChange: (optionId: string) => void;
   /**
-   * Tightens up the spacing between checkbox rows and sends down the
-   * compressed prop to the checkbox itself
+   * Tightens up the spacing between checkbox rows
    */
   compressed?: boolean;
+  /**
+   * Passed down to all child `EuiCheckbox`es
+   */
   disabled?: boolean;
 } & ExclusiveUnion<AsDivProps, WithLegendProps>;
 
@@ -60,6 +64,14 @@ export const EuiCheckboxGroup: FunctionComponent<EuiCheckboxGroupProps> = ({
   legend,
   ...rest
 }) => {
+  const classes = classNames('euiCheckboxGroup', className);
+
+  const styles = useEuiMemoizedStyles(euiCheckboxGroupStyles);
+  const cssStyles = [
+    styles.euiCheckboxGroup,
+    compressed ? styles.compressed : styles.uncompressed,
+  ];
+
   const checkboxes = options.map((option, index) => {
     const {
       disabled: isOptionDisabled,
@@ -73,7 +85,6 @@ export const EuiCheckboxGroup: FunctionComponent<EuiCheckboxGroupProps> = ({
         checked={idToSelectedMap[option.id]}
         disabled={disabled || isOptionDisabled}
         onChange={onChange.bind(null, option.id)}
-        compressed={compressed}
         {...optionRest}
       />
     );
@@ -85,7 +96,8 @@ export const EuiCheckboxGroup: FunctionComponent<EuiCheckboxGroupProps> = ({
 
     return (
       <EuiFormFieldset
-        className={className}
+        css={cssStyles}
+        className={classes}
         legend={legend}
         {...(rest as EuiFormFieldsetProps)}
       >
@@ -95,7 +107,11 @@ export const EuiCheckboxGroup: FunctionComponent<EuiCheckboxGroupProps> = ({
   }
 
   return (
-    <div className={className} {...(rest as HTMLAttributes<HTMLDivElement>)}>
+    <div
+      css={cssStyles}
+      className={classes}
+      {...(rest as HTMLAttributes<HTMLDivElement>)}
+    >
       {checkboxes}
     </div>
   );

packages/eui/src/components/form/checkbox/checkbox_group.tsx

@@ -3,13 +3,15 @@
 exports[`EuiRadioGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiTestCss"
+  class="euiRadioGroup testClass1 testClass2 emotion-euiRadioGroup-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiRadioGroup props idSelected is rendered 1`] = `
-<div>
+<div
+  class="euiRadioGroup emotion-euiRadioGroup"
+>
   <div
     class="euiRadio euiRadioGroup__item"
   >
@@ -53,7 +55,9 @@ exports[`EuiRadioGroup props idSelected is rendered 1`] = `
 `;
 
 exports[`EuiRadioGroup props legend is rendered 1`] = `
-<fieldset>
+<fieldset
+  class="euiRadioGroup emotion-euiRadioGroup"
+>
   <legend
     class="euiFormLegend"
   >
@@ -101,7 +105,9 @@ exports[`EuiRadioGroup props legend is rendered 1`] = `
 `;
 
 exports[`EuiRadioGroup props name is propagated to radios 1`] = `
-<div>
+<div
+  class="euiRadioGroup emotion-euiRadioGroup"
+>
   <div
     class="euiRadio euiRadioGroup__item"
   >
@@ -146,7 +152,9 @@ exports[`EuiRadioGroup props name is propagated to radios 1`] = `
 `;
 
 exports[`EuiRadioGroup props options are rendered 1`] = `
-<div>
+<div
+  class="euiRadioGroup emotion-euiRadioGroup"
+>
   <div
     class="euiRadio euiRadioGroup__item"
   >
@@ -190,7 +198,9 @@ exports[`EuiRadioGroup props options are rendered 1`] = `
 `;
 
 exports[`EuiRadioGroup props value is propagated to radios 1`] = `
-<div>
+<div
+  class="euiRadioGroup emotion-euiRadioGroup"
+>
   <div
     class="euiRadio euiRadioGroup__item"
   >

packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap

@@ -1,2 +1 @@
 @import 'radio';
-@import 'radio_group';

packages/eui/src/components/form/radio/_index.scss

@@ -19,7 +19,6 @@ const meta: Meta<EuiRadioProps> = {
   },
   args: {
     checked: false,
-    compressed: false,
     disabled: false,
     // set up for easier testing/QA
     id: '',

packages/eui/src/components/form/radio/_radio_group.scss

@@ -18,10 +18,6 @@ import { CommonProps, ExclusiveUnion } from '../../common';
 
 export interface RadioProps {
   autoFocus?: boolean;
-  /**
-   * When `true` creates a shorter height radio row
-   */
-  compressed?: boolean;
   name?: string;
   value?: string;
   checked?: boolean;
@@ -55,7 +51,6 @@ export const EuiRadio: FunctionComponent<EuiRadioProps> = ({
   value,
   onChange,
   disabled,
-  compressed,
   autoFocus,
   labelProps,
   ...rest
@@ -64,7 +59,6 @@ export const EuiRadio: FunctionComponent<EuiRadioProps> = ({
     'euiRadio',
     {
       'euiRadio--noLabel': !label,
-      'euiRadio--compressed': compressed,
     },
     className
   );

packages/eui/src/components/form/radio/radio.stories.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+
+export const euiRadioGroupStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiRadioGroup: css`
+    display: flex;
+    flex-direction: column;
+  `,
+  // Skip css`` to avoid generating a className
+  uncompressed: `
+    gap: ${euiTheme.size.xs}
+  `,
+  compressed: css`
+    gap: 0;
+  `,
+});