@elastic/eui 62.2.1 → 64.0.0

package/src/components/page/page_body/_page_body.scss

@@ -1,45 +0,0 @@
-.euiPageBody {
-  @include euiPageRestrictWidth;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  flex: 1 1 100%;
-  // Make sure that inner flex layouts don't get larger than this container
-  max-width: 100%;
-  min-width: 0;
-  // Commenting out for posterity
-  // Adding z-index disallows fullscreens like EuiDataGrid to get above the headers
-  // z-index: 1; // Ensures any side nav emphasis gets rendered under shadow
-
-  // Assumes that in the default theme, the borders are touching the edge of the EuiPage so remove them.
-  &.euiPageBody--borderRadiusNone { // Nested for specificity
-    border-top-width: 0;
-    border-right-width: 0;
-    border-bottom-width: 0;
-  }
-}
-
-// Uses the same values as EuiPanel
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPageBody--#{$modifier} {
-    padding: $amount;
-
-    & > .euiPageHeader:not([class*='--padding']) {
-      // Match the body's padding for spacing if it doesn't have it's own
-      margin-bottom: $amount;
-      // When the page header is actually inside of a panelled page body,
-      // We want to add some extra separation between it and the content body
-      border-bottom: $euiBorderThin;
-
-      &:not(.euiPageHeader--tabsAtBottom):not(.euiPageHeader--onlyTabs) {
-        padding-bottom: $amount;
-      }
-    }
-
-    // When only tabs, remove all padding
-    & > .euiPageHeader.euiPageHeader--onlyTabs {
-      padding-top: 0;
-    }
-  }
-}
-

package/src/components/page/page_header/_index.scss

@@ -1,3 +0,0 @@
-@import 'page_header';
-@import 'page_header_content';
-@import 'page_header_section';

package/src/components/page/page_header/_page_header.scss

@@ -1,78 +0,0 @@
-/**
- * Note: Bottom margin is added in _page.scss when EuiPage has `paddingSize`
- *       Or it's added in _page_body.scss when EuiPageBody has `paddingSize`
- */
-
-.euiPageHeader {
-  @include euiPageRestrictWidth;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0; // Ensures Safari doesn't shrink beyond contents
-}
-
-.euiPageHeader--bottomBorder {
-  border-bottom: $euiBorderThin;
-
-  &:not(.euiPageHeader--tabsAtBottom):not(.euiPageHeader--onlyTabs) {
-    // Default padding to separate contents (unless there's tabs)
-    padding-bottom: map-get($euiPanelPaddingModifiers, 'paddingLarge');
-  }
-}
-
-// When there's only tabs, make them and take up the "whole" vertical space
-.euiPageHeader--onlyTabs {
-  padding-top: $euiSizeS;
-
-  .euiTabs--xlarge .euiTab {
-    line-height: $euiSize * 4.5;
-    height: $euiSize * 4.5;
-  }
-}
-
-// Uses the same values as EuiPanel
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPageHeader--#{$modifier} {
-    padding: $amount;
-
-    // Use margin if there are tabs to keep border close to tabs
-    &.euiPageHeader--tabsAtBottom,
-    &.euiPageHeader--onlyTabs {
-      padding-bottom: 0;
-    }
-
-    // When only tabs, use the same padding top for all padding sizes
-    &.euiPageHeader--onlyTabs {
-      padding-top: $euiSizeS;
-    }
-
-    &.euiPageHeader--tabsAtBottom.euiPageHeader--bottomBorder,
-    &.euiPageHeader--onlyTabs.euiPageHeader--bottomBorder {
-      margin-bottom: $amount;
-    }
-  }
-}
-
-.euiPageHeader--top {
-  align-items: flex-start;
-}
-
-.euiPageHeader--bottom {
-  align-items: flex-end;
-}
-
-.euiPageHeader--stretch {
-  align-items: stretch;
-}
-
-@include euiBreakpoint('xs', 's') {
-  .euiPageHeader--responsive {
-    flex-direction: column;
-  }
-
-  .euiPageHeader--responsiveReverse {
-    flex-direction: column-reverse;
-  }
-}

package/src/components/page/page_header/_page_header_content.scss

@@ -1,15 +0,0 @@
-.euiPageHeader .euiPageHeaderContent {
-  width: 100%;
-}
-
-.euiPageHeaderContent__titleIcon {
-  top: -$euiSizeXS;
-  position: relative;
-  margin-right: $euiSize;
-}
-
-@include euiBreakpoint('m', 'l', 'xl') {
-  .euiPageHeaderContent__rightSideItems {
-    flex-direction: row-reverse;
-  }
-}

package/src/components/page/page_header/_page_header_section.scss

@@ -1,26 +0,0 @@
-.euiPageHeaderSection:not(:first-of-type) {
-  margin-left: $euiSizeXL;
-}
-
-@include euiBreakpoint('xs', 's') {
-  .euiPageHeader--responsive .euiPageHeaderSection {
-    width: 100%;
-
-    &:not(:first-of-type) {
-      margin-left: 0;
-      margin-top: $euiSize;
-    }
-  }
-
-  .euiPageHeader--responsiveReverse .euiPageHeaderSection {
-    width: 100%;
-
-    &:not(:first-of-type) {
-      margin-left: 0;
-    }
-
-    &:not(:last-of-type) {
-      margin-top: $euiSize;
-    }
-  }
-}

package/src/components/tour/_index.scss

@@ -1,2 +0,0 @@
-@import 'tour';
-@import 'tour_step_indicator';

package/src/components/tour/_tour.scss

@@ -1,68 +0,0 @@
-$euiPopoverArrowSize: $euiSizeM;
-
-.euiTourHeader {
-  border-bottom: none;
-  // Overriding default `EuiPopoverTitle` styles
-  margin-bottom: $euiSizeS !important; // sass-lint:disable-line no-important
-
-  .euiTourHeader__title { // nested for additional specificity to override EuiTitle styles
-    // Removes extra margin applied to siblint EuiTitle's
-    margin-top: 0;
-  }
-}
-
-.euiTourHeader__subtitle {
-  color: $euiTextSubduedColor;
-}
-
-.euiTourFooter {
-  background-color: $euiPageBackgroundColor;
-  border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
-}
-
-.euiTour {
-  .euiTour__beacon {
-    pointer-events: none;
-    position: absolute;
-    opacity: 0;
-    transition: opacity 0s $euiAnimSpeedSlow; // delay time equals EuiPopover animation time
-  }
-
-  &[data-popover-open='true'] {
-    .euiTour__beacon {
-      opacity: 1;
-    }
-  }
-
-  [data-popover-arrow='right'] {
-    .euiTour__beacon {
-      top: $euiPopoverArrowSize / 2;
-      left: -$euiPopoverArrowSize * 2;
-    }
-  }
-
-  [data-popover-arrow='left'] {
-    .euiTour__beacon {
-      top: $euiPopoverArrowSize / 2;
-      left: $euiPopoverArrowSize;
-    }
-  }
-
-  [data-popover-arrow='top'] {
-    &:before {
-      border-top-color: $euiPageBackgroundColor;
-    }
-
-    .euiTour__beacon {
-      top: $euiPopoverArrowSize;
-      left: $euiPopoverArrowSize / 2;
-    }
-  }
-
-  [data-popover-arrow='bottom'] {
-    .euiTour__beacon {
-      top: -$euiPopoverArrowSize * 2;
-      left: $euiPopoverArrowSize / 2;
-    }
-  }
-}

package/src/components/tour/_tour_step_indicator.scss

@@ -1,3 +0,0 @@
-.euiTourStepIndicator  {
-  display: inline-block;
-}

package/test-env/services/breakpoint/breakpoint.js

@@ -1,105 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BREAKPOINT_KEYS = exports.BREAKPOINTS = void 0;
-exports.getBreakpoint = getBreakpoint;
-exports.isWithinBreakpoints = isWithinBreakpoints;
-exports.isWithinMaxBreakpoint = isWithinMaxBreakpoint;
-exports.isWithinMinBreakpoint = isWithinMinBreakpoint;
-
-var _common = require("../../components/common");
-
-var _breakpoint = require("../../themes/amsterdam/global_styling/variables/_breakpoint");
-
-/*
- * 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.
- */
-var BREAKPOINTS = _breakpoint.breakpoint;
-exports.BREAKPOINTS = BREAKPOINTS;
-var BREAKPOINT_KEYS = (0, _common.keysOf)(BREAKPOINTS);
-/**
- * Given the current `width` and an object of `EuiBreakpoints`,
- * this function returns the string that is the name of the breakpoint key
- * that is less than or equal to the width
- *
- * @param {number} width Can either be the full window width or any width
- * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
- * @returns {string | undefined} Name of the breakpoint key or `undefined` if a key doesn't exist
- */
-
-exports.BREAKPOINT_KEYS = BREAKPOINT_KEYS;
-
-function getBreakpoint(width) {
-  var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BREAKPOINTS;
-  // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
-  return BREAKPOINT_KEYS.find(function (key) {
-    return breakpoints[key] <= width;
-  });
-}
-/**
- * Given the current `width` and a max breakpoint key,
- * this function returns true or false if the `width` falls within the max
- * breakpoint or any breakpoints below
- *
- * @param {number} width Can either be the full window width or any width
- * @param {EuiBreakpointSize | number} max The named breakpoint or custom number to check against
- * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
- * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
- */
-
-
-function isWithinMaxBreakpoint(width, max) {
-  var breakpoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : BREAKPOINTS;
-
-  if (typeof max === 'number') {
-    return width <= max;
-  } else {
-    var currentBreakpoint = getBreakpoint(width, breakpoints);
-    return currentBreakpoint ? breakpoints[currentBreakpoint] <= breakpoints[max] : false;
-  }
-}
-/**
- * Given the current `width` and a min breakpoint key,
- * this function returns true or false if the `width` falls within the min
- * breakpoint or any breakpoints above
- *
- * @param {number} width Can either be the full window width or any width
- * @param {EuiBreakpointSize | number} min The named breakpoint or custom number to check against
- * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
- * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
- */
-
-
-function isWithinMinBreakpoint(width, min) {
-  var breakpoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : BREAKPOINTS;
-
-  if (typeof min === 'number') {
-    return width >= min;
-  } else {
-    var currentBreakpoint = getBreakpoint(width, breakpoints);
-    return currentBreakpoint ? breakpoints[currentBreakpoint] >= breakpoints[min] : false;
-  }
-}
-/**
- * Given the current `width` and an array of breakpoint keys,
- * this function returns true or false if the `width` falls within
- * any of the named breakpoints
- *
- * @param {number} width Can either be the full window width or any width
- * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
- * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
- * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
- */
-
-
-function isWithinBreakpoints(width, sizes) {
-  var breakpoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : BREAKPOINTS;
-  var currentBreakpoint = getBreakpoint(width, breakpoints);
-  return currentBreakpoint ? sizes.includes(currentBreakpoint) : false;
-}

package/test-env/services/breakpoint/useIsWithinBreakpoints.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useIsWithinBreakpoints = void 0;
-
-var _current_breakpoint_hook = require("./current_breakpoint_hook");
-
-/*
- * 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.
- */
-
-/**
- * Given the current window.innerWidth and an array of breakpoint keys,
- * this hook stores state and returns true or false if the window.innerWidth
- * falls within any of the named breakpoints.
- *
- * @param {_EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
- * @param {boolean} isResponsive Some components have the option to turn off responsive behavior.
- *   Since hooks can't be called conditionally, it's easier to pass the condition into the hook
- * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
- */
-var useIsWithinBreakpoints = function useIsWithinBreakpoints(sizes) {
-  var isResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var currentBreakpoint = (0, _current_breakpoint_hook.useCurrentEuiBreakpoint)();
-  return currentBreakpoint && isResponsive ? sizes.includes(currentBreakpoint) : false;
-};
-
-exports.useIsWithinBreakpoints = useIsWithinBreakpoints;