fix(datagrid): overflowing elements

packages/components/src/datagrid/button/src/components/osds-button/constants/button-size.js

@@ -0,0 +1,7 @@
+var ODS_BUTTON_SIZE;
+(function (ODS_BUTTON_SIZE) {
+  ODS_BUTTON_SIZE["sm"] = "sm";
+  ODS_BUTTON_SIZE["md"] = "md";
+})(ODS_BUTTON_SIZE || (ODS_BUTTON_SIZE = {}));
+const ODS_BUTTON_SIZES = Object.freeze(Object.values(ODS_BUTTON_SIZE));
+export { ODS_BUTTON_SIZE, ODS_BUTTON_SIZES, };

packages/components/src/datagrid/button/src/components/osds-button/constants/button-text-align.js

@@ -0,0 +1,8 @@
+var ODS_BUTTON_TEXT_ALIGN;
+(function (ODS_BUTTON_TEXT_ALIGN) {
+  ODS_BUTTON_TEXT_ALIGN["center"] = "center";
+  ODS_BUTTON_TEXT_ALIGN["start"] = "start";
+  ODS_BUTTON_TEXT_ALIGN["end"] = "end";
+})(ODS_BUTTON_TEXT_ALIGN || (ODS_BUTTON_TEXT_ALIGN = {}));
+const ODS_BUTTON_TEXT_ALIGNS = Object.freeze(Object.values(ODS_BUTTON_TEXT_ALIGN));
+export { ODS_BUTTON_TEXT_ALIGN, ODS_BUTTON_TEXT_ALIGNS, };

packages/components/src/datagrid/button/src/components/osds-button/constants/button-type.js

@@ -0,0 +1,8 @@
+var ODS_BUTTON_TYPE;
+(function (ODS_BUTTON_TYPE) {
+  ODS_BUTTON_TYPE["button"] = "button";
+  ODS_BUTTON_TYPE["submit"] = "submit";
+  ODS_BUTTON_TYPE["reset"] = "reset";
+})(ODS_BUTTON_TYPE || (ODS_BUTTON_TYPE = {}));
+const ODS_BUTTON_TYPES = Object.freeze(Object.values(ODS_BUTTON_TYPE));
+export { ODS_BUTTON_TYPE, ODS_BUTTON_TYPES, };

packages/components/src/datagrid/button/src/components/osds-button/constants/button-variant.js

@@ -0,0 +1,8 @@
+var ODS_BUTTON_VARIANT;
+(function (ODS_BUTTON_VARIANT) {
+  ODS_BUTTON_VARIANT["flat"] = "flat";
+  ODS_BUTTON_VARIANT["stroked"] = "stroked";
+  ODS_BUTTON_VARIANT["ghost"] = "ghost";
+})(ODS_BUTTON_VARIANT || (ODS_BUTTON_VARIANT = {}));
+const ODS_BUTTON_VARIANTS = Object.freeze(Object.values(ODS_BUTTON_VARIANT));
+export { ODS_BUTTON_VARIANT, ODS_BUTTON_VARIANTS, };

packages/components/src/datagrid/button/src/components/osds-button/constants/default-attributes.js

@@ -0,0 +1,21 @@
+import { ODS_THEME_COLOR_INTENT } from "@ovhcloud/ods-common-theming";
+import { ODS_BUTTON_SIZE } from "./button-size";
+import { ODS_BUTTON_TEXT_ALIGN } from "./button-text-align";
+import { ODS_BUTTON_TYPE } from "./button-type";
+import { ODS_BUTTON_VARIANT } from "./button-variant";
+const DEFAULT_ATTRIBUTE = Object.freeze({
+  circle: false,
+  color: ODS_THEME_COLOR_INTENT.default,
+  contrasted: false,
+  disabled: false,
+  download: undefined,
+  href: undefined,
+  inline: false,
+  rel: undefined,
+  size: ODS_BUTTON_SIZE.md,
+  target: undefined,
+  textAlign: ODS_BUTTON_TEXT_ALIGN.center,
+  type: ODS_BUTTON_TYPE.button,
+  variant: ODS_BUTTON_VARIANT.flat,
+});
+export { DEFAULT_ATTRIBUTE, };

packages/components/src/datagrid/button/src/components/osds-button/core/controller.js

@@ -0,0 +1,85 @@
+import { OdsLogger, OdsWarnComponentAttribute } from "@ovhcloud/ods-common-core";
+import { ODS_THEME_COLOR_INTENT } from "@ovhcloud/ods-common-theming";
+import { ODS_BUTTON_SIZE } from "../constants/button-size";
+import { ODS_BUTTON_TEXT_ALIGN } from "../constants/button-text-align";
+import { ODS_BUTTON_VARIANT } from "../constants/button-variant";
+/**
+ * common controller logic for button component used by the different implementations.
+ * it contains all the glue between framework implementation and the third party service.
+ */
+class OdsButtonController {
+  constructor(component) {
+    this.logger = new OdsLogger('OdsButtonControler');
+    this.component = component;
+  }
+  /**
+   * validating that the color, the size and the variant have correct values
+   * and warn the user if not
+   */
+  validateAttributes() {
+    const logger = this.logger;
+    OdsWarnComponentAttribute({
+      logger,
+      attributeValues: ODS_THEME_COLOR_INTENT,
+      attributeName: 'color',
+      attribute: this.component.color,
+    });
+    OdsWarnComponentAttribute({
+      logger,
+      attributeValues: ODS_BUTTON_SIZE,
+      attributeName: 'size',
+      attribute: this.component.size,
+    });
+    OdsWarnComponentAttribute({
+      logger,
+      attributeValues: ODS_BUTTON_VARIANT,
+      attributeName: 'variant',
+      attribute: this.component.variant,
+    });
+    OdsWarnComponentAttribute({
+      logger,
+      attributeValues: ODS_BUTTON_TEXT_ALIGN,
+      attributeName: 'textAlign',
+      attribute: this.component.textAlign,
+    });
+  }
+  /**
+   * Mutate the component attributes depending on the button shape
+   */
+  mutateAttributes() {
+    if (this.component.circle) {
+      this.component.inline = true;
+    }
+  }
+  /**
+   * Handle Click and KeyPress Event on the button
+   */
+  handleClick(event) {
+    this.logger.log('Click on osds-button');
+    this.submitForm(event);
+  }
+  handleKey(event) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      this.logger.log('Key on osds-button');
+      this.submitForm(event);
+    }
+  }
+  /**
+   * Checking if the button is in a form to add the form submit behaviour on it
+   */
+  submitForm(event) {
+    if (this.component.type && this.component.type === 'submit' && !this.component.disabled) {
+      const form = event.target.closest('form');
+      if (form) {
+        event.preventDefault();
+        const fakeButton = document.createElement('button');
+        fakeButton.type = 'submit';
+        fakeButton.style.display = 'none';
+        form.appendChild(fakeButton);
+        fakeButton.click();
+        fakeButton.remove();
+      }
+    }
+  }
+}
+export { OdsButtonController, };

packages/components/src/datagrid/button/src/components/osds-button/interfaces/attributes.js

@@ -0,0 +1 @@
+export {};