BREAKING CHANGE(web): Button has isSymmetrical prop instead of isSqua…

…re #DS-1484
lmc-eu · Oct 17, 2024 · 04a6ebb · 04a6ebb
1 parent a4e9ec5
commit 04a6ebb
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 40 deletions.
diff --git a/packages/web/src/scss/components/Button/README.md b/packages/web/src/scss/components/Button/README.md
@@ -45,7 +45,7 @@ Loading Button:
     <use xlink:href="/icons/svg/sprite.svg#spinner" />
   </svg>
 </button>
-<button type="button" class="Button Button--primary Button--medium Button--square Button--loading" disabled>
+<button type="button" class="Button Button--primary Button--medium Button--symmetrical Button--loading" disabled>
   <span class="accessibility-hidden">Menu</span>
   <svg width="24" height="24" aria-hidden="true">
     <use xlink:href="/icons/svg/sprite.svg#hamburger" />

diff --git a/packages/web/src/scss/components/Button/_Button.scss b/packages/web/src/scss/components/Button/_Button.scss
@@ -66,7 +66,7 @@
     width: 100%;
 }
 
-.Button--square {
+.Button--symmetrical {
     flex: none;
     aspect-ratio: 1;
     padding-inline: 0;

diff --git a/packages/web/src/scss/components/Button/index.html b/packages/web/src/scss/components/Button/index.html
@@ -21,7 +21,7 @@ <h2 class="docs-Heading">Size {{size}}</h2>
               </svg>
               Menu
             </button>
-            <button type="button" class="Button Button--{{color}} Button--{{size}} Button--square">
+            <button type="button" class="Button Button--{{color}} Button--{{size}} Button--symmetrical">
               <span class="accessibility-hidden">Menu</span>
               <svg width="24" height="24" aria-hidden="true">
                 <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />
@@ -55,7 +55,7 @@ <h2 class="docs-Heading">Size {{size}}</h2>
               </svg>
               Menu
             </button>
-            <button type="button" class="Button Button--{{color}} Button--{{size}} Button--square" disabled>
+            <button type="button" class="Button Button--{{color}} Button--{{size}} Button--symmetrical" disabled>
               <span class="accessibility-hidden">Menu</span>
               <svg width="24" height="24" aria-hidden="true">
                 <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />
@@ -97,7 +97,7 @@ <h2 class="docs-Heading">Size {{size}}</h2>
                 <use xlink:href="/assets/icons/svg/sprite.svg#spinner" />
               </svg>
             </button>
-            <button type="button" class="Button Button--{{color}} Button--{{size}} Button--square Button--loading" disabled>
+            <button type="button" class="Button Button--{{color}} Button--{{size}} Button--symmetrical Button--loading" disabled>
               <span class="accessibility-hidden">Menu</span>
               <svg width="24" height="24" aria-hidden="true">
                 <use xlink:href="/assets/icons/svg/sprite.svg#hamburger" />

diff --git a/packages/web/src/scss/components/Footer/README.md b/packages/web/src/scss/components/Footer/README.md
@@ -96,7 +96,7 @@ Use the secondary [Button][button] component to create social media links inside
 <ul class="Flex Flex--row Flex--wrap Flex--alignmentXCenter Flex--alignmentYCenter">
   <!-- Repeat the `<li>` block for each social media link. -->
   <li>
-    <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
+    <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--symmetrical">
       <span class="accessibility-hidden">Facebook</span>
       <svg width="24" height="24" aria-hidden="true">
         <use xlink:href="/assets/icons/svg/sprite.svg#logo-facebook" />
@@ -177,23 +177,23 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
       <!-- Flex with social media links -->
       <ul class="Flex Flex--row Flex--wrap Flex--alignmentXCenter Flex--alignmentYCenter" aria-label="Social media">
         <li>
-          <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
+          <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--symmetrical">
             <span class="accessibility-hidden">Facebook</span>
             <svg width="24" height="24" aria-hidden="true">
               <use xlink:href="/assets/icons/svg/sprite.svg#logo-facebook" />
             </svg>
           </a>
         </li>
         <li>
-          <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
+          <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--symmetrical">
             <span class="accessibility-hidden">X</span>
             <svg width="24" height="24" aria-hidden="true">
               <use xlink:href="/assets/icons/svg/sprite.svg#logo-x" />
             </svg>
           </a>
         </li>
         <li>
-          <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--square">
+          <a href="https://www.example.com" class="Button Button--secondary Button--medium Button--symmetrical">
             <span class="accessibility-hidden">YouTube</span>
             <svg width="24" height="24" aria-hidden="true">
               <use xlink:href="/assets/icons/svg/sprite.svg#logo-youtube" />

diff --git a/packages/web/src/scss/components/Footer/index.html b/packages/web/src/scss/components/Footer/index.html
@@ -210,39 +210,39 @@ <h3 class="typography-heading-xsmall-semibold mb-700" id="footer-navigation-sect
           <!-- Flex with social media links -->
           <ul class="Flex Flex--row Flex--wrap Flex--alignmentXCenter Flex--alignmentYCenter">
             <li>
-              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
+              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--symmetrical">
                 <span class="accessibility-hidden">Facebook</span>
                 <svg width="24" height="24" aria-hidden="true">
                   <use xlink:href="/assets/icons/svg/sprite.svg#logo-facebook" />
                 </svg>
               </a>
             </li>
             <li>
-              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
+              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--symmetrical">
                 <span class="accessibility-hidden">X</span>
                 <svg width="24" height="24" aria-hidden="true">
                   <use xlink:href="/assets/icons/svg/sprite.svg#logo-x" />
                 </svg>
               </a>
             </li>
             <li>
-              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
+              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--symmetrical">
                 <span class="accessibility-hidden">YouTube</span>
                 <svg width="24" height="24" aria-hidden="true">
                   <use xlink:href="/assets/icons/svg/sprite.svg#logo-youtube" />
                 </svg>
               </a>
             </li>
             <li>
-              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
+              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--symmetrical">
                 <span class="accessibility-hidden">Google</span>
                 <svg width="24" height="24" aria-hidden="true">
                   <use xlink:href="/assets/icons/svg/sprite.svg#logo-google" />
                 </svg>
               </a>
             </li>
             <li>
-              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--square">
+              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--symmetrical">
                 <span class="accessibility-hidden">LinkedIn</span>
                 <svg width="24" height="24" aria-hidden="true">
                   <use xlink:href="/assets/icons/svg/sprite.svg#logo-linkedin" />

diff --git a/packages/web/src/scss/components/Header/README.md b/packages/web/src/scss/components/Header/README.md
@@ -374,7 +374,7 @@ And the complete Header Dialog:
   <div class="HeaderMobileActions">
     <button
       type="button"
-      class="Button Button--secondary Button--medium Button--square"
+      class="Button Button--secondary Button--medium Button--symmetrical"
       data-spirit-toggle="offcanvas"
       data-spirit-target="#header-dialog-example-1"
       aria-controls="header-dialog-example-1"

diff --git a/packages/web/src/scss/components/Header/index.html b/packages/web/src/scss/components/Header/index.html
@@ -34,7 +34,7 @@ <h2 class="docs-Heading">Header with Actions</h2>
       <div class="HeaderMobileActions">
         <button
           type="button"
-          class="Button Button--secondary Button--medium Button--square"
+          class="Button Button--secondary Button--medium Button--symmetrical"
           data-spirit-toggle="offcanvas"
           data-spirit-target="#header-dialog-example-1"
           aria-controls="header-dialog-example-1"
@@ -164,7 +164,7 @@ <h2 class="docs-Heading">Header with Actions and Header Dialog</h2>
       <div class="HeaderMobileActions">
         <button
           type="button"
-          class="Button Button--secondary Button--medium Button--square"
+          class="Button Button--secondary Button--medium Button--symmetrical"
           data-spirit-toggle="offcanvas"
           data-spirit-target="#header-dialog-example-2-main-navigation"
           aria-controls="header-dialog-example-2-main-navigation"
@@ -218,7 +218,7 @@ <h2 class="docs-Heading">Header with Actions and Header Dialog</h2>
         >
           Marian
         </button>
-        <button type="button" class="Button Button--secondary Button--square Button--medium">
+        <button type="button" class="Button Button--secondary Button--symmetrical Button--medium">
           <svg width="24" height="24" aria-hidden="true">
             <use xlink:href="/assets/icons/svg/sprite.svg#search" />
           </svg>

diff --git a/packages/web/src/scss/components/Modal/README.md b/packages/web/src/scss/components/Modal/README.md
@@ -105,7 +105,7 @@ and allows users to easily close it.
   <h2 id="modal-example-title" class="ModalHeader__title">Modal Title</h2>
   <button
     type="button"
-    class="Button Button--tertiary Button--square Button--medium"
+    class="Button Button--tertiary Button--symmetrical Button--medium"
     data-spirit-dismiss="modal"
     data-spirit-target="#modal-example"
     aria-controls="modal-example"
@@ -370,7 +370,7 @@ When you put it all together:
       <h2 id="modal-example-title" class="ModalHeader__title">Modal Title</h2>
       <button
         type="button"
-        class="Button Button--tertiary Button--square Button--medium"
+        class="Button Button--tertiary Button--symmetrical Button--medium"
         data-spirit-dismiss="modal"
         data-spirit-target="#modal-example"
         aria-controls="modal-example"

diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html
@@ -71,7 +71,7 @@ <h2 class="docs-Heading">Modal</h2>
           <h2 id="example-basic-title" class="ModalHeader__title">Modal Title</h2>
           <button
             type="button"
-            class="Button Button--tertiary Button--square Button--medium"
+            class="Button Button--tertiary Button--symmetrical Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example-basic"
             aria-controls="example-basic"
@@ -208,7 +208,7 @@ <h2 id="example-basic-title" class="ModalHeader__title">Modal Title</h2>
           <h2 id="example-form-title" class="ModalHeader__title">Modal with a Form</h2>
           <button
             type="button"
-            class="Button Button--tertiary Button--square Button--medium"
+            class="Button Button--tertiary Button--symmetrical Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example-form"
             aria-controls="example-form"
@@ -283,7 +283,7 @@ <h2 id="example-form-title" class="ModalHeader__title">Modal with a Form</h2>
           <h2 id="example-dropdown-title" class="ModalHeader__title">Modal Title</h2>
           <button
             type="button"
-            class="Button Button--tertiary Button--square Button--medium"
+            class="Button Button--tertiary Button--symmetrical Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example-dropdown"
             aria-controls="example-dropdown"
@@ -398,7 +398,7 @@ <h2 id="example-long-content-title" class="ModalHeader__title">
           </h2>
           <button
             type="button"
-            class="Button Button--tertiary Button--square Button--medium"
+            class="Button Button--tertiary Button--symmetrical Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example-long-content"
             aria-controls="example-long-content"
@@ -483,7 +483,7 @@ <h2 id="example-scrolling-modal-title" class="ModalHeader__title">
           </h2>
           <button
             type="button"
-            class="Button Button--tertiary Button--square Button--medium"
+            class="Button Button--tertiary Button--symmetrical Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example-scrolling-modal"
             aria-controls="example-scrolling-modal"
@@ -578,7 +578,7 @@ <h2 id="example-scroll-view-title" class="ModalHeader__title">
           </h2>
           <button
             type="button"
-            class="Button Button--tertiary Button--square Button--medium"
+            class="Button Button--tertiary Button--symmetrical Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example-scroll-view"
             aria-controls="example-scroll-view"
@@ -709,7 +709,7 @@ <h2 id="example-scroll-view-title" class="ModalHeader__title">
           <h2 id="example-custom-height-title" class="ModalHeader__title">Modal with Custom Height</h2>
           <button
             type="button"
-            class="Button Button--tertiary Button--square Button--medium"
+            class="Button Button--tertiary Button--symmetrical Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example-custom-height"
             aria-controls="example-custom-height"
@@ -1009,7 +1009,7 @@ <h2 class="docs-Heading">Stacking Modals</h2>
           <h2 id="example-stacking-parent-title" class="ModalHeader__title">Modal Title</h2>
           <button
             type="button"
-            class="Button Button--tertiary Button--square Button--medium"
+            class="Button Button--tertiary Button--symmetrical Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example-stacking-parent"
             aria-controls="example-stacking-parent"
@@ -1068,7 +1068,7 @@ <h2 id="example-stacking-parent-title" class="ModalHeader__title">Modal Title</h
           <h2 id="example-stacking-nested-title" class="ModalHeader__title">Stacked Modal Title</h2>
           <button
             type="button"
-            class="Button Button--tertiary Button--square Button--medium"
+            class="Button Button--tertiary Button--symmetrical Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example-stacking-nested"
             aria-controls="example-stacking-nested"
@@ -1156,7 +1156,7 @@ <h2 class="docs-Heading">Disabled Backdrop Click</h2>
           <h2 id="example-disabled-backdrop-click-title" class="ModalHeader__title">Modal Title</h2>
           <button
             type="button"
-            class="Button Button--tertiary Button--square Button--medium"
+            class="Button Button--tertiary Button--symmetrical Button--medium"
             data-spirit-dismiss="modal"
             data-spirit-target="#example-disabled-backdrop-click"
             aria-controls="example-disabled-backdrop-click"

diff --git a/packages/web/src/scss/components/Offcanvas/README.md b/packages/web/src/scss/components/Offcanvas/README.md
@@ -22,7 +22,7 @@ The `data-spirit-target` attribute accepts a CSS selector to apply the Offcanvas
 ```html
 <button
   type="button"
-  class="Button Button--inverted Button--medium Button--square"
+  class="Button Button--inverted Button--medium Button--symmetrical"
   data-spirit-toggle="offcanvas"
   data-spirit-target="#offcanvas-example"
   aria-controls="offcanvas-example"

diff --git a/packages/web/src/scss/components/Pagination/README.md b/packages/web/src/scss/components/Pagination/README.md
@@ -36,7 +36,7 @@ First item selected:
       </a>
     </li>
     <li class="Pagination__item">
-      <a href="#" class="Button Button--secondary Button--square">
+      <a href="#" class="Button Button--secondary Button--symmetrical">
         <svg width="24" height="24" aria-hidden="true">
           <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
         </svg>
@@ -53,7 +53,7 @@ Middle item selected:
 <nav role="navigation" aria-label="Page navigation">
   <ul class="Pagination">
     <li class="Pagination__item">
-      <a href="#" class="Button Button--secondary Button--square">
+      <a href="#" class="Button Button--secondary Button--symmetrical">
         <svg width="24" height="24" aria-hidden="true">
           <use xlink:href="/icons/svg/sprite.svg#chevron-left" />
         </svg>
@@ -91,7 +91,7 @@ Middle item selected:
       </a>
     </li>
     <li class="Pagination__item">
-      <a href="#" class="Button Button--secondary Button--square">
+      <a href="#" class="Button Button--secondary Button--symmetrical">
         <svg width="24" height="24" aria-hidden="true">
           <use xlink:href="/icons/svg/sprite.svg#chevron-right" />
         </svg>
@@ -108,7 +108,7 @@ Last item selected:
 <nav role="navigation" aria-label="Page navigation">
   <ul class="Pagination">
     <li class="Pagination__item">
-      <a href="#" class="Button Button--secondary Button--square">
+      <a href="#" class="Button Button--secondary Button--symmetrical">
         <svg width="24" height="24" aria-hidden="true">
           <use xlink:href="/icons/svg/sprite.svg#chevron-left" />
         </svg>

diff --git a/packages/web/src/scss/components/Pagination/index.html b/packages/web/src/scss/components/Pagination/index.html
@@ -43,7 +43,7 @@ <h2 class="docs-Heading">Pagination Current First</h2>
           </a>
         </li>
         <li class="Pagination__item">
-          <a href="#" class="Button Button--secondary Button--medium Button--square">
+          <a href="#" class="Button Button--secondary Button--medium Button--symmetrical">
             <svg width="24" height="24" aria-hidden="true">
               <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
             </svg>
@@ -68,7 +68,7 @@ <h2 class="docs-Heading">Pagination Current Middle</h2>
     <nav role="navigation" aria-label="Page navigation">
       <ul class="Pagination">
         <li class="Pagination__item">
-          <a href="#" class="Button Button--secondary Button--medium Button--square">
+          <a href="#" class="Button Button--secondary Button--medium Button--symmetrical">
             <svg width="24" height="24" aria-hidden="true">
               <use xlink:href="/assets/icons/svg/sprite.svg#chevron-left" />
             </svg>
@@ -110,7 +110,7 @@ <h2 class="docs-Heading">Pagination Current Middle</h2>
           </a>
         </li>
         <li class="Pagination__item">
-          <a href="#" class="Button Button--secondary Button--medium Button--square">
+          <a href="#" class="Button Button--secondary Button--medium Button--symmetrical">
             <svg width="24" height="24" aria-hidden="true">
               <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
             </svg>
@@ -133,7 +133,7 @@ <h2 class="docs-Heading">Pagination Current Last</h2>
     <nav role="navigation" aria-label="Page navigation">
       <ul class="Pagination">
         <li class="Pagination__item">
-          <a href="#" class="Button Button--secondary Button--medium Button--square">
+          <a href="#" class="Button Button--secondary Button--medium Button--symmetrical">
             <svg width="24" height="24" aria-hidden="true">
               <use xlink:href="/assets/icons/svg/sprite.svg#chevron-left" />
             </svg>
@@ -224,7 +224,7 @@ <h2 class="docs-Heading">Pagination Current First Centered</h2>
           </a>
         </li>
         <li class="Pagination__item">
-          <a href="#" class="Button Button--secondary Button--medium Button--square">
+          <a href="#" class="Button Button--secondary Button--medium Button--symmetrical">
             <svg width="24" height="24" aria-hidden="true">
               <use xlink:href="/assets/icons/svg/sprite.svg#chevron-right" />
             </svg>