@elastic/eui 76.2.0 → 76.4.0

package/test-env/components/key_pad_menu/key_pad_menu.js

@@ -21,6 +21,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _form_label = require("../form/form_label/form_label");
 
+var _services = require("../../services");
+
+var _key_pad_menu = require("./key_pad_menu.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "checkable"];
@@ -31,13 +35,20 @@ var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
       checkable = _ref.checkable,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiKeyPadMenu', className);
-  var legend = (0, _typeof2.default)(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({}, checkable.legendProps, {
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _key_pad_menu.euiKeyPadMenuStyles)(theme);
+  var cssStyles = [styles.euiKeyPadMenu];
+  var legend = (0, _typeof2.default)(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({
+    css: styles.euiKeyPadMenu__legend
+  }, checkable.legendProps, {
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? (0, _react2.jsx)("fieldset", (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     "aria-label": (0, _typeof2.default)(checkable) === 'object' ? checkable.ariaLegend : undefined
   }, rest), legend, children) : (0, _react2.jsx)("ul", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), _react.default.Children.map(children, function (child) {
     return (0, _react2.jsx)("li", null, child);

package/test-env/components/key_pad_menu/key_pad_menu.styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiKeyPadMenuVariables = exports.euiKeyPadMenuStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../global_styling");
+
+/*
+ * 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 euiKeyPadMenuVariables = function euiKeyPadMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiKeyPadMenuSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 6;
+    }),
+    euiKeyPadMenuMarginSize: euiTheme.size.xs
+  };
+};
+
+exports.euiKeyPadMenuVariables = euiKeyPadMenuVariables;
+
+var euiKeyPadMenuStyles = function euiKeyPadMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  var _euiKeyPadMenuVariabl = euiKeyPadMenuVariables(euiThemeContext),
+      euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize,
+      euiKeyPadMenuMarginSize = _euiKeyPadMenuVariabl.euiKeyPadMenuMarginSize;
+
+  return {
+    euiKeyPadMenu: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;flex-wrap:wrap;", (0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)([euiKeyPadMenuSize, euiKeyPadMenuMarginSize], function (x, y) {
+      return x * 3 + y * 3;
+    })), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " gap:", euiKeyPadMenuMarginSize, ";;label:euiKeyPadMenu;"),
+    // Checkable = Fieldset and Legend
+    euiKeyPadMenu__legend: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiKeyPadMenu__legend;")
+  };
+};
+
+exports.euiKeyPadMenuStyles = euiKeyPadMenuStyles;

package/src/components/key_pad_menu/_key_pad_menu.scss

@@ -1,22 +0,0 @@
-/**
- * 1. Default to grid of 3
- */
-.euiKeyPadMenu {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: ($euiKeyPadMenuSize * 3) + ($euiKeyPadMenuMarginSize * 3);
-  max-width: 100%;
-  // Using negative margins on the whole menu negates the ones on the (last) items no matter how many exist per row
-  margin-bottom: -$euiKeyPadMenuMarginSize;
-  margin-right: -$euiKeyPadMenuMarginSize;
-
-  legend {
-    margin-bottom: $euiSizeS;
-  }
-
-  > *:not(legend) {
-    margin-bottom: $euiKeyPadMenuMarginSize;
-    margin-right: $euiKeyPadMenuMarginSize;
-  }
-}