Deprecations, October 2021 Edition

CHANGELOG.md

@@ -9,6 +9,17 @@
 - Fixed default text alignment in `EuiTableRowCell` on Safari ([#5283](https://github.com/elastic/eui/pull/5283))
 - Fixed `mobileOptions.truncateText` from getting overridden by `truncateText` in `EuiTableRowCell` ([#5283](https://github.com/elastic/eui/pull/5283))
 
+**Breaking changes**
+
+- Removed `EuiCodeEditor` ([#5323](https://github.com/elastic/eui/pull/5323))
+- Removed `betaBadgeLabel`, `betaBadgeTooltipContent`, `betaBadgeTitle` props from `EuiCard` ([#5323](https://github.com/elastic/eui/pull/5323))
+- Removed `EuiLoadingKibana` ([#5323](https://github.com/elastic/eui/pull/5323))
+- Removed `secondary` color prop options ([#5323](https://github.com/elastic/eui/pull/5323))
+- Removed `subdued` color prop option from `EuiButtonIcon` ([#5323](https://github.com/elastic/eui/pull/5323))
+- Removed `panelPaddingSize` from `EuiPageContent` ([#5323](https://github.com/elastic/eui/pull/5323))
+- Removed `makeId` ([#5323](https://github.com/elastic/eui/pull/5323))
+- Removed mobile-only props from `EuiTableRowCell` ([#5323](https://github.com/elastic/eui/pull/5323))
+
 **Theme: Amsterdam**
 
 - Fixed `mobileOptions.enlarge` styling in `EuiTableRowCell` ([#5283](https://github.com/elastic/eui/pull/5283))

package.json

@@ -71,7 +71,6 @@
     "mdast-util-to-hast": "^10.0.0",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.0",
-    "react-ace": "^7.0.5",
     "react-beautiful-dnd": "^13.0.0",
     "react-dropzone": "^11.2.0",
     "react-focus-on": "^3.5.0",

src-docs/src/routes.js

@@ -54,8 +54,6 @@ import { CardExample } from './views/card/card_example';
 
 import { CallOutExample } from './views/call_out/call_out_example';
 
-import { CodeEditorExample } from './views/code_editor/code_editor_example';
-
 import { CodeExample } from './views/code/code_example';
 
 import { CollapsibleNavExample } from './views/collapsible_nav/collapsible_nav_example';
@@ -464,7 +462,6 @@ const navigation = [
       MarkdownFormatExample,
       MarkdownEditorExample,
       MarkdownPluginExample,
-      CodeEditorExample,
       CodeExample,
     ].map((example) => createExample(example)),
   },

src-docs/src/views/button/button_toggle_aria.js

@@ -26,7 +26,7 @@ export default () => {
         title="Autosave"
         iconType="save"
         aria-pressed={toggle3On}
-        color={toggle3On ? 'primary' : 'subdued'}
+        color={toggle3On ? 'primary' : 'text'}
         onClick={() => {
           setToggle3On((isOn) => !isOn);
         }}

src-docs/src/views/button/guidelines.js

@@ -356,7 +356,7 @@ export default () => (
             Continue
           </EuiButton>
           &nbsp;&nbsp;
-          <EuiButton iconType="check" color="secondary" fill>
+          <EuiButton iconType="check" color="success" fill>
             Save and complete
           </EuiButton>
         </div>
@@ -434,7 +434,7 @@ export default () => (
 
       <EuiTableBody>
         <EuiTableRow>
-          <EuiTableRowCell isMobileFullWidth>
+          <EuiTableRowCell mobileOptions={{ width: '100%' }}>
             <EuiButton>Add thing</EuiButton>
           </EuiTableRowCell>
 
@@ -447,7 +447,7 @@ export default () => (
         </EuiTableRow>
 
         <EuiTableRow>
-          <EuiTableRowCell isMobileFullWidth>
+          <EuiTableRowCell mobileOptions={{ width: '100%' }}>
             <EuiButtonEmpty size="s">Cancel</EuiButtonEmpty>
           </EuiTableRowCell>
           <EuiTableRowCell>
@@ -458,7 +458,7 @@ export default () => (
         </EuiTableRow>
 
         <EuiTableRow>
-          <EuiTableRowCell isMobileFullWidth>
+          <EuiTableRowCell mobileOptions={{ width: '100%' }}>
             <EuiButton fill>Create thing</EuiButton>
           </EuiTableRowCell>
 
@@ -471,7 +471,7 @@ export default () => (
         </EuiTableRow>
 
         <EuiTableRow>
-          <EuiTableRowCell isMobileFullWidth>
+          <EuiTableRowCell mobileOptions={{ width: '100%' }}>
             <EuiButton color="danger" fill>
               Delete
             </EuiButton>
@@ -495,7 +495,7 @@ export default () => (
         </EuiTableRow>
 
         <EuiTableRow>
-          <EuiTableRowCell isMobileFullWidth>
+          <EuiTableRowCell mobileOptions={{ width: '100%' }}>
             <EuiButton color="danger">Remove</EuiButton>&nbsp;&nbsp;
             <EuiButtonIcon
               size="s"
@@ -512,9 +512,9 @@ export default () => (
         </EuiTableRow>
 
         <EuiTableRow>
-          <EuiTableRowCell isMobileFullWidth>
+          <EuiTableRowCell mobileOptions={{ width: '100%' }}>
             <EuiButton fill>Save</EuiButton>&nbsp;&nbsp;
-            <EuiButton fill color="secondary" iconType="check">
+            <EuiButton fill color="success" iconType="check">
               Save and complete
             </EuiButton>
           </EuiTableRowCell>

src-docs/src/views/card/card_beta.js → src-docs/src/views/card/card_beta.tsx

@@ -7,31 +7,29 @@ import {
   EuiFlexItem,
 } from '../../../../src/components';
 
-const icons = ['dashboard', 'monitoring'];
-const badges = [null, 'Beta'];
-
-const cardNodes = icons.map(function (item, index) {
-  return (
-    <EuiFlexItem key={index}>
+export default () => (
+  <EuiFlexGroup gutterSize="l">
+    <EuiFlexItem>
       <EuiCard
-        icon={<EuiIcon size="xxl" type={`${item}App`} />}
-        title={`Kibana ${item}`}
+        icon={<EuiIcon size="xxl" type="dashboardApp" />}
+        title="Dashboards"
         description="Example of a card's description. Stick to one or two sentences."
-        betaBadgeLabel={badges[index]}
-        betaBadgeTooltipContent={
-          badges[index]
-            ? 'This module is not GA. Please help us by reporting any bugs.'
-            : undefined
-        }
         onClick={() => {}}
       />
     </EuiFlexItem>
-  );
-});
-
-export default () => (
-  <EuiFlexGroup gutterSize="l">
-    {cardNodes}
+    <EuiFlexItem>
+      <EuiCard
+        icon={<EuiIcon size="xxl" type="monitoringApp" />}
+        title="Monitoring"
+        description="Example of a card's description. Stick to one or two sentences."
+        betaBadgeProps={{
+          label: 'Beta',
+          tooltipContent:
+            'This module is not GA. Please help us by reporting any bugs.',
+        }}
+        onClick={() => {}}
+      />
+    </EuiFlexItem>
     <EuiFlexItem>
       <EuiCard
         icon={<EuiIcon size="xxl" type="lensApp" />}
@@ -41,9 +39,9 @@ export default () => (
         betaBadgeProps={{
           href: 'http://www.elastic.co/subscriptions',
           target: '_blank',
+          label: 'Basic',
+          tooltipContent: 'This feature requires a Basic License',
         }}
-        betaBadgeLabel="Basic"
-        betaBadgeTooltipContent="This feature requires a Basic License"
         onClick={() => {}}
       />
     </EuiFlexItem>

src-docs/src/views/card/card_display.js → src-docs/src/views/card/card_display.tsx

@@ -38,8 +38,11 @@ export default () => (
           title="Transparent"
           display="transparent"
           description="This one doesn't have a background color anymore."
-          betaBadgeLabel="Beta"
-          betaBadgeTooltipContent="This module is not GA. Please help us by reporting any bugs."
+          betaBadgeProps={{
+            label: 'Beta',
+            tooltipContent:
+              'This module is not GA. Please help us by reporting any bugs.',
+          }}
           onClick={() => {}}
         />
       </EuiFlexItem>

src-docs/src/views/card/card_example.js

@@ -242,11 +242,11 @@ export const CardExample = {
       text: (
         <p>
           If the card links to or references a module that is not GA (beta, lab,
-          etc), you can add a <EuiCode>betaBadgeLabel</EuiCode> and{' '}
-          <EuiCode>betaBadgeTooltipContent</EuiCode> to the card and it will
-          properly create and position an <strong>EuiBetaBadge</strong>. If you
-          want to change the title of the tooltip, supply a{' '}
-          <EuiCode>betaBadgeTitle</EuiCode> prop.
+          etc), you can add a <EuiCode>betaBadgeProps.label</EuiCode> and{' '}
+          <EuiCode>betaBadgeProps.tooltipContent</EuiCode> to the card and it
+          will properly create and position an <strong>EuiBetaBadge</strong>. If
+          you want to change the title of the tooltip, supply a{' '}
+          <EuiCode>betaBadgeProps.title</EuiCode> prop.
         </p>
       ),
       props: { EuiCard },
@@ -259,8 +259,10 @@ export const CardExample = {
   title="title"
   description="description"
   onClick={handleClick}
-  betaBadgeLabel="betaBadgeLabel"
-  betaBadgeTooltipContent={betaBadgeTooltipContent}
+  betaBadgeProps={{
+    label: 'betaBadgeLabel',
+    toolTipContent: 'betaBadgeTooltipContent',
+  }}
 />`,
     },
     {

src-docs/src/views/card/playground.js

@@ -52,11 +52,6 @@ export const cardConfig = () => {
     type: PropTypes.String,
   };
 
-  propsToUse.betaBadgeTooltipContent = {
-    ...propsToUse.betaBadgeTooltipContent,
-    type: PropTypes.String,
-  };
-
   propsToUse.onClick = simulateFunction(propsToUse.onClick);
   propsToUse.display = createOptionalEnum(propsToUse.display);