Release 10.12.1

package.json

@@ -98,8 +98,8 @@
 		"stylelint-config-standard": "^34.0.0",
 		"stylelint-declaration-block-no-ignored-properties": "^2.8.0",
 		"terser-webpack-plugin": "^5.3.9",
-		"webpack": "^5.91.0",
-		"webpack-bundle-analyzer": "^4.10.1",
+		"webpack": "^5.92.1",
+		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^5.1.4",
 		"webpack-dev-server": "^4.15.2"
 	},

src/App/Home/constants.js

@@ -4,6 +4,67 @@ import CodeTags from "@components/CodeTags";
 const basename = process.env.basename;
 
 export const changeLogs = [
+	{
+		version: "10.12.1",
+		title: "Minor Bug Fixes & Supports Increase",
+		text: (
+			<>
+				<p>
+					Just like Ulysses, your dedicated developer has been sent on exciting
+					new adventures. But embarking on these new journeys does not mean he
+					will ever forget or stop longing to come back home and taking care of
+					everything he left behind.
+				</p>
+				<p>
+					That's why I could not leave for summer holidays without coming back
+					by the design system and fixing some things I owe our brillant users.
+				</p>
+				<p>
+					<strong>Dialog</strong>
+					<br />
+					Dialog now fails gracefully if no invoker is found (thnx Karoline for
+					the heads up)
+					<br />
+					It can also get multiple invokers attached to it (thanks Martina for
+					the feature request)
+					<br />
+					The styling is also more resilient through the migration from the old
+					dialog syntax
+				</p>
+				<p>
+					<strong>Cards</strong>
+					<br />
+					Cards can now use <CodeTags type="secondary" code="picture" />{" "}
+					elements & <CodeTags type="secondary" code="div.illustration" /> class
+					in lieu of the <CodeTags type="secondary" code="img" /> element. They
+					will be styled just the same.
+				</p>
+				<p>
+					<strong>Dropdown</strong>
+					<br />
+					Thanks to the help of our dear colleague Ludvik Lund, the dropdown
+					initialization script can now receive a specific{" "}
+					<CodeTags type="secondary" code="id" />. So you can now call the init
+					script for a given dropdown and not all of the dropdowns present in
+					the DOM.
+				</p>
+				<p>
+					<strong>Utility classes</strong>
+					<br />
+					Some new utility classes have been added to the list.{" "}
+					<CodeTags type="secondary" code="d-{breakpoint}-grid" /> &{" "}
+					<CodeTags type="secondary" code="d-{breakpoint}-inline-grid" />.
+				</p>
+				<p>
+					<strong>Button</strong>
+					<br />
+					The loading spinner of the button loading will never be squashed when
+					the button gets its width shrinked. No more spinners looking like a
+					rice bean.
+				</p>
+			</>
+		),
+	},
 	{
 		version: "10.12.0",
 		title: "UI Bonanza",

src/App/Utilities/__snapshots__/index.test.js.snap

@@ -697,6 +697,34 @@ exports[`Utilities: index renders 1`] = `
                 display: inline-flex
               </code>
             </div>
+            <div
+              className="d-flex justify-content-between mb-2"
+            >
+              <code
+                className="code-tags code-tags-primary"
+              >
+                d-grid
+              </code>
+              <code
+                className="code-tags code-tags-secondary"
+              >
+                display: grid
+              </code>
+            </div>
+            <div
+              className="d-flex justify-content-between mb-2"
+            >
+              <code
+                className="code-tags code-tags-primary"
+              >
+                d-inline-grid
+              </code>
+              <code
+                className="code-tags code-tags-secondary"
+              >
+                display: inline-grid
+              </code>
+            </div>
           </div>
         </div>
         <div

src/App/Utilities/classes.js

@@ -195,6 +195,14 @@ export const hidingElementClasses = {
 			value: "d-inline-flex",
 			css: "display: inline-flex",
 		},
+		{
+			value: "d-grid",
+			css: "display: grid",
+		},
+		{
+			value: "d-inline-grid",
+			css: "display: inline-grid",
+		},
 	],
 };
 

src/less/core/iconography.less

@@ -623,6 +623,7 @@ i[class^="swepay-icon-"],
 i[class*=" swepay-icon-"] {
 	display: inline-block;
 	height: var(--icon-size, 24px);
+	min-width: var(--icon-size, 24px);
 	width: var(--icon-size, 24px);
 	background-color: currentColor;
 	aspect-ratio: 1 / 1;