Merge pull request #2791 from infor-design/2740-layout-grid-maxwidth

2740 - Fix maxWidth recursion error in IdsLayoutGrid
infor-design · Sep 4, 2024 · 1475c02 · 1475c02
2 parents c7894e2 + 5218a86
commit 1475c02
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 10 deletions.
diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -26,6 +26,7 @@
 - `[Datagrid]` Fixed bug editor dropdown can't be re-opened after closing. ([#2589](https://github.com/infor-design/enterprise-wc/issues/2589))
 - `[Dropdown]` Made the `typeahead` setting true by default. ([#2770](https://github.com/infor-design/enterprise-wc/issues/2770))
 - `[Homepage]` Converted home page tests to playwright. ([#1940](https://github.com/infor-design/enterprise-wc/issues/1940))
+- `[LayoutGrid]` Fixed recursion issue in maxWidth setter. ([#2470]https://github.com/infor-design/enterprise-wc/issues/2470)
 - `[Listbuilder]` Fixed buggy builder styles. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
 - `[Listbuilder]` Fixed an issue where clicking the row in the wrong spot would edit the wrong row. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
 - `[Locale]` Fixed translation issue of `small` into Spanish. ([#8962](https://github.com/infor-design/enterprise-wc/issues/8962))

diff --git a/src/components/ids-layout-grid/demos/example.html b/src/components/ids-layout-grid/demos/example.html
@@ -493,6 +493,88 @@
         </ids-layout-grid-cell>
       </ids-layout-grid>
 
+      <ids-layout-grid
+        auto-fit="true"
+        padding="md"
+      >
+        <ids-layout-grid-cell>
+          <ids-text font-size="12" type="h1">Contained Grid (maxWidth (500px) / margin auto)</ids-text>
+        </ids-layout-grid-cell>
+      </ids-layout-grid>
+
+      <ids-layout-grid
+        id="eight-column-grid-max-width-2"
+        cols="8"
+        padding-x="md"
+        justify-content="center"
+        max-width="500px"
+        margin="auto"
+      >
+        <ids-layout-grid-cell col-span="1" fill height="176px">
+          <ids-text font-size="12">1 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="1" fill height="176px">
+          <ids-text font-size="12">1 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="1" fill height="176px">
+          <ids-text font-size="12">1 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="1" fill height="176px">
+          <ids-text font-size="12">1 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="1" fill height="176px">
+          <ids-text font-size="12">1 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="1" fill height="176px">
+          <ids-text font-size="12">1 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="1" fill height="176px">
+          <ids-text font-size="12">1 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="1" fill height="176px">
+          <ids-text font-size="12">1 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="2" fill height="176px">
+          <ids-text font-size="12">2 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="2" fill height="176px">
+          <ids-text font-size="12">2 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="2" fill height="176px">
+          <ids-text font-size="12">2 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="2" fill height="176px">
+          <ids-text font-size="12">2 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="4" fill height="176px">
+          <ids-text font-size="12">4 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="4" fill height="176px">
+          <ids-text font-size="12">4 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="5" fill height="176px">
+          <ids-text font-size="12">5 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="3" fill height="176px">
+          <ids-text font-size="12">3 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="6" fill height="176px">
+          <ids-text font-size="12">6 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="2" fill height="176px">
+          <ids-text font-size="12">2 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="7" fill height="176px">
+          <ids-text font-size="12">7 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="1" fill height="176px">
+          <ids-text font-size="12">1 Col</ids-text>
+        </ids-layout-grid-cell>
+        <ids-layout-grid-cell col-span="8" fill height="176px">
+          <ids-text font-size="12">8 Col</ids-text>
+        </ids-layout-grid-cell>
+      </ids-layout-grid>
+
       <ids-layout-grid
         auto-fit="true"
         padding="md"

diff --git a/src/components/ids-layout-grid/ids-layout-grid.ts b/src/components/ids-layout-grid/ids-layout-grid.ts
@@ -386,17 +386,22 @@ export default class IdsLayoutGrid extends IdsElement {
    * Set the maxWidth attribute
    * @param {string | null} value The value of the max-width [null, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', '###px']
    */
-  set maxWidth(value: string | null) {
-    if (!value || MAX_WIDTH_SIZES.indexOf(value as any) <= 0) {
-      this.removeAttribute(attributes.MAX_WIDTH);
-
-      // If custom value is set use custom property
-      if (value?.endsWith('px')) {
-        this.style.setProperty('--max-width', value);
-        this.setAttribute(attributes.MAX_WIDTH, value);
-      }
-    } else {
+  set maxWidth(value: string | null | any) {
+    if (MAX_WIDTH_SIZES.indexOf(value as any) >= 0) {
+      this.setAttribute(attributes.MAX_WIDTH, value);
+      this.style.removeProperty('--max-width');
+    } else if (/^\d+$/.test(value)) {
+      // If the value is a number without a unit, add 'px'
+      value = `${value}px`;
+      this.style.setProperty('--max-width', value);
+      this.setAttribute(attributes.MAX_WIDTH, value);
+    } else if (value?.endsWith('px')) {
+      // If the value already has a 'px' unit, use it directly
+      this.style.setProperty('--max-width', value);
       this.setAttribute(attributes.MAX_WIDTH, value);
+    } else {
+      // If the value is invalid or null, remove the attribute and the custom property
+      this.removeAttribute(attributes.MAX_WIDTH);
       this.style.removeProperty('--max-width');
     }
   }