Merge remote-tracking branch 'upstream/main' into beacon-emotion

miukimiu · Apr 21, 2022 · 9a54d6c · 9a54d6c
2 parents 0fa006b + 810c0a0
commit 9a54d6c
Show file tree

Hide file tree

Showing 43 changed files with 442 additions and 3,005 deletions.
diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
     "@cypress/code-coverage": "^3.9.12",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^45.1.1",
+    "@elastic/charts": "^46.0.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",

diff --git a/scripts/release.js b/scripts/release.js
@@ -66,7 +66,7 @@ if (args.dry_run) {
     updateChangelog(changelog, versionTarget);
 
     // Clear any local tags
-    execSync('git fetch upstream --tags --prune --prune-tags');
+    execSync('git fetch upstream --tags --prune --prune-tags --force');
 
     // update package.json & package-lock.json version, git commit, git tag
     execSync(`npm version ${versionTarget}`, execOptions);

diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.js b/src-docs/src/views/elastic_charts/accessibility_bullet.js
@@ -63,6 +63,7 @@ export const AccessibilityBullet = () => {
           actual={280}
           bands={bands}
           ticks={[0, 50, 100, 150, 200, 250, 300]}
+          domain={{ min: 0, max: 300 }}
           tickValueFormatter={({ value }) => String(value)}
           bandFillColor={({ value }) => bandFillColor(value)}
           labelMajor="Revenue 2020 YTD  "

diff --git a/src-docs/src/views/elastic_charts/accessibility_example.js b/src-docs/src/views/elastic_charts/accessibility_example.js
@@ -334,6 +334,7 @@ export const ElasticChartsAccessibilityExample = {
       snippet: `<Chart>
   <Settings aria-label="Chart title" {...props} />
   <Goal
+    domain={{ min: 0, max: 300 }}
     bands=[0, 100, 125, 150, 250]
     bandLabels=['freezing', 'cold', 'brisk', 'warm', 'hot']
     {...otherProps}

diff --git a/src-docs/src/views/elastic_charts/goal.js b/src-docs/src/views/elastic_charts/goal.js
@@ -63,6 +63,7 @@ export const GoalChart = () => {
             actual={12}
             bands={bands}
             ticks={[-10, 0, 10, 20, 30, 40]}
+            domain={{ min: -10, max: 40 }}
             tickValueFormatter={({ value }) => String(value)}
             bandFillColor={({ value }) => bandFillColor(value)}
             labelMajor="Temperature"

diff --git a/src-docs/src/views/spacer/_spacer.scss b/src-docs/src/views/spacer/_spacer.scss
@@ -3,7 +3,7 @@
     background: $guideDemoHighlightColor;
   }
 
-  .euiCodeBlock {
+  .euiCode {
     align-self: flex-start;
     margin-bottom: $euiSize;
   }

diff --git a/src-docs/src/views/timeline/timeline.tsx b/src-docs/src/views/timeline/timeline.tsx
@@ -39,4 +39,6 @@ const items: EuiTimelineProps['items'] = [
   },
 ];
 
-export default () => <EuiTimeline items={items} />;
+export default () => (
+  <EuiTimeline items={items} aria-label="Project beta timeline" />
+);
diff --git a/src-docs/src/views/timeline/timeline_example.js b/src-docs/src/views/timeline/timeline_example.js
@@ -6,6 +6,7 @@ import {
   EuiCode,
   EuiTimeline,
   EuiTimelineItem,
+  EuiCallOut,
 } from '../../../../src/components';
 import timelineItemConfig from './playground';
 
@@ -82,6 +83,19 @@ export const TimelineExample = {
               actions that either a user or a system has performed.
             </li>
           </ul>
+
+          <EuiCallOut
+            color="warning"
+            iconType="accessibility"
+            title={
+              <>
+                For accessibility, it is highly recommended to provide a
+                descriptive <EuiCode>aria-label</EuiCode>, or a text node ID of
+                an external label to the <EuiCode>aria-labelledby</EuiCode> prop
+                of the <strong>EuiTimeline</strong>.
+              </>
+            }
+          />
         </>
       ),
       props: { EuiTimeline, EuiTimelineItem },
@@ -136,11 +150,10 @@ export const TimelineExample = {
         <>
           <p>
             You can create a timeline thread by rendering multiple{' '}
-            <strong>EuiTimelineItem</strong> components. Wrapping these with an{' '}
-            <strong>EuiTimeline</strong> is not required, but we recommend
-            having all the <strong>EuiTimelineItem</strong>s nested in the same
-            container. This way, we ensure that timeline styles are applied
-            correctly.
+            <strong>EuiTimelineItem</strong> components in a{' '}
+            <strong>EuiTimeline</strong>. Following this structure ensures that
+            timeline styles are applied correctly and appropriate semantic
+            elements are used to assist with screen readers.
           </p>
           <p>
             When passing an <EuiCode>icon</EuiCode> and{' '}

diff --git a/src-docs/src/views/timeline/timeline_item.tsx b/src-docs/src/views/timeline/timeline_item.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { EuiTimelineItem, EuiText, EuiCode } from '../../../../src/components';
 
 export default () => (
-  <EuiTimelineItem icon="dot" iconAriaLabel="Main icon">
+  <EuiTimelineItem icon="dot" iconAriaLabel="Main icon" component="div">
     <EuiText size="s">
       <p>
         I&apos;m the <EuiCode>children</EuiCode> and you can find the{' '}

diff --git a/src-docs/src/views/timeline/timeline_item_event.tsx b/src-docs/src/views/timeline/timeline_item_event.tsx
@@ -14,6 +14,7 @@ import {
   EuiSplitPanel,
   EuiPanel,
   EuiHorizontalRule,
+  EuiTimeline,
 } from '../../../../src/components';
 
 import {
@@ -107,7 +108,7 @@ export default () => {
   );
 
   return (
-    <div>
+    <EuiTimeline aria-label="Life cycle of data">
       <EuiTimelineItem
         verticalAlign="top"
         icon={
@@ -144,6 +145,6 @@ export default () => {
       {phase('Cold phase', checked2, onChange2, colorBlindBehindText[2])}
 
       {phase('Frozen phase', checked3, onChange3, colorBlindBehindText[3])}
-    </div>
+    </EuiTimeline>
   );
 };
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -40,11 +40,11 @@
 }
 
 .euiAccordion__childWrapper {
+  will-change: opacity, visibility, height;
   visibility: hidden;
   height: 0;
   opacity: 0;
   overflow: hidden;
-  transform: translatez(0);
   // sass-lint:disable-block indentation
   transition:
     height $euiAnimSpeedNormal $euiAnimSlightResistance,

diff --git a/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap b/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap
@@ -1,43 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiAspectRatio is rendered 1`] = `
-<div
+<iframe
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen=""
   aria-label="aria-label"
   class="euiAspectRatio testClass1 testClass2"
   data-test-subj="test subject string"
-  style="padding-bottom:44.44444444444444%;max-width:auto"
+  frameborder="0"
+  height="315"
+  src="https://www.youtube.com/embed/yJarWSLRM24"
+  style="aspect-ratio:9 / 4;height:100%;width:100%"
+  title="Elastic is a search company"
+  width="560"
+/>
+`;
+
+exports[`EuiAspectRatio props maxWidth is rendered 1`] = `
+<div
+  style="max-width:500px"
 >
   <iframe
     allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
     allowfullscreen=""
+    aria-label="aria-label"
+    class="euiAspectRatio testClass1 testClass2"
+    data-test-subj="test subject string"
     frameborder="0"
     height="315"
     src="https://www.youtube.com/embed/yJarWSLRM24"
+    style="aspect-ratio:9 / 16;height:100%;width:100%"
     title="Elastic is a search company"
     width="560"
   />
 </div>
 `;
-
-exports[`EuiAspectRatio props maxWidth is rendered 1`] = `
-<div
-  style="max-width:500px"
->
-  <div
-    aria-label="aria-label"
-    class="euiAspectRatio testClass1 testClass2"
-    data-test-subj="test subject string"
-    style="padding-bottom:177.77777777777777%;max-width:500px"
-  >
-    <iframe
-      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-      allowfullscreen=""
-      frameborder="0"
-      height="315"
-      src="https://www.youtube.com/embed/yJarWSLRM24"
-      title="Elastic is a search company"
-      width="560"
-    />
-  </div>
-</div>
-`;
diff --git a/src/components/aspect_ratio/_aspect_ratio.scss b/src/components/aspect_ratio/_aspect_ratio.scss
diff --git a/src/components/aspect_ratio/_index.scss b/src/components/aspect_ratio/_index.scss
diff --git a/src/components/aspect_ratio/aspect_ratio.tsx b/src/components/aspect_ratio/aspect_ratio.tsx
@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  ReactElement,
+  CSSProperties,
+} from 'react';
 import { CommonProps } from '../common';
 import classNames from 'classnames';
 
@@ -23,7 +28,8 @@ export type EuiAspectRatioProps = HTMLAttributes<HTMLDivElement> &
     /**
      * The maximum width you want the child to stretch to.
      */
-    maxWidth?: number;
+    maxWidth?: CSSProperties['width'];
+    children: ReactElement<any>;
   };
 
 export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
@@ -36,21 +42,19 @@ export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
 }) => {
   const classes = classNames('euiAspectRatio', className);
 
-  const paddingBottom = `${(height / width) * 100}%`;
+  const euiAspectRatioStyle = {
+    aspectRatio: `${width} / ${height}`,
+    height: '100%',
+    width: '100%',
+  };
 
-  const content = (
-    <div
-      className={classes}
-      {...rest}
-      style={{
-        paddingBottom: paddingBottom,
-        maxWidth: maxWidth ? maxWidth : 'auto',
-      }}
-    >
-      {children}
-    </div>
-  );
+  const props = {
+    className: classes,
+    style: euiAspectRatioStyle,
+    ...rest,
+  };
 
+  const content = React.cloneElement(children, props);
   let contentwithoptionalwrap = content;
   if (maxWidth) {
     contentwithoptionalwrap = (

diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
@@ -304,48 +304,3 @@ exports[`EuiAvatar props type is rendered 1`] = `
 `;
 
 exports[`EuiAvatar should throw error if color is not a hex 1`] = `"EuiAvatar needs to pass a valid color. This can either be a three or six character hex value"`;
-
-exports[`EuiAvatar should throw error if color is not a hex: renders with emotion styles 1`] = `
-.css-11owldj-euiAvatar-m-user {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-background-size: cover;
-  background-size: cover;
-  text-align: center;
-  vertical-align: middle;
-  overflow-x: hidden;
-  font-weight: 500;
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
-  font-size: calc(16px * 0.9);
-  border-radius: 50%;
-}
-
-<div
-  aria-label="name"
-  class="euiAvatar euiAvatar--m euiAvatar--user css-11owldj-euiAvatar-m-user"
-  role="img"
-  style="background-color:#e4a6c7;color:#000000"
-  title="name"
->
-  <span
-    aria-hidden="true"
-  >
-    n
-  </span>
-</div>
-`;
diff --git a/src/components/avatar/avatar.test.tsx b/src/components/avatar/avatar.test.tsx
@@ -9,15 +9,11 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
-import {
-  renderWithStyles,
-  shouldRenderCustomStyles,
-} from '../../test/internal';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiAvatar, SIZES } from './avatar';
 
 describe('EuiAvatar', () => {
-  renderWithStyles(<EuiAvatar name="name" />);
   shouldRenderCustomStyles(<EuiAvatar name="name" />);
 
   test('is rendered', () => {