From 8549f6714c6c6291706ebb5ebf5fafffd3ac5c59 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 25 Aug 2023 12:39:50 -0700 Subject: [PATCH] Deprecate EuiControlBar --- .../views/control_bar/control_bar_example.js | 313 ++---------------- src/components/control_bar/control_bar.tsx | 10 + 2 files changed, 38 insertions(+), 285 deletions(-) diff --git a/src-docs/src/views/control_bar/control_bar_example.js b/src-docs/src/views/control_bar/control_bar_example.js index 6bb05fe360c..4233b6634b4 100644 --- a/src-docs/src/views/control_bar/control_bar_example.js +++ b/src-docs/src/views/control_bar/control_bar_example.js @@ -1,298 +1,41 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { EuiCode, EuiControlBar } from '../../../../src/components'; - -import { - BreadcrumbControlProps, - ButtonControlProps, - DividerControlProps, - IconControlTypeProps, - IconButtonControlTypeProps, - SpacerControlProps, - TabControlProps, - TextControlProps, -} from './props'; - -import { GuideSectionTypes } from '../../components'; - -import ControlBar from './control_bar'; -import Controls from './controls'; -import ControlBarWithTabs from './tabs'; -import ControlBarMobile from './mobile'; - -const controlsSource = require('!!raw-loader!./controls'); - -const controlBarSource = require('!!raw-loader!./control_bar'); -const controlBarSnippet = ``; - -const tabsBarSource = require('!!raw-loader!./tabs'); -const tabsBarSnippet = ''; - -const mobileBarSource = require('!!raw-loader!./mobile'); -const mobileBarSnippet = ``; +import { EuiCallOut, EuiLink } from '../../../../src/components'; export const ControlBarExample = { title: 'Control bar', + isDeprecated: true, sections: [ { - source: [ - { - type: GuideSectionTypes.JS, - code: controlBarSource, - }, - ], text: ( - <> -

- EuiControlBar is a bottom positioned container and - content well intended to provide additional view controls and - actions. -

-

- The control bar provides an easy way to extend the navigation or - views of the current page by allowing you to place tabs, buttons, - text, or children within it. It can operate - similarly to a flyout, but (at full height) it covers most of the - current page; making it a fitting solution for verbose text or - additional controls. It can also be used without allowing it to - expand, which makes it an easy way to display status information or - fixed-position buttons. -

- - ), - props: { EuiControlBar }, - snippet: controlBarSnippet, - demo: , - }, - { - title: 'Using tabs', - source: [ - { - type: GuideSectionTypes.JS, - code: tabsBarSource, - }, - ], - text: ( - <> -

- This example demonstrates the use of tabs and reduces the size of - the content with size="m" - . -

-

- Optional children of the EuiControlBar are rendered - in the control bar drawer. You can toggle the visibility of the - content with the showContent prop. When you want - to display tab content, this is where you'll do it. -

- - ), - props: { EuiControlBar }, - snippet: tabsBarSnippet, - demo: , - }, - { - title: 'Mobile usage', - source: [ - { - type: GuideSectionTypes.JS, - code: mobileBarSource, - }, - ], - text: ( - <> -

- The EuiControlBar is responsive in the sense that - it utilizes flexbox and overflow scrolls. However, it makes no - attempts to reorganize the controls you provide. By default the{' '} - EuiControlBar is hidden on mobile devices, but this - can be overridden with the showOnMobile prop. - You'll need to take the layout of your{' '} - controlTypes into consideration when choosing to - display on smaller screens. -

-

- A simple way of doing this is to pass in EUI responsive utility - classes into the className prop on any of the{' '} - controlTypes. View the snippet tab to see an - example. -

- - ), - props: { EuiControlBar }, - snippet: mobileBarSnippet, - demo: , - }, - { - title: 'Control types and position', - source: [ - { - type: GuideSectionTypes.JS, - code: controlsSource, - }, - ], - text: ( - <> -

- The EuiControlBar accepts an array of{' '} - controlTypes that will be arranged in the order - in which they are provided. All controls must be - provide a unique id to be used as the key. -

-
    -
  • - button: Extends{' '} - - EuiButton - {' '} - but always forces to size small. Requires label{' '} - as the children. -
    • -
  • - icon: Extends{' '} - - EuiIcon - {' '} - unless provided an onClick or{' '} - href, then it will render an{' '} - - EuiButtonIcon - - . -
    • -
  • - text: Simple ghost colored text. -
    • -
  • - tab: Renders a button visually as a tab. You - must provide your own callback to swap the control bar contents - with onClick. -
    • -
  • - breadcrumbs: Extends{' '} - - EuiBreadcrumbs - - . -
    • -
  • - spacer: Provides a horizontal space between - controls. Id is optional. -
    • -
  • - divider: Provides a 1px{' '} - border between controls. Useful when additional visual separation - is needed. Id is optional. -
    • -
-

- Typically, a control bar is fixed positioned against the browser - window and therefore rendered within a portal. To change the parent - element of the control bar, change the position{' '} - prop to {'"absolute"'} or{' '} - {'"relative"'}. -

-

- To offest the left and right position of the control bar, for - example, to adjust for side navigation, use the{' '} - leftOffset or rightOffset{' '} - props. -

- + +

+ EuiControlBar is being deprecated due to low usage + and high overlap with other existing EUI components. +

+

+ {' '} + We recommend using{' '} + + EuiBottomBar + {' '} + instead, or{' '} + + copying the component to your application + {' '} + for usage if necessary. The component will be permanently removed in + December 2023. +

+ ), - props: { - EuiControlBar, - BreadcrumbControlProps, - ButtonControlProps, - DividerControlProps, - IconControlTypeProps, - IconButtonControlTypeProps, - SpacerControlProps, - TabControlProps, - TextControlProps, - }, - demo: , }, ], }; diff --git a/src/components/control_bar/control_bar.tsx b/src/components/control_bar/control_bar.tsx index 9a0c0608890..ab5072969dc 100644 --- a/src/components/control_bar/control_bar.tsx +++ b/src/components/control_bar/control_bar.tsx @@ -153,6 +153,9 @@ export type Control = ExclusiveUnion< SpacerControl >; +/** + * @deprecated + */ export type EuiControlBarProps = HTMLAttributes & CommonProps & { /** @@ -214,6 +217,13 @@ interface EuiControlBarState { selectedTab: string; } +/** + * @deprecated - EuiControlBar is scheduled for deprecation due to low internal usage and high + * overlap with other existing EUI components. We recommend using EuiBottomBar instead, + * or copying this component into your own application for usage if necessary. + * + * The component will be permanently removed in December 2023. + */ export class EuiControlBar extends Component< EuiControlBarProps, EuiControlBarState