From b136b4e6c6ee4a6f9d8944c68952d91edf70f55e Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 21 Dec 2023 11:58:02 -0800 Subject: [PATCH 1/3] Remove `EuiControlBar` code & demos --- src-docs/src/routes.js | 3 - src-docs/src/views/control_bar/control_bar.js | 152 ---- .../views/control_bar/control_bar_example.js | 41 - src-docs/src/views/control_bar/controls.js | 75 -- src-docs/src/views/control_bar/mobile.js | 61 -- src-docs/src/views/control_bar/props.tsx | 39 - src-docs/src/views/control_bar/tabs.js | 104 --- .../__snapshots__/control_bar.test.tsx.snap | 767 ------------------ src/components/control_bar/_control_bar.scss | 232 ------ src/components/control_bar/_index.scss | 2 - src/components/control_bar/_variables.scss | 12 - .../control_bar/control_bar.a11y.tsx | 189 ----- .../control_bar/control_bar.test.tsx | 148 ---- src/components/control_bar/control_bar.tsx | 491 ----------- src/components/control_bar/index.ts | 10 - src/components/index.scss | 1 - src/components/index.ts | 2 - 17 files changed, 2329 deletions(-) delete mode 100644 src-docs/src/views/control_bar/control_bar.js delete mode 100644 src-docs/src/views/control_bar/control_bar_example.js delete mode 100644 src-docs/src/views/control_bar/controls.js delete mode 100644 src-docs/src/views/control_bar/mobile.js delete mode 100644 src-docs/src/views/control_bar/props.tsx delete mode 100644 src-docs/src/views/control_bar/tabs.js delete mode 100644 src/components/control_bar/__snapshots__/control_bar.test.tsx.snap delete mode 100644 src/components/control_bar/_control_bar.scss delete mode 100644 src/components/control_bar/_index.scss delete mode 100644 src/components/control_bar/_variables.scss delete mode 100644 src/components/control_bar/control_bar.a11y.tsx delete mode 100644 src/components/control_bar/control_bar.test.tsx delete mode 100644 src/components/control_bar/control_bar.tsx delete mode 100644 src/components/control_bar/index.ts diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 7f8e6d7f38f..216c962257f 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -86,8 +86,6 @@ import { CommentListExample } from './views/comment/comment_example'; import { ContextMenuExample } from './views/context_menu/context_menu_example'; -import { ControlBarExample } from './views/control_bar/control_bar_example'; - import { CopyExample } from './views/copy/copy_example'; import { DataGridExample } from './views/datagrid/basics/datagrid_example'; @@ -549,7 +547,6 @@ const navigation = [ ButtonExample, CollapsibleNavExample, ContextMenuExample, - ControlBarExample, FacetExample, KeyPadMenuExample, LinkExample, diff --git a/src-docs/src/views/control_bar/control_bar.js b/src-docs/src/views/control_bar/control_bar.js deleted file mode 100644 index 71fc34d4550..00000000000 --- a/src-docs/src/views/control_bar/control_bar.js +++ /dev/null @@ -1,152 +0,0 @@ -import React, { useState } from 'react'; - -import { - EuiButton, - EuiControlBar, - EuiPanel, - EuiText, -} from '../../../../src/components'; - -export default () => { - const [contentIsVisible, setVisibility] = useState(false); - const [isDisplaying, setDisplay] = useState(false); - - const toggleContent = () => { - setVisibility(!contentIsVisible); - }; - - const toggleDisplay = () => { - setDisplay(!isDisplaying); - setVisibility(false); - }; - - const codeControls = [ - { - controlType: 'icon', - id: 'root_icon', - iconType: 'submodule', - 'aria-label': 'Project Root', - }, - { - controlType: 'breadcrumbs', - id: 'current_file_path', - breadcrumbs: [ - { - text: 'src', - }, - { - text: 'components', - }, - ], - }, - { - controlType: 'spacer', - }, - { - controlType: 'icon', - id: 'status_icon', - iconType: 'warning', - color: 'warning', - 'aria-label': 'Repo Status', - }, - { - controlType: 'divider', - }, - { - controlType: 'icon', - id: 'branch_icon', - iconType: 'branch', - 'aria-label': 'Branch Icon', - }, - { - controlType: 'text', - id: 'branch_name', - text: 'some_long_branch', - }, - { - controlType: 'divider', - }, - { - controlType: 'icon', - id: 'github_icon', - iconType: 'logoGithub', - onClick: () => {}, - title: 'Open in Github', - 'aria-label': 'Open in Github', - }, - { - controlType: 'divider', - }, - { - controlType: 'button', - id: 'open_history_view', - label: contentIsVisible ? 'Hide history' : 'Show history', - color: 'primary', - onClick: toggleContent, - }, - ]; - - let display; - - if (isDisplaying) { - display = ( - -
- - -

1984

-

By: George Orwell

-

- It was a bright cold day in April, and the clocks were striking - thirteen. Winston Smith, his chin nuzzled into his breast in an - effort to escape the vile wind, slipped quickly through the - glass doors of Victory Mansions, though not quickly enough to - prevent a swirl of gritty dust from entering along with him. -

-

- The hallway smelt of boiled cabbage and old rag mats. At one end - of it a coloured poster, too large for indoor display, had been - tacked to the wall. It depicted simply an enormous face, more - than a metre wide: the face of a man of about forty-five, with a - heavy black moustache and ruggedly handsome features. Winston - made for the stairs. It was no use trying the lift. Even at the - best of times it was seldom working, and at present the electric - current was cut off during daylight hours. It was part of the - economy drive in preparation for Hate Week. The flat was seven - flights up, and Winston, who was thirty-nine and had a varicose - ulcer above his right ankle, went slowly, resting several times - on the way. On each landing, opposite the lift-shaft, the poster - with the enormous face gazed from the wall. It was one of those - pictures which are so contrived that the eyes follow you about - when you move. BIG BROTHER IS WATCHING YOU, the caption beneath - it ran. -

-

- Inside the flat a fruity voice was reading out a list of figures - which had something to do with the production of pig-iron. The - voice came from an oblong metal plaque like a dulled mirror - which formed part of the surface of the right-hand wall. Winston - turned a switch and the voice sank somewhat, though the words - were still distinguishable. The instrument (the telescreen, it - was called) could be dimmed, but there was no way of shutting it - off completely. He moved over to the window: a smallish, frail - figure, the meagreness of his body merely emphasized by the blue - overalls which were the uniform of the party. His hair was very - fair, his face naturally sanguine, his skin roughened by coarse - soap and blunt razor blades and the cold of the winter that had - just ended. -

- - -
- - ); - } - - return ( -
- Toggle example - {display} -
- ); -}; diff --git a/src-docs/src/views/control_bar/control_bar_example.js b/src-docs/src/views/control_bar/control_bar_example.js deleted file mode 100644 index 4233b6634b4..00000000000 --- a/src-docs/src/views/control_bar/control_bar_example.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; - -import { EuiCallOut, EuiLink } from '../../../../src/components'; - -export const ControlBarExample = { - title: 'Control bar', - isDeprecated: true, - sections: [ - { - text: ( - -

- 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. -

- - ), - }, - ], -}; diff --git a/src-docs/src/views/control_bar/controls.js b/src-docs/src/views/control_bar/controls.js deleted file mode 100644 index 4ae6a09dc15..00000000000 --- a/src-docs/src/views/control_bar/controls.js +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; - -import { EuiControlBar, EuiLink } from '../../../../src/components'; - -export default () => { - const controls = [ - { - controlType: 'button', - id: 'controls_button', - label: 'Button', - onClick: () => {}, - }, - { - controlType: 'spacer', - }, - { - controlType: 'icon', - id: 'controls_icon', - iconType: 'flag', - }, - { - controlType: 'divider', - }, - { - controlType: 'icon', - id: 'controls_icon_button', - iconType: 'bell', - onClick: () => {}, - color: 'primary', - 'aria-label': 'Bell', - }, - { - controlType: 'divider', - }, - { - controlType: 'text', - id: 'controls_text', - text: 'Some text', - }, - { - controlType: 'divider', - }, - { - controlType: 'tab', - id: 'controls_tab', - label: 'Tab', - onClick: () => {}, - }, - { - controlType: 'divider', - }, - { - controlType: 'text', - id: 'some_text', - text: A sample link, - }, - { - controlType: 'spacer', - }, - { - controlType: 'breadcrumbs', - id: 'controls_breadcrumbs', - breadcrumbs: [ - { - text: 'Breadcrumbs', - }, - { - text: 'Item', - }, - ], - }, - ]; - - return ; -}; diff --git a/src-docs/src/views/control_bar/mobile.js b/src-docs/src/views/control_bar/mobile.js deleted file mode 100644 index 64c47ec8681..00000000000 --- a/src-docs/src/views/control_bar/mobile.js +++ /dev/null @@ -1,61 +0,0 @@ -import React, { useState } from 'react'; - -import { EuiButton, EuiControlBar } from '../../../../src/components'; - -export default () => { - const [isDisplaying, setDisplay] = useState(false); - - const toggleDisplay = () => { - setDisplay(!isDisplaying); - }; - - const controls = [ - { - controlType: 'icon', - id: 'icon', - iconType: 'folderClosed', - 'aria-label': 'folder', - className: 'eui-hideFor--m eui-hideFor--l eui-hideFor--xl', - }, - { - controlType: 'breadcrumbs', - id: 'current_file_path', - className: 'eui-hideFor--s eui-hideFor--xs', - breadcrumbs: [ - { - text: 'src', - }, - { - text: 'components', - }, - ], - }, - { - controlType: 'spacer', - }, - { - controlType: 'icon', - id: 'github_icon', - iconType: 'logoGithub', - 'aria-label': 'Github', - }, - { - controlType: 'text', - id: 'github_text', - text: 'Open in Github', - }, - ]; - - let display; - - if (isDisplaying) { - display = ; - } - - return ( -
- Toggle mobile example - {display} -
- ); -}; diff --git a/src-docs/src/views/control_bar/props.tsx b/src-docs/src/views/control_bar/props.tsx deleted file mode 100644 index aa4a1b879d1..00000000000 --- a/src-docs/src/views/control_bar/props.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { FunctionComponent } from 'react'; - -import { - BreadcrumbControl, - ButtonControl, - DividerControl, - IconControlType, - IconButtonControlType, - SpacerControl, - TabControl, - TextControl, -} from '../../../../src/components/control_bar/control_bar'; - -export const BreadcrumbControlProps: FunctionComponent< - BreadcrumbControl -> = () =>
; - -export const ButtonControlProps: FunctionComponent = () => ( -
-); - -export const DividerControlProps: FunctionComponent = () => ( -
-); - -export const IconControlTypeProps: FunctionComponent = () => ( -
-); -export const IconButtonControlTypeProps: FunctionComponent< - IconButtonControlType -> = () =>
; - -export const SpacerControlProps: FunctionComponent = () => ( -
-); - -export const TabControlProps: FunctionComponent = () =>
; - -export const TextControlProps: FunctionComponent = () =>
; diff --git a/src-docs/src/views/control_bar/tabs.js b/src-docs/src/views/control_bar/tabs.js deleted file mode 100644 index 3337ccebdb3..00000000000 --- a/src-docs/src/views/control_bar/tabs.js +++ /dev/null @@ -1,104 +0,0 @@ -import React, { useState } from 'react'; - -import { EuiButton, EuiControlBar, EuiText } from '../../../../src/components'; - -export default () => { - const [tabContent, setTabContent] = useState(''); - const [isDisplaying, setDisplay] = useState(false); - const [contentIsVisible, setVisibility] = useState(false); - - const closeTheHatch = () => { - setVisibility(false); - }; - - const tabOne = () => { - setVisibility(true); - - setTabContent( - "Oceanic Airlines Flight 815 was a scheduled flight from Sydney, Australia to Los Angeles, California, United States, on a Boeing 777-200ER. On September 22, 2004 at 4:16 P.M., the airliner, carrying 324 passengers, deviated from its original course and disappeared over the Pacific Ocean. This is the central moment in the series that kicked off its plotline, and marked the chronological beginning of the main characters' adventures on the Island." - ); - }; - - const tabTwo = () => { - setVisibility(true); - - setTabContent( - 'The Others, referred to by the DHARMA Initiative as the Hostiles or the Natives, and also by the tail section survivors of Oceanic Flight 815 as Them, are a group of people living on the Island who were followers of Jacob, intermediated by Richard Alpert. Jacob never showed himself to his people, and they took orders from a succession of leaders including Eloise Hawking, Charles Widmore, Benjamin Linus, and briefly, John Locke.' - ); - }; - - const toggleDisplay = () => { - setVisibility(false); - - setDisplay(!isDisplaying); - }; - - const controls = [ - { - controlType: 'tab', - id: 'flight_815', - label: 'Flight 815', - onClick: tabOne, - }, - { - controlType: 'tab', - id: 'the_others', - label: 'The Others', - onClick: tabTwo, - }, - { - controlType: 'button', - id: 'sound_the_alarm', - label: 'Sound the Alarm', - onClick: () => {}, - color: 'danger', - iconType: 'bell', - 'data-test-subj': 'look', - }, - { - controlType: 'button', - id: 'close_the_hatch', - label: 'Close the Hatch', - fill: true, - onClick: closeTheHatch, - className: 'customClassName', - color: 'primary', - }, - { - controlType: 'spacer', - }, - { - controlType: 'icon', - id: 'set_the_timer', - iconType: 'clock', - onClick: closeTheHatch, - 'aria-label': 'Set the Timer', - }, - ]; - - let display; - - if (isDisplaying) { - display = ( - - {tabContent !== '' && ( -
- {tabContent} -
- )} - - ); - } - - return ( -
- Toggle tabs example - {display} -
- ); -}; diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap deleted file mode 100644 index 2aac6cf47b0..00000000000 --- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap +++ /dev/null @@ -1,767 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiControlBar is rendered 1`] = ` -
-
-

- Page level controls -

-
- - -
- Close the Hatch -
-
- - Sample Icon - -
- -
-
-

- There is a new region landmark with page level controls at the end of the document. -

-
-`; - -exports[`EuiControlBar props leftOffset is rendered 1`] = ` -Array [ -
-

- Page level controls -

-
- - -
- Close the Hatch -
-
- - Sample Icon - -
- -
-
, -

- There is a new region landmark with page level controls at the end of the document. -

, -] -`; - -exports[`EuiControlBar props maxHeight is rendered 1`] = ` -Array [ -
-

- Page level controls -

-
- - -
- Close the Hatch -
-
- - Sample Icon - -
- -
-
, -

- There is a new region landmark with page level controls at the end of the document. -

, -] -`; - -exports[`EuiControlBar props mobile is rendered 1`] = ` -Array [ -
-

- Page level controls -

-
- - -
- Close the Hatch -
-
- - Sample Icon - -
- -
-
, -

- There is a new region landmark with page level controls at the end of the document. -

, -] -`; - -exports[`EuiControlBar props position is rendered 1`] = ` -
-

- Page level controls -

-
- - -
- Close the Hatch -
-
- - Sample Icon - -
- -
-
-`; - -exports[`EuiControlBar props rightOffset is rendered 1`] = ` -Array [ -
-

- Page level controls -

-
- - -
- Close the Hatch -
-
- - Sample Icon - -
- -
-
, -

- There is a new region landmark with page level controls at the end of the document. -

, -] -`; - -exports[`EuiControlBar props showContent is rendered 1`] = ` -Array [ -
-

- Page level controls -

-
- - -
- Close the Hatch -
-
- - Sample Icon - -
- -
-
- Content -
-
, -

- There is a new region landmark with page level controls at the end of the document. -

, -] -`; - -exports[`EuiControlBar props size is rendered 1`] = ` -Array [ -
-

- Page level controls -

-
- - -
- Close the Hatch -
-
- - Sample Icon - -
- -
-
, -

- There is a new region landmark with page level controls at the end of the document. -

, -] -`; diff --git a/src/components/control_bar/_control_bar.scss b/src/components/control_bar/_control_bar.scss deleted file mode 100644 index 9c3baa52535..00000000000 --- a/src/components/control_bar/_control_bar.scss +++ /dev/null @@ -1,232 +0,0 @@ -.euiControlBar { - background: $euiControlBarBackground; - color: $euiControlBarText; - display: flex; - flex-direction: column; - // This large box shadow helps prevent a flicker of dark - // background when the content is shown and hidden - box-shadow: inset 0 $euiControlBarInitialHeight 0 $euiControlBarBackground, inset 0 600rem 0 $euiPageBackgroundColor; - bottom: 0; - transform: translateY(0); - height: $euiControlBarInitialHeight; - max-height: $euiControlBarMaxHeight; - - &--fixed { - position: fixed; - z-index: $euiZMask; - } - - &--absolute { - position: absolute; - z-index: $euiZLevel1; - } - - &--relative { - position: relative; - } - - &-isOpen { - animation-duration: $euiAnimSpeedNormal; - animation-timing-function: $euiAnimSlightResistance; - animation-fill-mode: forwards; - } - - &-isOpen.euiControlBar--large { - animation-name: euiControlBarOpenPanelLarge; - height: $euiControlBarMaxHeight; - bottom: map-get($euiControlBarHeights, 'l') * -1; - } - - &-isOpen.euiControlBar--medium { - animation-name: euiControlBarOpenPanelMedium; - height: map-get($euiControlBarHeights, 'm'); - bottom: map-get($euiControlBarHeights, 'm') * -1; - } - - &-isOpen.euiControlBar--small { - animation-name: euiControlBarOpenPanelSmall; - height: map-get($euiControlBarHeights, 's'); - bottom: map-get($euiControlBarHeights, 's') * -1; - } -} - -.euiControlBar__controls { - height: $euiControlBarInitialHeight; - width: 100%; - display: flex; - align-items: center; - overflow-y: hidden; // Ensures the movement of buttons in :focus don't cause scrollbars - overflow-x: auto; - padding: 0 $euiSizeM; -} - -.euiControlBar__content { - @include euiScrollBar; - overflow-y: auto; - width: 100%; - height: calc(100% - #{$euiControlBarInitialHeight}); - background-color: $euiPageBackgroundColor; - animation-name: euiControlBarShowContent; - animation-duration: $euiAnimSpeedSlow; - animation-iteration-count: 1; - animation-timing-function: $euiAnimSlightResistance; - color: $euiColorDarkestShade; -} - -// CONTROL TYPES - -.euiControlBar__icon { - flex-shrink: 0; - margin-left: $euiSizeS; - margin-right: $euiSizeS; -} - -.euiControlBar__buttonIcon { - flex-shrink: 0; - min-width: $euiControlBarInitialHeight; - min-height: $euiControlBarInitialHeight; -} - -.euiControlBar__button { - flex-shrink: 0; - border-radius: $euiBorderRadius / 2; - margin-left: $euiSizeXS; - font-size: $euiFontSizeS; - - &:enabled:hover { - transform: none; - box-shadow: none; - } - - &:last-child { - margin-right: $euiSizeXS; - } -} - -.euiControlBar__breadcrumbs { - .euiBreadcrumb { - &:not(:last-of-type) .euiBreadcrumb__content { - color: makeHighContrastColor($euiTextSubduedColor, $euiControlBarBackground); - } - - &::after { - background: $euiControlBarBorderColor; - } - } -} - -.euiControlBar__spacer { - flex-grow: 1; - height: 100%; -} - -.euiControlBar__divider { - flex-shrink: 0; - height: 100%; - width: 1px; - background-color: $euiControlBarBorderColor; -} - -.euiControlBar__text { - @include euiTextTruncate; - @include euiFontSizeS; - padding: 0 $euiSizeS; - color: $euiControlBarText; - - &:last-child { - padding-right: 0; - } -} - -.euiControlBar__tab { - @include euiTextTruncate; - @include euiFontSizeS; - color: $euiControlBarText; - padding: 0 $euiSize; - text-align: center; - height: 100%; - - &:hover, - &:focus { - text-decoration: underline; - cursor: pointer; - } - - &.euiControlBar__tab--active { - background-color: $euiPageBackgroundColor; - box-shadow: inset 0 4px 0 makeHighContrastColor($euiColorPrimary, $euiColorLightestShade); - color: makeHighContrastColor($euiColorPrimary, $euiColorLightestShade); - } -} - -@each $colorName, $colorValue in $euiButtonTypes { - .euiControlBar__controls { - .euiLink.euiLink--#{$colorName} { - color: makeHighContrastColor($colorValue, $euiControlBarBackground); - - &:hover { - color: tintOrShade($colorValue, 30%, 30%); - } - } - - .euiLink.euiLink--text { - color: $euiColorGhost; - } - - .euiControlBar__button.euiButton[class*='#{$colorName}']:enabled:not(.euiButton--fill) { - color: makeHighContrastColor($colorValue, $euiControlBarBackground); - border-color: makeHighContrastColor($colorValue, $euiControlBarBackground); - } - - .euiButtonIcon[class*='#{$colorName}'] { - color: makeHighContrastColor($colorValue, $euiControlBarBackground); - } - } -} - -@include euiBreakpoint('xs', 's') { - .euiControlBar:not(.euiControlBar--showOnMobile) { - display: none; - } -} - -@keyframes euiControlBarOpenPanelLarge { - 0% { - // Accounts for the initial height offset from the top - transform: translateY(calc((#{$euiControlBarInitialHeight} * 3) * -1)); - } - - 100% { - transform: translateY(map-get($euiControlBarHeights, 'l') * -1); - } -} - -@keyframes euiControlBarOpenPanelMedium { - 0% { - transform: translateY(-$euiControlBarInitialHeight); - } - - 100% { - transform: translateY(map-get($euiControlBarHeights, 'm') * -1); - } -} - -@keyframes euiControlBarOpenPanelSmall { - 0% { - transform: translateY(-$euiControlBarInitialHeight); - } - - 100% { - transform: translateY(map-get($euiControlBarHeights, 's') * -1); - } -} - -@keyframes euiControlBarShowContent { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} diff --git a/src/components/control_bar/_index.scss b/src/components/control_bar/_index.scss deleted file mode 100644 index 1b879dc917b..00000000000 --- a/src/components/control_bar/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'variables'; -@import 'control_bar'; diff --git a/src/components/control_bar/_variables.scss b/src/components/control_bar/_variables.scss deleted file mode 100644 index 99c81c9b510..00000000000 --- a/src/components/control_bar/_variables.scss +++ /dev/null @@ -1,12 +0,0 @@ -$euiControlBarBackground: lightOrDarkTheme($euiColorDarkestShade, $euiColorInk); -$euiControlBarText: lighten(makeHighContrastColor($euiColorLightestShade, $euiControlBarBackground), 20%); -$euiControlBarBorderColor: transparentize($euiColorGhost, .8); -$euiControlBarInitialHeight: $euiSizeXXL; -$euiControlBarMaxHeight: calc(100vh - #{$euiSize * 5}); - -// Pixel heights ensure no blurriness caused by half pixel offsets -$euiControlBarHeights: ( - s: $euiSize * 15, - m: $euiSize * 30, - l: 100vh, -); diff --git a/src/components/control_bar/control_bar.a11y.tsx b/src/components/control_bar/control_bar.a11y.tsx deleted file mode 100644 index d6f4336d3d5..00000000000 --- a/src/components/control_bar/control_bar.a11y.tsx +++ /dev/null @@ -1,189 +0,0 @@ -/* - * 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 React, { useState } from 'react'; -import { EuiButton } from '../button'; -import { EuiControlBar, Control } from './control_bar'; -import { EuiPanel } from '../panel'; -import { EuiText } from '../text'; - -const ControlBar = () => { - const [contentIsVisible, setVisibility] = useState(false); - const [isDisplaying, setDisplay] = useState(false); - - const toggleContent = () => { - setVisibility(!contentIsVisible); - }; - - const toggleDisplay = () => { - setDisplay(!isDisplaying); - setVisibility(false); - }; - - const codeControls: Control[] = [ - { - controlType: 'icon', - id: 'root_icon', - iconType: 'submodule', - 'aria-label': 'Project Root', - }, - { - controlType: 'breadcrumbs', - id: 'current_file_path', - breadcrumbs: [ - { - text: 'src', - }, - { - text: 'components', - }, - ], - }, - { - controlType: 'spacer', - }, - { - controlType: 'icon', - id: 'status_icon', - iconType: 'warning', - color: 'warning', - 'aria-label': 'Repo Status', - }, - { - controlType: 'divider', - }, - { - controlType: 'icon', - id: 'branch_icon', - iconType: 'branch', - 'aria-label': 'Branch Icon', - }, - { - controlType: 'text', - id: 'branch_name', - text: 'some_long_branch', - }, - { - controlType: 'divider', - }, - { - controlType: 'icon', - id: 'github_icon', - iconType: 'logoGithub', - onClick: () => {}, - title: 'Open in Github', - 'aria-label': 'Open in Github', - }, - { - controlType: 'divider', - }, - { - controlType: 'button', - id: 'open_history_view', - label: contentIsVisible ? 'Hide history' : 'Show history', - color: 'primary', - onClick: toggleContent, - }, - ]; - - let display; - - if (isDisplaying) { - display = ( - -
- - -

1984

-

By: George Orwell

-

- It was a bright cold day in April, and the clocks were striking - thirteen. Winston Smith, his chin nuzzled into his breast in an - effort to escape the vile wind, slipped quickly through the - glass doors of Victory Mansions, though not quickly enough to - prevent a swirl of gritty dust from entering along with him. -

-

- The hallway smelt of boiled cabbage and old rag mats. At one end - of it a coloured poster, too large for indoor display, had been - tacked to the wall. It depicted simply an enormous face, more - than a metre wide: the face of a man of about forty-five, with a - heavy black moustache and ruggedly handsome features. Winston - made for the stairs. It was no use trying the lift. Even at the - best of times it was seldom working, and at present the electric - current was cut off during daylight hours. It was part of the - economy drive in preparation for Hate Week. The flat was seven - flights up, and Winston, who was thirty-nine and had a varicose - ulcer above his right ankle, went slowly, resting several times - on the way. On each landing, opposite the lift-shaft, the poster - with the enormous face gazed from the wall. It was one of those - pictures which are so contrived that the eyes follow you about - when you move. BIG BROTHER IS WATCHING YOU, the caption beneath - it ran. -

-

- Inside the flat a fruity voice was reading out a list of figures - which had something to do with the production of pig-iron. The - voice came from an oblong metal plaque like a dulled mirror - which formed part of the surface of the right-hand wall. Winston - turned a switch and the voice sank somewhat, though the words - were still distinguishable. The instrument (the telescreen, it - was called) could be dimmed, but there was no way of shutting it - off completely. He moved over to the window: a smallish, frail - figure, the meagreness of his body merely emphasized by the blue - overalls which were the uniform of the party. His hair was very - fair, his face naturally sanguine, his skin roughened by coarse - soap and blunt razor blades and the cold of the winter that had - just ended. -

- - -
- - ); - } - - return ( -
- Toggle example - {display} -
- ); -}; - -beforeEach(() => { - cy.viewport(1024, 768); - cy.mount(); - cy.get('section[aria-label="Page level controls"]').should('not.exist'); -}); - -describe('EuiControlBar', () => { - describe('Automated accessibility check', () => { - it('has zero violations on render', () => { - cy.checkAxe(); - }); - - it('has zero violations when control bar is shown', () => { - cy.get('button.euiButton').contains('Toggle example').realClick(); - cy.get('section[aria-label="Page level controls"]').should('exist'); - cy.checkAxe({ context: 'section[aria-label="Page level controls"]' }); - }); - - it('has zero violations when control bar is hidden', () => { - cy.get('button.euiButton').contains('Toggle example').realClick(); - cy.get('section[aria-label="Page level controls"]').should('exist'); - cy.get('button.euiButton').contains('Toggle example').realClick(); - cy.get('section[aria-label="Page level controls"]').should('not.exist'); - cy.checkAxe(); - }); - }); -}); diff --git a/src/components/control_bar/control_bar.test.tsx b/src/components/control_bar/control_bar.test.tsx deleted file mode 100644 index cbbc02e1528..00000000000 --- a/src/components/control_bar/control_bar.test.tsx +++ /dev/null @@ -1,148 +0,0 @@ -/* - * 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 React, { ReactNode } from 'react'; -import { mount } from 'enzyme'; -import { requiredProps } from '../../test'; -import { render } from '../../test/rtl'; - -import { EuiControlBar, Control } from './control_bar'; - -jest.mock('../portal', () => ({ - EuiPortal: ({ children }: { children: ReactNode }) => children, -})); - -const handleClick = () => { - console.log('You clicked'); -}; - -const controls: Control[] = [ - { - controlType: 'breadcrumbs', - id: 'current_file_path', - responsive: false, - breadcrumbs: [ - { - text: 'src', - }, - { - text: 'components', - }, - ], - }, - { - controlType: 'button', - id: 'sound_the_alarm', - label: 'Sound the Alarm', - onClick: handleClick, - 'data-test-subj': 'dts', - }, - { - controlType: 'text', - id: 'close_the_hatch', - text: 'Close the Hatch', - }, - { - controlType: 'divider', - }, - { - controlType: 'icon', - id: 'sample_icon', - iconType: 'error', - color: 'danger', - 'aria-label': 'Sample Icon', - }, - { - controlType: 'spacer', - }, - { - controlType: 'tab', - id: 'flight_815', - label: 'Flight 815', - onClick: handleClick, - }, -]; - -describe('EuiControlBar', () => { - test('is rendered', () => { - const { container } = render( - - ); - expect(container).toMatchSnapshot(); - }); - - describe('props', () => { - test('mobile is rendered', () => { - const component = mount( - - ); - - expect(component.render()).toMatchSnapshot(); - }); - - test('showContent is rendered', () => { - const component = mount( - - Content - - ); - - expect(component.render()).toMatchSnapshot(); - }); - - test('size is rendered', () => { - const component = mount( - - Content - - ); - - expect(component.render()).toMatchSnapshot(); - }); - - test('maxHeight is rendered', () => { - const component = mount( - - Content - - ); - - expect(component.render()).toMatchSnapshot(); - }); - - test('leftOffset is rendered', () => { - const component = mount( - - Content - - ); - - expect(component.render()).toMatchSnapshot(); - }); - - test('rightOffset is rendered', () => { - const component = mount( - - Content - - ); - - expect(component.render()).toMatchSnapshot(); - }); - - test('position is rendered', () => { - const component = mount( - - Content - - ); - - expect(component.render()).toMatchSnapshot(); - }); - }); -}); diff --git a/src/components/control_bar/control_bar.tsx b/src/components/control_bar/control_bar.tsx deleted file mode 100644 index 055214de336..00000000000 --- a/src/components/control_bar/control_bar.tsx +++ /dev/null @@ -1,491 +0,0 @@ -/* - * 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 classNames from 'classnames'; -import React, { - ButtonHTMLAttributes, - Component, - HTMLAttributes, - MouseEventHandler, - Ref, - ReactNode, -} from 'react'; - -import { EuiThemeProvider } from '../../services'; -import { EuiScreenReaderOnly } from '../accessibility'; -import { EuiBreadcrumbs, EuiBreadcrumbsProps } from '../breadcrumbs'; -import { - EuiButton, - EuiButtonIcon, - EuiButtonIconProps, - EuiButtonProps, -} from '../button'; -import { - CommonProps, - ExclusiveUnion, - PropsForAnchor, - PropsForButton, -} from '../common'; -import { EuiI18n } from '../i18n'; -import { EuiIcon } from '../icon'; -import { EuiIconProps } from '../icon/icon'; -import { EuiPortal } from '../portal'; - -/** - * Extends EuiButton excluding `size`. Requires `label` as the `children`. - */ -export interface ButtonControl extends Omit { - id: string; - label: ReactNode; -} - -type ButtonPropsForAnchor = PropsForAnchor< - ButtonControl, - { - buttonRef?: Ref; - } ->; - -type ButtonPropsForButton = PropsForButton< - ButtonControl, - { - buttonRef?: Ref; - } ->; - -type ButtonControlProps = ExclusiveUnion< - ButtonPropsForAnchor, - ButtonPropsForButton -> & { - controlType: 'button'; -}; - -/** - * Creates a `button` visually styles as a tab. - * Requires `label` as the `children`. - * `onClick` must be provided to handle the content swapping. - */ -export interface TabControl - extends Omit, 'id' | 'onClick'> { - controlType: 'tab'; - id: string; - label: ReactNode; - onClick: MouseEventHandler; -} - -/** - * Extends EuiBreadcrumbs - */ -export interface BreadcrumbControl extends EuiBreadcrumbsProps { - controlType: 'breadcrumbs'; - id: string; -} - -/** - * Simple div controlling color and size text output. - * Requires `label` as the `children`. - */ -export interface TextControl - extends CommonProps, - HTMLAttributes { - controlType: 'text'; - id: string; - text: ReactNode; -} - -export interface SpacerControl { - controlType: 'spacer'; -} - -export interface DividerControl { - controlType: 'divider'; -} - -/** - * Custom props specific to the icon control type - */ -export interface IconControlProps { - controlType: 'icon'; - id: string; - iconType: string; - onClick?: MouseEventHandler; -} - -/** - * Icon can extend EuiIcon - * Had to omit `onClick` as it's a valid prop of SVGElement - * Also omits `type` and `id` as these are also specific to icon control - */ -export interface IconControlType - extends Omit, - IconControlProps {} - -/** - * Icon can extend EuiButtonIcon - * Also omits `iconType` and `id` as these are also specific to icon control - */ -export interface IconButtonControlType - extends Omit, - IconControlProps {} - -export type IconControl = ExclusiveUnion< - IconControlType, - Omit ->; - -export type Control = ExclusiveUnion< - ExclusiveUnion< - ExclusiveUnion< - ExclusiveUnion< - ExclusiveUnion< - ButtonControlProps, - ExclusiveUnion - >, - TextControl - >, - IconControl - >, - DividerControl - >, - SpacerControl ->; - -/** - * @deprecated - */ -export type EuiControlBarProps = HTMLAttributes & - CommonProps & { - /** - * Show or hide the content area containing the `children` - */ - showContent?: boolean; - - /** - * An array of controls, actions, and layout spacers to display. - * Accepts `'button' | 'tab' | 'breadcrumbs' | 'text' | 'icon' | 'spacer' | 'divider'` - */ - controls: Control[]; - - /** - * The default height of the content area. - */ - size?: 's' | 'm' | 'l'; - - /** - * Customize the max height. - * Best when used with `size=l` as this will ensure the actual height equals the max height set. - */ - maxHeight?: number | string; - - /** - * Set the offset from the left side of the screen. - */ - leftOffset?: number | string; - - /** - * Set the offset from the left side of the screen. - */ - rightOffset?: number | string; - - /** - * The control bar is hidden on mobile by default. Use the `showOnMobile` prop to force it's display on mobile screens. - * You'll need to ensure that the content you place into the bar renders as expected on mobile. - */ - showOnMobile?: boolean; - - /** - * By default EuiControlBar will live in a portal, fixed position to the browser window. - * Change the position of the bar to live inside a container and be positioned against its parent. - */ - position?: 'fixed' | 'relative' | 'absolute'; - - /** - * Optional class applied to the body used when `position = fixed` - */ - bodyClassName?: string; - - /** - * Customize the screen reader heading that helps users find this control. Default is "Page level controls". - */ - landmarkHeading?: string; - }; - -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 -> { - static defaultProps = { - leftOffset: 0, - rightOffset: 0, - position: 'fixed', - size: 'l', - showContent: false, - showOnMobile: false, - }; - private bar: HTMLElement | null = null; - - componentDidMount() { - if (this.props.position === 'fixed') { - const height = this.bar ? this.bar.clientHeight : -1; - document.body.style.paddingBottom = `${height}px`; - if (this.props.bodyClassName) { - document.body.classList.add(this.props.bodyClassName); - } - } - } - - componentWillUnmount() { - document.body.style.paddingBottom = ''; - if (this.props.bodyClassName) { - document.body.classList.remove(this.props.bodyClassName); - } - } - - state = { - selectedTab: '', - }; - - render() { - const { - children, - className, - showContent, - controls, - size, - leftOffset, - rightOffset, - maxHeight, - showOnMobile, - style, - position, - bodyClassName, - landmarkHeading, - ...rest - } = this.props; - - const styles = { - ...style, - left: leftOffset, - right: rightOffset, - maxHeight: maxHeight, - }; - - const classes = classNames('euiControlBar', className, { - 'euiControlBar-isOpen': showContent, - 'euiControlBar--large': size === 'l', - 'euiControlBar--medium': size === 'm', - 'euiControlBar--small': size === 's', - 'euiControlBar--fixed': position === 'fixed', - 'euiControlBar--absolute': position === 'absolute', - 'euiControlBar--relative': position === 'relative', - 'euiControlBar--showOnMobile': showOnMobile, - }); - - const handleTabClick = ( - control: TabControl, - e: React.MouseEvent - ) => { - this.setState( - { - selectedTab: control.id, - }, - () => { - control.onClick(e); - } - ); - }; - - const controlItem = (control: Control, index: number) => { - switch (control.controlType) { - case 'button': { - const { controlType, id, color, label, className, ...rest } = control; - return ( - - {label} - - ); - } - case 'icon': { - const { - controlType, - id, - iconType, - className, - color = 'text', - onClick, - href, - ...rest - } = control; - return onClick || href ? ( - - ) : ( - - ); - } - case 'divider': - return ( -
- ); - case 'spacer': - return ( -
- ); - case 'text': { - const { controlType, id, text, className, ...rest } = control; - return ( -
- {text} -
- ); - } - case 'tab': { - const { controlType, id, label, onClick, className, ...rest } = - control; - - const tabClasses = classNames( - 'euiControlBar__tab', - { - 'euiControlBar__tab--active': - showContent && id === this.state.selectedTab, - }, - className - ); - - return ( - - ); - } - case 'breadcrumbs': { - const { controlType, id, ...rest } = control; - return ( - - ); - } - } - }; - - const controlBar = ( - - {(screenReaderHeading: string) => ( - -
- -

- {landmarkHeading ? landmarkHeading : screenReaderHeading} -

- -
{ - this.bar = node; - }} - > - {controls.map((control, index) => controlItem(control, index))} -
- {this.props.showContent ? ( -
{children}
- ) : null} -
- - )} - - ); - - return position === 'fixed' ? ( - - {controlBar} - -

- {landmarkHeading ? ( - - ) : ( - - )} -

- - - ) : ( - controlBar - ); - } -} diff --git a/src/components/control_bar/index.ts b/src/components/control_bar/index.ts deleted file mode 100644 index 993d75f9530..00000000000 --- a/src/components/control_bar/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * 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. - */ - -export type { EuiControlBarProps } from './control_bar'; -export { EuiControlBar } from './control_bar'; diff --git a/src/components/index.scss b/src/components/index.scss index 4060be38d41..b470a4ba1b7 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -2,7 +2,6 @@ @import 'color_picker/index'; @import 'combo_box/index'; -@import 'control_bar/index'; @import 'date_picker/index'; @import 'datagrid/index'; @import 'empty_prompt/index'; diff --git a/src/components/index.ts b/src/components/index.ts index 8bb0c034309..11613f0f390 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -45,8 +45,6 @@ export * from './context'; export * from './context_menu'; -export * from './control_bar'; - export * from './copy'; export * from './datagrid'; From 612f23b476e34c1360d9ae6570c9bf41217ffd91 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 21 Dec 2023 12:28:30 -0800 Subject: [PATCH 2/3] Fix incorrect test name --- src/components/drag_and_drop/drag_and_drop.a11y.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/drag_and_drop/drag_and_drop.a11y.tsx b/src/components/drag_and_drop/drag_and_drop.a11y.tsx index 4e9e5dfb8f3..c78858da208 100644 --- a/src/components/drag_and_drop/drag_and_drop.a11y.tsx +++ b/src/components/drag_and_drop/drag_and_drop.a11y.tsx @@ -70,7 +70,7 @@ beforeEach(() => { cy.realMount(); }); -describe('EuiControlBar', () => { +describe('EuiDragDrop', () => { describe('Automated accessibility check', () => { it('has zero violations on render', () => { cy.checkAxe(); From f1e0396908c23dd94c53bfb48b75813ccf4f86a3 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 21 Dec 2023 13:00:21 -0800 Subject: [PATCH 3/3] changelog --- changelogs/upcoming/7435.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 changelogs/upcoming/7435.md diff --git a/changelogs/upcoming/7435.md b/changelogs/upcoming/7435.md new file mode 100644 index 00000000000..7205c3f4655 --- /dev/null +++ b/changelogs/upcoming/7435.md @@ -0,0 +1,3 @@ +**Breaking changes** + +- Removed deprecated `EuiControlBar`. We recommend using `EuiBottomBar` instead