Merge branch 'semantic-token' of github.com:mdefazio/eui into semanti…

…c-token

packages/eui/changelogs/CHANGELOG_2024.md

@@ -1,3 +1,56 @@
+## [`v95.8.0`](https://github.com/elastic/eui/releases/v95.8.0)
+
+- Updated `EuiHeaderLinks`'s mobile menu to set a slight popover padding by default ([#7961](https://github.com/elastic/eui/pull/7961))
+  - This can be overridden via `popoverProps.panelPaddingSize` if needed.
+- Updated `EuiHeaderLink` to default to a size of `s` (down from `m`) ([#7961](https://github.com/elastic/eui/pull/7961))
+
+**Bug fixes**
+
+- Fixed a visual bug with `<EuiDualRange showInput="inputWithPopover" />` form controls ([#7957](https://github.com/elastic/eui/pull/7957))
+
+**Deprecations**
+
+- Deprecated `EuiFormRow`'s `columnCompressedSwitch` display prop. Use `columnCompressed` instead, which will automatically account for child `EuiSwitch`es ([#7968](https://github.com/elastic/eui/pull/7968))
+- Deprecated `EuiFormRow`'s `rowCompressed` display prop. Use `row` instead for vertical forms, or `centerCompressed` for inline forms ([#7968](https://github.com/elastic/eui/pull/7968))
+- (Styling) Updated `EuiFormRow`'s `hasEmptySpaceLabel` prop to no longer attempt to automatically align its content to a vertical center. Use the `display="center"` prop for that instead ([#7968](https://github.com/elastic/eui/pull/7968))
+
+**CSS-in-JS conversions**
+
+- Converted `EuiFormControlLayout` to Emotion ([#7954](https://github.com/elastic/eui/pull/7954))
+  - Removed `.euiFormControlLayout--*icons` classNames and `--eui-form-control-layout-icons-padding` CSS var. Use `--euiFormControlRightIconsCount` or `--euiFormControlLeftIconsCount` instead
+- Converted `EuiFormLayoutDelimited` to Emotion ([#7957](https://github.com/elastic/eui/pull/7957))
+- Fixed `cloneElementWithCss` throwing an error when used multiple times without a `key` prop ([#7957](https://github.com/elastic/eui/pull/7957))
+- Updated `cloneElementWithCss` utility to support a third argument that allows prepending vs. appending the cloned Emotion css className ([#7957](https://github.com/elastic/eui/pull/7957))
+- Removed `@euiFormControlLayoutClearIcon` Sass mixin ([#7959](https://github.com/elastic/eui/pull/7959))
+- Converted `EuiDescribedFormGroup` to Emotion ([#7964](https://github.com/elastic/eui/pull/7964))
+- Converted `EuiForm`, `EuiFormHelpText`, and `EuiFormErrorText` to Emotion ([#7966](https://github.com/elastic/eui/pull/7966))
+- Converted `EuiFormLabel` and `EuiFormLegend` to Emotion; Removed `@euiFormLabel` mixin ([#7967](https://github.com/elastic/eui/pull/7967))
+- Converted `EuiFormRow` to Emotion ([#7968](https://github.com/elastic/eui/pull/7968))
+- Converted `EuiCheckbox` to Emotion ([#7969](https://github.com/elastic/eui/pull/7969))
+- Converted `EuiRadio` to Emotion ([#7969](https://github.com/elastic/eui/pull/7969))
+- Converted `EuiSwitch` to Emotion ([#7969](https://github.com/elastic/eui/pull/7969))
+- Removed the following Sass variables: ([#7969](https://github.com/elastic/eui/pull/7969))
+  - `$euiFormCustomControlDisabledIconColor`
+  - `$euiFormCustomControlBorderColor`
+  - `$euiRadioSize`
+  - `$euiCheckBoxSize`
+  - `$euiCheckboxBorderRadius`
+  - `$euiSwitchHeight` (and compressed/mini variants)
+  - `$euiSwitchWidth` (and compressed/mini variants)
+  - `$euiSwitchThumbSize` (and compressed/mini variants)
+  - `$euiSwitchIconHeight`
+  - `$euiSwitchOffColor`
+- Removed the following Sass mixins: ([#7969](https://github.com/elastic/eui/pull/7969))
+  - `euiIconBackground`
+  - `euiCustomControl`
+  - `euiCustomControlSelected`
+  - `euiCustomControlDisabled`
+  - `euiCustomControlFocused`
+
+**Accessibility**
+
+- Updated the `aria-label` attribute for the `EuiFieldSearch` clear button ([#7970](https://github.com/elastic/eui/pull/7970))
+
 ## [`v95.7.0`](https://github.com/elastic/eui/releases/v95.7.0)
 
 **CSS-in-JS conversions**

packages/eui/changelogs/upcoming/7971.md

@@ -1,2 +1,2 @@
-- Added semantic text token [#7971](https://github.com/elastic/eui/pull/7971)
+- Updated `EuiIcon` with a new `tokenSemanticText` glyph
 

packages/eui/generator-eui/changelog/templates/changelog.md

@@ -1,5 +1,5 @@
 <%_ if (features) { -%>
-- Added semantic text token [#7971](https://github.com/elastic/eui/pull/7971)
+- Added/Updated ...
 
 <%_ } -%>
 <%_ if (bugFixes) { -%>

packages/eui/i18ntokens.json

@@ -1391,14 +1391,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 281,
+        "line": 280,
         "column": 18,
-        "index": 10032
+        "index": 9968
       },
       "end": {
-        "line": 284,
+        "line": 283,
         "column": 20,
-        "index": 10156
+        "index": 10092
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -1409,14 +1409,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 294,
+        "line": 293,
         "column": 18,
-        "index": 10516
+        "index": 10452
       },
       "end": {
-        "line": 297,
+        "line": 296,
         "column": 20,
-        "index": 10638
+        "index": 10574
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -4793,14 +4793,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 104,
+        "line": 105,
         "column": 49,
-        "index": 2946
+        "index": 2960
       },
       "end": {
-        "line": 110,
+        "line": 111,
         "column": 3,
-        "index": 3167
+        "index": 3181
       }
     },
     "filepath": "src/components/form/field_password/field_password.tsx"
@@ -4811,18 +4811,36 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 104,
+        "line": 105,
         "column": 49,
-        "index": 2946
+        "index": 2960
       },
       "end": {
-        "line": 110,
+        "line": 111,
         "column": 3,
-        "index": 3167
+        "index": 3181
       }
     },
     "filepath": "src/components/form/field_password/field_password.tsx"
   },
+  {
+    "token": "euiFieldSearch.clearSearchButtonLabel",
+    "defString": "Clear search input",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 260,
+        "column": 6,
+        "index": 7437
+      },
+      "end": {
+        "line": 263,
+        "column": 7,
+        "index": 7544
+      }
+    },
+    "filepath": "src/components/form/field_search/field_search.tsx"
+  },
   {
     "token": "euiFilePicker.promptText",
     "defString": "Select or drag and drop a file",
@@ -4901,14 +4919,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 38,
-        "column": 4,
-        "index": 1180
+        "line": 34,
+        "column": 20,
+        "index": 1321
       },
       "end": {
-        "line": 41,
-        "column": 5,
-        "index": 1274
+        "line": 37,
+        "column": 3,
+        "index": 1399
       }
     },
     "filepath": "src/components/form/form_control_layout/form_control_layout_clear_button.tsx"
@@ -4919,14 +4937,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 82,
+        "line": 121,
         "column": 27,
-        "index": 2237
+        "index": 3395
       },
       "end": {
-        "line": 85,
+        "line": 124,
         "column": 3,
-        "index": 2313
+        "index": 3471
       }
     },
     "filepath": "src/components/form/form_control_layout/form_control_layout_delimited.tsx"
@@ -4937,14 +4955,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 94,
+        "line": 97,
         "column": 8,
-        "index": 2536
+        "index": 2581
       },
       "end": {
-        "line": 97,
+        "line": 100,
         "column": 9,
-        "index": 2657
+        "index": 2702
       }
     },
     "filepath": "src/components/form/form.tsx"

packages/eui/i18ntokens_changelog.json

@@ -1,4 +1,14 @@
 [
+  {
+    "version": "95.8.0",
+    "changes": [
+      {
+        "token": "euiFieldSearch.clearSearchButtonLabel",
+        "changeType": "added",
+        "value": "Clear search input"
+      }
+    ]
+  },
   {
     "version": "95.5.0",
     "changes": [

packages/eui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "95.7.0",
+  "version": "95.8.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

packages/eui/src-docs/src/components/guide_page/versions.json

@@ -1,5 +1,6 @@
 {
   "euiVersions": [
+    "95.8.0",
     "95.7.0",
     "95.6.0",
     "95.5.0",

packages/eui/src-docs/src/views/color_picker/color_palette_display.js

@@ -188,7 +188,7 @@ export default () => {
                   Display <EuiCode>fixed</EuiCode>
                 </span>
               }
-              display="columnCompressedSwitch"
+              display="columnCompressed"
             >
               <EuiSwitch
                 checked={selectionType}

packages/eui/src-docs/src/views/datagrid/toolbar/visibility.js

@@ -194,7 +194,7 @@ const DataGrid = () => {
                 : undefined
             }
           >
-            <EuiFormRow display="rowCompressed" label="toolbarVisibility">
+            <EuiFormRow label="toolbarVisibility">
               <EuiButtonGroup
                 isFullWidth
                 buttonSize="compressed"

packages/eui/src-docs/src/views/form_compressed/form_compressed.js

@@ -74,15 +74,11 @@ export default () => {
   };
   return (
     <EuiPanel style={{ maxWidth: 300 }}>
-      <EuiFormRow
-        label="Text field"
-        helpText="I am some friendly help text."
-        display="rowCompressed"
-      >
+      <EuiFormRow label="Text field" helpText="I am some friendly help text.">
         <EuiFieldText name="first" isLoading compressed />
       </EuiFormRow>
 
-      <EuiFormRow label="Select" display="rowCompressed">
+      <EuiFormRow label="Select">
         <EuiSelect
           options={[
             { value: 'option_one', text: 'Option one' },
@@ -93,11 +89,11 @@ export default () => {
         />
       </EuiFormRow>
 
-      <EuiFormRow label="File picker" display="rowCompressed">
+      <EuiFormRow label="File picker">
         <EuiFilePicker compressed display="default" />
       </EuiFormRow>
 
-      <EuiFormRow label="Combobox" display="rowCompressed">
+      <EuiFormRow label="Combobox">
         <EuiComboBox
           options={[
             { label: 'Option one' },
@@ -112,7 +108,7 @@ export default () => {
         />
       </EuiFormRow>
 
-      <EuiFormRow label="Range" display="rowCompressed">
+      <EuiFormRow label="Range">
         <EuiRange
           min={0}
           max={100}
@@ -125,7 +121,7 @@ export default () => {
         />
       </EuiFormRow>
 
-      <EuiFormRow label="Switch" display="rowCompressed" hasChildLabel={false}>
+      <EuiFormRow label="Switch" hasChildLabel={false}>
         <EuiSwitch
           label="Setting name"
           name="switch"