Skip to content

Commit

Permalink
Merge branch 'main' into CommentList-Colors
Browse files Browse the repository at this point in the history
  • Loading branch information
cee-chen committed Oct 17, 2023
2 parents 5e0cb2e + 077f936 commit bb18869
Show file tree
Hide file tree
Showing 256 changed files with 6,287 additions and 12,697 deletions.
72 changes: 69 additions & 3 deletions .buildkite/pipelines/pipeline_pull_request_test.yml
Original file line number Diff line number Diff line change
@@ -1,9 +1,75 @@
# 🏠/.buildkite/pipelines/pipeline_pull_request_test.yml

steps:
- agents:
- command: .buildkite/scripts/pipeline_test.sh
label: ":typescript: Linting"
agents:
provider: "gcp"
command: .buildkite/scripts/pipeline_test.sh
if: build.branch != "main" # We're skipping testing commits in main for now to maintain parity with previous Jenkins setup
env:
TEST_TYPE: 'lint'
if: build.branch != "main" # This job is triggered by the combined test and deploy docs for every PR

- command: .buildkite/scripts/pipeline_test.sh
label: ":jest: TS unit tests"
agents:
provider: "gcp"
env:
TEST_TYPE: 'unit:ts'
if: build.branch != "main"

- command: .buildkite/scripts/pipeline_test.sh
label: ":jest: TSX unit tests on React 16"
agents:
provider: "gcp"
env:
TEST_TYPE: 'unit:tsx:16'
if: build.branch != "main"

- command: .buildkite/scripts/pipeline_test.sh
label: ":jest: TSX unit tests on React 17"
agents:
provider: "gcp"
env:
TEST_TYPE: 'unit:tsx:17'
if: build.branch != "main"

- command: .buildkite/scripts/pipeline_test.sh
label: ":jest: TSX unit tests on React 18"
agents:
provider: "gcp"
env:
TEST_TYPE: 'unit:tsx'
if: build.branch != "main"

- command: .buildkite/scripts/pipeline_test.sh
label: ":cypress: Cypress tests on React 16"
agents:
provider: "gcp"
env:
TEST_TYPE: 'cypress:16'
if: build.branch != "main"
artifact_paths:
- "cypress/screenshots/**/*.png"
- "cypress/videos/**/*.mp4"

- command: .buildkite/scripts/pipeline_test.sh
label: ":cypress: Cypress tests on React 17"
agents:
provider: "gcp"
env:
TEST_TYPE: 'cypress:17'
if: build.branch != "main"
artifact_paths:
- "cypress/screenshots/**/*.png"
- "cypress/videos/**/*.mp4"

- command: .buildkite/scripts/pipeline_test.sh
label: ":cypress: Cypress tests on React 18"
agents:
provider: "gcp"
env:
TEST_TYPE: 'cypress:18'
if: build.branch != "main"
artifact_paths:
- "cypress/screenshots/**/*.png"
- "cypress/videos/**/*.mp4"
74 changes: 60 additions & 14 deletions .buildkite/scripts/pipeline_test.sh
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,63 @@

set -euo pipefail

docker run \
-i --rm \
--env GIT_COMMITTER_NAME=test \
--env GIT_COMMITTER_EMAIL=test \
--env HOME=/tmp \
--user="$(id -u):$(id -g)" \
--volume="$(pwd):/app" \
--workdir=/app \
docker.elastic.co/eui/ci:5.3 \
bash -c "/opt/yarn*/bin/yarn \
&& yarn cypress install \
&& yarn lint \
&& yarn test-unit --node-options=--max_old_space_size=2048 \
&& yarn test-cypress --node-options=--max_old_space_size=2048"
DOCKER_OPTIONS=(
-i --rm
--env GIT_COMMITTER_NAME=test
--env GIT_COMMITTER_EMAIL=test
--env HOME=/tmp
--user="$(id -u):$(id -g)"
--volume="$(pwd):/app"
--workdir=/app
docker.elastic.co/eui/ci:5.5
)

case $TEST_TYPE in
lint)
echo "[TASK]: Running linters"
DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn lint")
;;

unit:ts)
echo "[TASK]: Running .ts and .js unit tests"
DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react")
;;

unit:tsx:16)
echo "[TASK]: Running Jest .tsx tests against React 16"
DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react")
;;

unit:tsx:17)
echo "[TASK]: Running Jest .tsx tests against React 17"
DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react")
;;

unit:tsx)
echo "[TASK]: Running Jest .tsx tests against React 18"
DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --testMatch=react")
;;

cypress:16)
echo "[TASK]: Running Cypress tests against React 16"
DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && yarn test-cypress --node-options=--max_old_space_size=2048 --react-version=16")
;;

cypress:17)
echo "[TASK]: Running Cypress tests against React 17"
DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && yarn test-cypress --node-options=--max_old_space_size=2048 --react-version=17")
;;

cypress:18)
echo "[TASK]: Running Cypress tests against React 18"
DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && yarn test-cypress --node-options=--max_old_space_size=2048")
;;

*)
echo "[ERROR]: Unknown task"
echo "Exit code: 1"
exit 1
;;
esac

docker run "${DOCKER_OPTIONS[@]}"
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
18.17.1
18.18.1
26 changes: 19 additions & 7 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,20 @@ import { writingModeStyles } from './writing_mode.styles';
// once all EUI components are converted to Emotion
import '../dist/eui_theme_light.css';

/**
* Prop controls
*/

import type { CommonProps } from '../src/components/common';
import { hideStorybookControls } from './utils';

const preview: Preview = {
decorators: [
(Story, context) => (
<EuiProvider colorMode={context.globals.colorMode}>
<EuiProvider
colorMode={context.globals.colorMode}
{...(context.componentId === 'euiprovider' && context.args)}
>
<div
css={[
writingModeStyles.writingMode,
Expand Down Expand Up @@ -86,6 +96,7 @@ const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
backgrounds: { disable: true }, // Use colorMode instead
options: { showPanel: true }, // default to showing the controls panel
controls: {
expanded: true,
sort: 'requiredFirst',
Expand All @@ -100,12 +111,13 @@ const preview: Preview = {
},
// Due to CommonProps, these props appear on almost every Story, but generally
// aren't super useful to test - let's disable them by default and (if needed)
// individual stories can re-enable them
argTypes: {
css: { table: { disable: true } },
className: { table: { disable: true } },
'data-test-subj': { table: { disable: true } },
},
// individual stories can re-enable them, e.g. by passing
// `argTypes: { 'data-test-subj': { table: { disable: false } } }`
argTypes: hideStorybookControls<CommonProps>([
'css',
'className',
'data-test-subj',
]),
};

export default preview;
49 changes: 49 additions & 0 deletions .storybook/utils.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/*
* 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 { hideStorybookControls, disableStorybookControls } from './utils';

describe('hideStorybookControls', () => {
it('outputs the expected `argTypes` object when passed prop name strings', () => {
expect(
hideStorybookControls(['isDisabled', 'isLoading', 'isInvalid'])
).toEqual({
isDisabled: { table: { disable: true } },
isLoading: { table: { disable: true } },
isInvalid: { table: { disable: true } },
});
});

it('throws a typescript error if a generic is passed and the prop names do not match', () => {
type TestComponentProps = { hello: boolean; world: boolean };
// No typescript error
hideStorybookControls<TestComponentProps>(['hello', 'world']);
// @ts-expect-error - will fail `yarn lint` if a TS error is *not* produced
hideStorybookControls<TestComponentProps>(['hello', 'world', 'error']);
});
});

describe('disableStorybookControls', () => {
it('outputs the expected `argTypes` object when passed prop name strings', () => {
expect(
disableStorybookControls(['isDisabled', 'isLoading', 'isInvalid'])
).toEqual({
isDisabled: { control: false },
isLoading: { control: false },
isInvalid: { control: false },
});
});

it('throws a typescript error if a generic is passed and the prop names do not match', () => {
type TestComponentProps = { hello: boolean; world: boolean };
// No typescript error
disableStorybookControls<TestComponentProps>(['hello', 'world']);
// @ts-expect-error - will fail `yarn lint` if a TS error is *not* produced
disableStorybookControls<TestComponentProps>(['hello', 'world', 'error']);
});
});
64 changes: 64 additions & 0 deletions .storybook/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/*
* 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.
*/

/**
* argTypes configurations
*/

/**
* Completely hide props from Storybook's controls panel.
* Should be passed or spread to `argTypes`
*/
export const hideStorybookControls = <Props>(
propNames: Array<keyof Props>
): Record<keyof Props, typeof HIDE_CONTROL> | {} => {
return propNames.reduce(
(obj, name) => ({ ...obj, [name]: HIDE_CONTROL }),
{}
);
};
const HIDE_CONTROL = { table: { disable: true } };

/**
* Leave props visible in Storybook's controls panel, but disable them
* from being controllable (renders a `-`).
*
* Should be passed or spread to `argTypes`
*/
export const disableStorybookControls = <Props>(
propNames: Array<keyof Props>
): Record<keyof Props, typeof DISABLE_CONTROL> | {} => {
return propNames.reduce(
(obj, name) => ({ ...obj, [name]: DISABLE_CONTROL }),
{}
);
};
const DISABLE_CONTROL = { control: false };

/**
* parameters configurations
*/

/**
* Will hide all props/controls. Pass to `parameters`
*
* TODO: Figure out some way to not show Storybook's "setup" text?
*/
export const hideAllStorybookControls = {
controls: { exclude: /.*/g },
};

/**
* Will hide the control/addon panel entirely for a specific story.
* Should be passed or spread to to `parameters`.
*
* Note that users can choose to re-show the panel in the UI
*/
export const hidePanel = {
options: { showPanel: false },
};
38 changes: 38 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,41 @@
## [`89.1.0`](https://github.com/elastic/eui/tree/v89.1.0)

- Added `tokenVectorSparse` token and updated `tokenDenseVector` token (now named `tokenVectorDense`). ([#7282](https://github.com/elastic/eui/pull/7282))

**CSS-in-JS conversions**

- Reduced default CSS prefixes generated by Emotion to only browsers supported by EUI (latest evergreen browsers). This can be customized by passing your own Emotion cache to `EuiProvider`. ([#7272](https://github.com/elastic/eui/pull/7272))

## [`89.0.0`](https://github.com/elastic/eui/tree/v89.0.0)

- Added new `pushAnimation` prop to push `EuiFlyout`s, which enables a slide in animation ([#7239](https://github.com/elastic/eui/pull/7239))
- Updated `EuiComboBox` to use `EuiInputPopover` under the hood ([#7246](https://github.com/elastic/eui/pull/7246))
- Added `inputPopoverProps` to `EuiComboBox`, which allows customizing the underlying popover ([#7246](https://github.com/elastic/eui/pull/7246))
- Added a new beta `EuiTextBlockTruncate` component for multi-line truncation ([#7250](https://github.com/elastic/eui/pull/7250))
- Updated `EuiBasicTable` and `EuiInMemoryTable` to support multi-line truncation. This can be set via `truncateText.lines` in the `columns` prop. ([#7254](https://github.com/elastic/eui/pull/7254))

**Bug fixes**

- Fixed `EuiFlexGroup` and `EuiFlexGrid's `m` gutter size ([#7251](https://github.com/elastic/eui/pull/7251))
- Fixed focus trap rerender issues in `EuiFlyout` with memoization ([#7259](https://github.com/elastic/eui/pull/7259))
- Fixed a visual bug with `EuiContextMenu`'s animation between panels ([#7268](https://github.com/elastic/eui/pull/7268))

**Breaking changes**

- EUI's global body font-size now respects the `font.defaultUnits` token. This means that the global font size will use the `rem` unit by default, instead of `px`. ([#7182](https://github.com/elastic/eui/pull/7182))
- Removed exported `accessibleClickKeys`, `comboBoxKeys`, and `cascadingMenuKeys` services. Use the generic `keys` service instead ([#7256](https://github.com/elastic/eui/pull/7256))
- Removed `EuiColorStops` due to low usage ([#7262](https://github.com/elastic/eui/pull/7262))
- Removed `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([#7263](https://github.com/elastic/eui/pull/7263))
- Removed `euiHeaderAffordForFixed` Sass mixin, and `$euiHeaderHeight` and `$euiHeaderHeightCompensation` Sass variables. Use the CSS variable `--var(euiFixedHeadersOffset, 0)` instead. ([#7264](https://github.com/elastic/eui/pull/7264))

**Accessibility**

- When using `rem` or `em` font units, EUI now respects, instead of ignoring, browser default font sizes set by end users. ([#7182](https://github.com/elastic/eui/pull/7182))

## [`88.5.4`](https://github.com/elastic/eui/tree/v88.5.4)

- This release contains internal changes to a beta component needed by Kibana.

## [`88.5.3`](https://github.com/elastic/eui/tree/v88.5.3)

**Bug fixes**
Expand Down
17 changes: 17 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { defineConfig } from 'cypress';
import { unlinkSync } from 'fs';
import webpackConfig from './cypress/webpack.config';

export default defineConfig({
Expand Down Expand Up @@ -28,9 +29,25 @@ export default defineConfig({
},
});

on(
'after:spec',
(spec: Cypress.Spec, results: CypressCommandLine.RunResult) => {
if (config.video) {
if (results.stats.failures !== 0) {
console.log(
`[FAILURE]: Recording video for ${results.spec.name}.`
);
} else {
unlinkSync(results.video!);
}
}
}
);

return config;
},
specPattern: ['./src/**/*.spec.tsx', './src/**/*.a11y.tsx'], // scripts/cypress.js splits this using the CLI --spec argument
video: false,
videoCompression: 32, // more time to process, but a smaller file to upload as an artifact
},
});
Loading

0 comments on commit bb18869

Please sign in to comment.