@elastic/eui 88.1.0 → 88.2.0

package/eui.d.ts

@@ -673,6 +673,7 @@ declare module '@elastic/eui/src/global_styling/variables/levels' {
 
 }
 declare module '@elastic/eui/src/services/theme/types' {
+	import type { CSSObject } from '@emotion/react';
 	import { RecursivePartial, ValueOf } from '@elastic/eui/src/components/common';
 	import { _EuiThemeAnimation } from '@elastic/eui/src/global_styling/variables/animations';
 	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
@@ -730,6 +731,10 @@ declare module '@elastic/eui/src/services/theme/types' {
 	    hasDifferentColorFromGlobalTheme: boolean;
 	    bodyColor: string;
 	    colorClassName: string;
+	    setGlobalCSSVariables: Function;
+	    globalCSSVariables?: CSSObject;
+	    setNearestThemeCSSVariables: Function;
+	    themeCSSVariables?: CSSObject;
 	};
 
 }
@@ -1366,6 +1371,16 @@ declare module '@elastic/eui/src/services/theme/hooks' {
 	export const RenderWithEuiTheme: <T extends {} = {}>({ children, }: {
 	    children: (theme: UseEuiTheme) => React.ReactElement;
 	}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+	/**
+	 * Minor syntactical sugar hook for theme CSS variables.
+	 * Primarily meant for internal EUI usage.
+	 */
+	export const useEuiThemeCSSVariables: () => {
+	    setGlobalCSSVariables: Function;
+	    globalCSSVariables: import("@emotion/serialize").CSSObject | undefined;
+	    setNearestThemeCSSVariables: Function;
+	    themeCSSVariables: import("@emotion/serialize").CSSObject | undefined;
+	};
 
 }
 declare module '@elastic/eui/src/global_styling/functions/typography' {
@@ -7798,6 +7813,20 @@ declare module '@elastic/eui/src/services/theme/context' {
 	export const EuiThemeContext: import("react").Context<EuiThemeComputed<{}>>;
 	export const EuiNestedThemeContext: import("react").Context<EuiThemeNested>;
 
+}
+declare module '@elastic/eui/src/services/emotion/clone_element' {
+	import React from 'react';
+	/**
+	 * React.cloneElement does not work if the cloned element does not already have the
+	 * `css` prop - as a result, we need to use `jsx()` to manually clone the element
+	 * See https://github.com/emotion-js/emotion/issues/1404
+	 */
+	export const cloneElementWithCss: (element: any, props: any) => React.ReactElement;
+
+}
+declare module '@elastic/eui/src/services/emotion' {
+	export * from '@elastic/eui/src/services/emotion/clone_element';
+
 }
 declare module '@elastic/eui/src/services/theme/emotion' {
 	import { FunctionComponent, PropsWithChildren } from 'react';
@@ -7842,7 +7871,7 @@ declare module '@elastic/eui/src/services/theme/provider' {
 declare module '@elastic/eui/src/services/theme' {
 	export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
 	export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
-	export { useEuiTheme, withEuiTheme, RenderWithEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	export { useEuiTheme, withEuiTheme, RenderWithEuiTheme, useEuiThemeCSSVariables, } from '@elastic/eui/src/services/theme/hooks';
 	export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
 	export { EuiThemeProvider } from '@elastic/eui/src/services/theme/provider';
 	export { getEuiDevProviderWarning, setEuiDevProviderWarning } from '@elastic/eui/src/services/theme/warning';
@@ -7950,20 +7979,6 @@ declare module '@elastic/eui/src/services/console' {
 declare module '@elastic/eui/src/services/copy_to_clipboard' {
 	export function copyToClipboard(text: string): boolean;
 
-}
-declare module '@elastic/eui/src/services/emotion/clone_element' {
-	import React from 'react';
-	/**
-	 * React.cloneElement does not work if the cloned element does not already have the
-	 * `css` prop - as a result, we need to use `jsx()` to manually clone the element
-	 * See https://github.com/emotion-js/emotion/issues/1404
-	 */
-	export const cloneElementWithCss: (element: any, props: any) => React.ReactElement;
-
-}
-declare module '@elastic/eui/src/services/emotion' {
-	export * from '@elastic/eui/src/services/emotion/clone_element';
-
 }
 declare module '@elastic/eui/src/services/findElement' {
 	/**
@@ -8528,9 +8543,22 @@ declare module '@elastic/eui/src/components/accessibility' {
 }
 declare module '@elastic/eui/src/components/accordion/accordion.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiAccordionStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiAccordion: import("@emotion/utils").SerializedStyles;
+	    borders: {
+	        borders: import("@emotion/utils").SerializedStyles;
+	        horizontal: import("@emotion/utils").SerializedStyles;
+	        all: import("@emotion/utils").SerializedStyles;
+	    };
+	};
 	export const euiAccordionButtonStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiAccordion__button: import("@emotion/utils").SerializedStyles;
 	    disabled: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    arrowLeft: import("@emotion/utils").SerializedStyles;
+	    arrowRight: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiAccordionChildrenStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiAccordion__children: import("@emotion/utils").SerializedStyles;
@@ -8581,9 +8609,14 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	     */
 	    buttonClassName?: string;
 	    /**
-	     * Apply more props to the triggering button
+	     * Apply more props to the triggering button.
+	     *
+	     * Includes optional `paddingSize` prop which allows sizes of `s`, `m`, or `l`.
+	     * Note: Padding will not be present on the side closest to the accordion arrow.
 	     */
-	    buttonProps?: CommonProps & HTMLAttributes<HTMLElement>;
+	    buttonProps?: CommonProps & HTMLAttributes<HTMLElement> & {
+	        paddingSize?: 's' | 'm' | 'l';
+	    };
 	    /**
 	     * Class that will apply to the trigger content for the accordion.
 	     */
@@ -8621,6 +8654,10 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	     * Placement of the arrow indicator, or 'none' to hide it.
 	     */
 	    arrowDisplay?: 'left' | 'right' | 'none';
+	    /**
+	     * Optional border styling. Defaults to 'none'.
+	     */
+	    borders?: 'horizontal' | 'all' | 'none';
 	    /**
 	     * Control the opening of accordion via prop
 	     */
@@ -8643,6 +8680,7 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	export class EuiAccordionClass extends Component<WithEuiThemeProps & EuiAccordionProps, EuiAccordionState> {
 	    static defaultProps: {
 	        initialIsOpen: boolean;
+	        borders: "none";
 	        paddingSize: "none";
 	        arrowDisplay: "left";
 	        isLoading: boolean;
@@ -16385,6 +16423,12 @@ declare module '@elastic/eui/src/components/header/header' {
 	    theme?: 'default' | 'dark';
 	};
 	export const EuiHeader: FunctionComponent<EuiHeaderProps>;
+	/**
+	 * Fixed headers - logic around dynamically calculating the total
+	 * page offset and setting the `top` position of subsequent headers
+	 */
+	export let euiFixedHeadersCount: number;
+	export const EuiFixedHeader: FunctionComponent<EuiHeaderProps>;
 	export {};
 
 }
@@ -22058,6 +22102,190 @@ declare module '@elastic/eui/src/components/text_diff' {
 	export type { EuiTextDiffProps } from '@elastic/eui/src/components/text_diff/text_diff';
 	export { useEuiTextDiff } from '@elastic/eui/src/components/text_diff/text_diff';
 
+}
+declare module '@elastic/eui/src/components/text_truncate/utils' {
+	import type { ExclusiveUnion } from '@elastic/eui/src/components/common';
+	interface SharedParams {
+	    fullText: string;
+	    ellipsis: string;
+	    availableWidth: number;
+	}
+	interface DOMParams extends SharedParams {
+	    container: HTMLElement;
+	} type CanvasParams = SharedParams & ExclusiveUnion<{
+	    container: HTMLElement;
+	}, {
+	    font: CanvasTextDrawingStyles['font'];
+	}>; abstract class _TruncationUtils {
+	    protected fullText: SharedParams['fullText'];
+	    protected ellipsis: SharedParams['ellipsis'];
+	    protected availableWidth: SharedParams['availableWidth'];
+	    constructor({ fullText, ellipsis, availableWidth }: SharedParams);
+	    /**
+	     * Internal measurement utils which will be overridden depending on the
+	     * rendering approach used (e.g. DOM vs Canvas).
+	     */
+	    abstract textWidth: number;
+	    abstract setTextToCheck: (text: string) => void;
+	    /**
+	     * Early return checks
+	     */
+	    checkIfTruncationIsNeeded: () => false | undefined;
+	    checkSufficientEllipsisWidth: (truncation: string) => false | undefined;
+	    checkTruncationOffsetWidth: (text: string) => false | undefined;
+	    /**
+	     * Truncation types logic. This is where the magic happens
+	     */
+	    truncateStart: (truncationOffset?: number | undefined) => string;
+	    truncateEnd: (truncationOffset?: number | undefined) => string;
+	    truncateStartEndAtPosition: (truncationPosition: number) => string;
+	    truncateStartEndAtMiddle: () => string;
+	    truncateMiddle: () => string;
+	}
+	/**
+	 * Creates a temporary vanilla JS DOM element for manipulating text and
+	 * determining text width.
+	 *
+	 * Requires passing in a container element to which the temporary element
+	 * will be appended. Any CSS/font styles that need to be accounted for should
+	 * be automatically inherited from the container.
+	 *
+	 * NOTE: The consumer is responsible for calling the `cleanup()` method manually
+	 * to remove the temporary DOM node once their usage of this utility is complete.
+	 */
+	export class TruncationUtilsWithDOM extends _TruncationUtils {
+	    container: DOMParams['container'];
+	    span: HTMLSpanElement;
+	    constructor({ container, ...rest }: DOMParams);
+	    get textWidth(): number;
+	    setTextToCheck: (text: string) => void;
+	    cleanup: () => void;
+	}
+	/**
+	 * Creates a temporary Canvas element for manipulating text & determining
+	 * text width. This method is compatible with charts or other canvas-rendered
+	 * frameworks, and requires no cleanup method.
+	 *
+	 * To accurately measure text, canvas rendering requires either a container to
+	 * compute/derive font styles from, or a static font string (useful for usage
+	 * outside the DOM). Particular care should be applied when fallback fonts are
+	 * used, as more fallback fonts can lead to less precision.
+	 *
+	 * Please note that while canvas is more performant than DOM measurement, there
+	 * are subpixel to single digit pixel differences between DOM and canvas
+	 * measurement due to the different rendering engines used.
+	 */
+	export class TruncationUtilsWithCanvas extends _TruncationUtils {
+	    context: CanvasRenderingContext2D;
+	    currentText: string;
+	    constructor({ font, container, ...rest }: CanvasParams);
+	    computeFontFromElement: (element: HTMLElement) => string;
+	    get textWidth(): number;
+	    setTextToCheck: (text: string) => void;
+	}
+	export {};
+
+}
+declare module '@elastic/eui/src/components/text_truncate/text_truncate.styles' {
+	export const euiTextTruncateStyles: {
+	    euiTextTruncate: import("@emotion/utils").SerializedStyles;
+	    /**
+	     * The below CSS is a hack to get double clicking and selecting the *full* text
+	     * instead of the truncated text (useful for copying/pasting, and mimics how
+	     * `text-overflow: ellipsis` works).
+	     *
+	     * Real talk: I'm lowkey amazed it works and it wouldn't surprise me if we ran into
+	     * cross-browser issues with this at some point. Hopefully CSS natively implements
+	     * custom text truncation some day (https://github.com/w3c/csswg-drafts/issues/3937)
+	     * and there'll be no need for the entire component at that point 🙏
+	     */
+	    truncatedText: import("@emotion/utils").SerializedStyles;
+	    fullText: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/text_truncate/text_truncate' {
+	import { HTMLAttributes, FunctionComponent, ReactNode } from 'react';
+	import type { CommonProps } from '@elastic/eui/src/components/common'; const TRUNCATION_TYPES: readonly ["end", "start", "startEnd", "middle"];
+	export type EuiTextTruncationTypes = (typeof TRUNCATION_TYPES)[number];
+	export type EuiTextTruncateProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onResize'> & CommonProps & {
+	    /**
+	     * The full text string to truncate
+	     */
+	    text: string;
+	    /**
+	     * The truncation type desired. Determines where the ellipses are placed.
+	     */
+	    truncation?: EuiTextTruncationTypes;
+	    /**
+	     * This prop **only** applies to the `start` and `end` truncation types.
+	     * It allows preserving a certain number of characters of either the
+	     * starting or ending text.
+	     *
+	     * If the passed offset is greater than the total text length,
+	     * the offset will be ignored.
+	     */
+	    truncationOffset?: number;
+	    /**
+	     * This prop **only** applies to the `startEnd` truncation type.
+	     * It allows customizing the anchor position of the displayed text,
+	     * which otherwise defaults to the middle of the text string.
+	     *
+	     * The primary use case for this prop for is search highlighting - e.g., if
+	     * a user searches for a specific word in the text, pass the index of that
+	     * found word to ensure it is always visible.
+	     *
+	     * This behavior will intelligently detect when positions are close to the start
+	     * or end of the text, and omit leading or trailing ellipses when necessary.
+	     * If the passed position is greater than the total text length,
+	     * the truncation will simply default to `start` instead.
+	     */
+	    truncationPosition?: number;
+	    /**
+	     * Defaults to the horizontal ellipsis character.
+	     * Can be optionally configured to use other punctuation,
+	     * e.g. spaces, brackets, hyphens, asterisks, etc.
+	     */
+	    ellipsis?: string;
+	    /**
+	     * By default, EuiTextTruncate will render a resize observer to detect the
+	     * available width it has. For performance reasons (e.g. multiple truncated
+	     * text items within the same container), you may opt to pass in your own
+	     * container width, which will skip initializing a resize observer.
+	     */
+	    width?: number;
+	    /**
+	     * Optional callback that fires when the default resizer observer both mounts and
+	     * registers a size change. This callback will **not** fire if `width` is passed.
+	     */
+	    onResize?: (width: number) => void;
+	    /**
+	     * By default, EuiTextTruncate will calculate its truncation via DOM manipulation
+	     * and measurement, which has the benefit of automatically inheriting font styles.
+	     * However, if this approach proves to have a significant performance impact for your
+	     * usage, consider using the `canvas` API instead, which is more performant.
+	     *
+	     * Please note that there are minute pixel to subpixel differences between the
+	     * two options due to different rendering engines.
+	     */
+	    measurementRenderAPI?: 'dom' | 'canvas';
+	    /**
+	     * By default, EuiTextTruncate will render the truncated string directly.
+	     * You can optionally pass a render prop function to the component, which
+	     * allows for more flexible text rendering, e.g. adding custom markup
+	     * or highlighting
+	     */
+	    children?: (truncatedString: string) => ReactNode;
+	};
+	export const EuiTextTruncate: FunctionComponent<EuiTextTruncateProps>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/text_truncate' {
+	export type { EuiTextTruncateProps, EuiTextTruncationTypes, } from '@elastic/eui/src/components/text_truncate/text_truncate';
+	export { EuiTextTruncate } from '@elastic/eui/src/components/text_truncate/text_truncate';
+	export { TruncationUtilsWithDOM, TruncationUtilsWithCanvas } from '@elastic/eui/src/components/text_truncate/utils';
+
 }
 declare module '@elastic/eui/src/components/toast/toast.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -22753,6 +22981,7 @@ declare module '@elastic/eui/src/components' {
 	export * from '@elastic/eui/src/components/tabs';
 	export * from '@elastic/eui/src/components/text';
 	export * from '@elastic/eui/src/components/text_diff';
+	export * from '@elastic/eui/src/components/text_truncate';
 	export * from '@elastic/eui/src/components/timeline';
 	export * from '@elastic/eui/src/components/title';
 	export * from '@elastic/eui/src/components/toast';

package/i18ntokens.json

@@ -5,14 +5,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 408,
+        "line": 439,
         "column": 16,
-        "index": 12163
+        "index": 13187
       },
       "end": {
-        "line": 408,
+        "line": 439,
         "column": 76,
-        "index": 12223
+        "index": 13247
       }
     },
     "filepath": "src/components/accordion/accordion.tsx"
@@ -437,14 +437,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 180,
+        "line": 152,
         "column": 27,
-        "index": 5788
+        "index": 5056
       },
       "end": {
-        "line": 183,
+        "line": 155,
         "column": 3,
-        "index": 5858
+        "index": 5126
       }
     },
     "filepath": "src/components/collapsible_nav_beta/collapsible_nav_beta.tsx"

package/lib/components/accordion/accordion.js

@@ -17,12 +17,19 @@ var _button = require("../button");
 var _accordion = require("./accordion.styles");
 var _global_styling = require("../../global_styling");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "buttonProps", "buttonElement", "arrowProps", "theme"];
+var _excluded = ["children", "buttonContent", "className", "id", "element", "buttonClassName", "buttonContentClassName", "extraAction", "paddingSize", "borders", "initialIsOpen", "arrowDisplay", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "buttonProps", "buttonElement", "arrowProps", "theme"],
+  _excluded2 = ["paddingSize", "className", "css"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -171,18 +178,24 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         buttonContentClassName = _this$props3.buttonContentClassName,
         extraAction = _this$props3.extraAction,
         paddingSize = _this$props3.paddingSize,
+        borders = _this$props3.borders,
         initialIsOpen = _this$props3.initialIsOpen,
         arrowDisplay = _this$props3.arrowDisplay,
         forceState = _this$props3.forceState,
         isLoading = _this$props3.isLoading,
         isLoadingMessage = _this$props3.isLoadingMessage,
         isDisabled = _this$props3.isDisabled,
-        buttonProps = _this$props3.buttonProps,
+        _buttonProps = _this$props3.buttonProps,
         _this$props3$buttonEl = _this$props3.buttonElement,
         _ButtonElement = _this$props3$buttonEl === void 0 ? 'button' : _this$props3$buttonEl,
         arrowProps = _this$props3.arrowProps,
         theme = _this$props3.theme,
         rest = _objectWithoutProperties(_this$props3, _excluded);
+      var _ref = _buttonProps || {},
+        buttonPaddingSize = _ref.paddingSize,
+        buttonPropsClassName = _ref.className,
+        buttonPropsCss = _ref.css,
+        buttonProps = _objectWithoutProperties(_ref, _excluded2);
 
       // Force button element to be a legend if the element is a fieldset
       var ButtonElement = Element === 'fieldset' ? 'legend' : _ButtonElement;
@@ -193,10 +206,12 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var classes = (0, _classnames.default)('euiAccordion', {
         'euiAccordion-isOpen': this.isOpen
       }, className);
+      var styles = (0, _accordion.euiAccordionStyles)(theme);
+      var cssStyles = [styles.euiAccordion, borders !== 'none' && styles.borders.borders, borders !== 'none' && styles.borders[borders]];
       var childrenClasses = (0, _classnames.default)('euiAccordion__children', {
         'euiAccordion__children-isLoading': isLoading
       });
-      var buttonClasses = (0, _classnames.default)('euiAccordion__button', buttonClassName, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.className);
+      var buttonClasses = (0, _classnames.default)('euiAccordion__button', buttonClassName, buttonPropsClassName);
       var buttonContentClasses = (0, _classnames.default)('euiAccordion__buttonContent', buttonContentClassName);
       var iconButtonClasses = (0, _classnames.default)('euiAccordion__iconButton', {
         'euiAccordion__iconButton-isOpen': this.isOpen,
@@ -205,7 +220,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 
       // Emotion styles
       var buttonStyles = (0, _accordion.euiAccordionButtonStyles)(theme);
-      var cssButtonStyles = [buttonStyles.euiAccordion__button, isDisabled && buttonStyles.disabled, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.css];
+      var cssButtonStyles = [buttonStyles.euiAccordion__button, isDisabled && buttonStyles.disabled].concat(_toConsumableArray(buttonPaddingSize ? [buttonStyles[buttonPaddingSize], arrowDisplay === 'left' && buttonStyles.arrowLeft, arrowDisplay === 'right' && buttonStyles.arrowRight] : []), [buttonPropsCss]);
       var childrenStyles = (0, _accordion.euiAccordionChildrenStyles)(theme);
       var cssChildrenStyles = [childrenStyles.euiAccordion__children, isLoading && childrenStyles.isLoading, paddingSize && paddingSize !== 'none' && childrenStyles[paddingSize]];
       var childWrapperStyles = (0, _accordion.euiAccordionChildWrapperStyles)(theme);
@@ -219,7 +234,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var triggerWrapperStyles = (0, _accordion.euiAccordionTriggerWrapperStyles)();
       var cssTriggerWrapperStyles = [triggerWrapperStyles.euiAccordion__triggerWrapper];
       var iconButton;
-      var buttonId = (_buttonProps$id = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id) !== null && _buttonProps$id !== void 0 ? _buttonProps$id : this.generatedId;
+      var buttonId = (_buttonProps$id = buttonProps.id) !== null && _buttonProps$id !== void 0 ? _buttonProps$id : this.generatedId;
       if (_arrowDisplay !== 'none') {
         iconButton = (0, _react2.jsx)(_button.EuiButtonIcon, _extends({
           color: "text"
@@ -271,7 +286,8 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         className: buttonContentClasses
       }, buttonContent));
       return (0, _react2.jsx)(Element, _extends({
-        className: classes
+        className: classes,
+        css: cssStyles
       }, rest), (0, _react2.jsx)("div", {
         className: "euiAccordion__triggerWrapper",
         css: cssTriggerWrapperStyles
@@ -303,6 +319,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 exports.EuiAccordionClass = EuiAccordionClass;
 _defineProperty(EuiAccordionClass, "defaultProps", {
   initialIsOpen: false,
+  borders: 'none',
   paddingSize: 'none',
   arrowDisplay: 'left',
   isLoading: false,
@@ -327,13 +344,17 @@ EuiAccordionClass.propTypes = {
        */
   buttonClassName: _propTypes.default.string,
   /**
-       * Apply more props to the triggering button
+       * Apply more props to the triggering button.
+       *
+       * Includes optional `paddingSize` prop which allows sizes of `s`, `m`, or `l`.
+       * Note: Padding will not be present on the side closest to the accordion arrow.
        */
   buttonProps: _propTypes.default.shape({
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
-    css: _propTypes.default.any
+    css: _propTypes.default.any,
+    paddingSize: _propTypes.default.oneOf(["s", "m", "l"])
   }),
   /**
        * Class that will apply to the trigger content for the accordion.
@@ -372,6 +393,10 @@ EuiAccordionClass.propTypes = {
        * Placement of the arrow indicator, or 'none' to hide it.
        */
   arrowDisplay: _propTypes.default.oneOf(["left", "right", "none"]),
+  /**
+       * Optional border styling. Defaults to 'none'.
+       */
+  borders: _propTypes.default.oneOf(["horizontal", "all", "none"]),
   /**
        * Control the opening of accordion via prop
        */

package/lib/components/accordion/accordion.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiAccordionTriggerWrapperStyles = exports.euiAccordionSpinnerStyles = exports.euiAccordionOptionalActionStyles = exports.euiAccordionIconButtonStyles = exports.euiAccordionChildrenStyles = exports.euiAccordionChildWrapperStyles = exports.euiAccordionButtonStyles = void 0;
+exports.euiAccordionTriggerWrapperStyles = exports.euiAccordionStyles = exports.euiAccordionSpinnerStyles = exports.euiAccordionOptionalActionStyles = exports.euiAccordionIconButtonStyles = exports.euiAccordionChildrenStyles = exports.euiAccordionChildWrapperStyles = exports.euiAccordionButtonStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
@@ -13,13 +13,34 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
+var euiAccordionStyles = function euiAccordionStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
+  return {
+    euiAccordion: /*#__PURE__*/(0, _react.css)(";label:euiAccordion;"),
+    // Borders
+    borders: {
+      // Prevent border repeats
+      borders: /*#__PURE__*/(0, _react.css)("&+[class*='euiAccordion-borders']{", (0, _global_styling.logicalCSS)('border-top', 'none'), ";};label:borders;"),
+      horizontal: /*#__PURE__*/(0, _react.css)("border-block:", euiTheme.border.thin, ";;label:horizontal;"),
+      all: /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.thin, ";;label:all;")
+    }
+  };
+};
+exports.euiAccordionStyles = euiAccordionStyles;
 var euiAccordionButtonStyles = function euiAccordionButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiAccordion__button: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " align-items:center;display:flex;flex-grow:1;line-height:", euiTheme.size.l, ";", (0, _global_styling.logicalTextAlignCSS)('left'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " &:hover,&:focus{cursor:pointer;text-decoration:underline;};label:euiAccordion__button;"),
     // Triggering button needs separate `disabled` key because the element that renders may not support `:disabled`;
     // Hover pseudo selector for specificity
-    disabled: /*#__PURE__*/(0, _react.css)("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;")
+    disabled: /*#__PURE__*/(0, _react.css)("&,&:hover{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";text-decoration:none;};label:disabled;"),
+    // Optional padding sizes
+    s: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.l, ";;label:l;"),
+    // Remove padding from the accordion button on the side that the arrow is on
+    arrowLeft: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', 0), ";;label:arrowLeft;"),
+    arrowRight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', 0), ";;label:arrowRight;")
   };
 };
 exports.euiAccordionButtonStyles = euiAccordionButtonStyles;
@@ -31,8 +52,8 @@ var _ref4 = process.env.NODE_ENV === "production" ? {
   styles: "align-items:center;display:flex;label:isLoading;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref6) {
+  var euiTheme = _ref6.euiTheme;
   return {
     euiAccordion__children: /*#__PURE__*/(0, _react.css)(";label:euiAccordion__children;"),
     isLoading: _ref4,
@@ -44,8 +65,8 @@ var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref5) {
   };
 };
 exports.euiAccordionChildrenStyles = euiAccordionChildrenStyles;
-var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref6) {
-  var euiTheme = _ref6.euiTheme;
+var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref7) {
+  var euiTheme = _ref7.euiTheme;
   return {
     euiAccordion__childWrapper: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 0), " opacity:0;overflow:hidden;transition:", _global_styling.logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;&:focus{outline:none;};label:euiAccordion__childWrapper;"),
     isOpen: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 'auto'), " opacity:1;visibility:visible;;label:isOpen;")
@@ -60,8 +81,8 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   styles: "transform:rotate(\n      90deg\n    )!important;label:isOpen;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref7) {
-  var euiTheme = _ref7.euiTheme;
+var euiAccordionIconButtonStyles = function euiAccordionIconButtonStyles(_ref8) {
+  var euiTheme = _ref8.euiTheme;
   return {
     euiAccordion__iconButton: /*#__PURE__*/(0, _react.css)("flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), " transform:rotate(\n      0deg\n    )!important;;label:euiAccordion__iconButton;"),
     isOpen: _ref3,
@@ -83,8 +104,8 @@ var euiAccordionOptionalActionStyles = function euiAccordionOptionalActionStyles
   };
 };
 exports.euiAccordionOptionalActionStyles = euiAccordionOptionalActionStyles;
-var euiAccordionSpinnerStyles = function euiAccordionSpinnerStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+var euiAccordionSpinnerStyles = function euiAccordionSpinnerStyles(_ref9) {
+  var euiTheme = _ref9.euiTheme;
   return {
     euiAccordion__spinner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";;label:euiAccordion__spinner;")
   };

package/lib/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.js

@@ -199,13 +199,17 @@ EuiCollapsibleNavGroup.propTypes = {
        */
   buttonClassName: _propTypes.default.string,
   /**
-       * Apply more props to the triggering button
+       * Apply more props to the triggering button.
+       *
+       * Includes optional `paddingSize` prop which allows sizes of `s`, `m`, or `l`.
+       * Note: Padding will not be present on the side closest to the accordion arrow.
        */
   buttonProps: _propTypes.default.shape({
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
-    css: _propTypes.default.any
+    css: _propTypes.default.any,
+    paddingSize: _propTypes.default.oneOf(["s", "m", "l"])
   }),
   /**
        * Class that will apply to the trigger content for the accordion.
@@ -244,6 +248,10 @@ EuiCollapsibleNavGroup.propTypes = {
        * Placement of the arrow indicator, or 'none' to hide it.
        */
   arrowDisplay: _propTypes.default.oneOf(["left", "right", "none"]),
+  /**
+       * Optional border styling. Defaults to 'none'.
+       */
+  borders: _propTypes.default.oneOf(["horizontal", "all", "none"]),
   /**
        * Control the opening of accordion via prop
        */