Use a single child of button to contain items

Signed-off-by: sirugh <rugh@adobe.com>
magento · Mar 29, 2021 · fd05d95 · fd05d95
1 parent 4d14627
commit fd05d95
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 88 deletions.
diff --git a/packages/venia-ui/lib/components/Wishlist/WishlistButton/__tests__/wishlistButton.ce.spec.js b/packages/venia-ui/lib/components/Wishlist/WishlistButton/__tests__/wishlistButton.ce.spec.js
@@ -43,32 +43,36 @@ test('renders the correct tree', () => {
           className="root"
         >
           <button
-            className="wishlistButton"
+            className="button"
             disabled={false}
             onClick={[MockFunction]}
             type="button"
           >
             <span
-              className="root"
+              className="wishlistButtonContent"
             >
-              <svg
-                className="icon"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="root"
               >
-                <path
-                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                />
-              </svg>
+                <svg
+                  className="icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+                  />
+                </svg>
+              </span>
+              Add to Favorites
             </span>
-            Add to Favorites
           </button>
         </div>
     `);
@@ -88,32 +92,36 @@ test('renders after item has been added', () => {
           className="root"
         >
           <button
-            className="wishlistButton_disabled"
+            className="button"
             disabled={true}
             onClick={[MockFunction]}
             type="button"
           >
             <span
-              className="root"
+              className="wishlistButtonContent_disabled"
             >
-              <svg
-                className="icon"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="root"
               >
-                <polyline
-                  points="20 6 9 17 4 12"
-                />
-              </svg>
+                <svg
+                  className="icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <polyline
+                    points="20 6 9 17 4 12"
+                  />
+                </svg>
+              </span>
+              Added to Favorites
             </span>
-            Added to Favorites
           </button>
         </div>
     `);

diff --git a/packages/venia-ui/lib/components/Wishlist/WishlistButton/__tests__/wishlistButton.ee.spec.js b/packages/venia-ui/lib/components/Wishlist/WishlistButton/__tests__/wishlistButton.ee.spec.js
@@ -47,32 +47,36 @@ test('renders the correct tree', () => {
           className="root"
         >
           <button
-            className="wishlistButton"
+            className="button"
             disabled={false}
             onClick={[MockFunction]}
             type="button"
           >
             <span
-              className="root"
+              className="wishlistButtonContent"
             >
-              <svg
-                className="icon"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="root"
               >
-                <path
-                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                />
-              </svg>
+                <svg
+                  className="icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+                  />
+                </svg>
+              </span>
+              Add to Favorites
             </span>
-            Add to Favorites
           </button>
           <WishlistDialog
             isOpen={false}
@@ -104,32 +108,36 @@ test('renders after item has been added', () => {
           className="root"
         >
           <button
-            className="wishlistButton_disabled"
+            className="button"
             disabled={true}
             onClick={[MockFunction]}
             type="button"
           >
             <span
-              className="root"
+              className="wishlistButtonContent_disabled"
             >
-              <svg
-                className="icon"
-                fill="none"
-                height="24"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="root"
               >
-                <polyline
-                  points="20 6 9 17 4 12"
-                />
-              </svg>
+                <svg
+                  className="icon"
+                  fill="none"
+                  height="24"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <polyline
+                    points="20 6 9 17 4 12"
+                  />
+                </svg>
+              </span>
+              Added to Favorites
             </span>
-            Added to Favorites
           </button>
           <WishlistDialog
             isOpen={false}

diff --git a/packages/venia-ui/lib/components/Wishlist/WishlistButton/wishlistButton.ce.js b/packages/venia-ui/lib/components/Wishlist/WishlistButton/wishlistButton.ce.js
@@ -53,14 +53,14 @@ const WishlistButton = props => {
               defaultMessage: 'Add to Favorites'
           });
 
-    let buttonClass;
+    let contentClass;
     let iconClass;
 
     if (isDisabled) {
-        buttonClass = classes.wishlistButton_disabled;
+        contentClass = classes.wishlistButtonContent_disabled;
         iconClass = classes.icon_disabled;
     } else {
-        buttonClass = classes.wishlistButton;
+        contentClass = classes.wishlistButtonContent;
         iconClass = classes.icon;
     }
 
@@ -76,11 +76,13 @@ const WishlistButton = props => {
             <button
                 disabled={isDisabled}
                 type="button"
-                className={buttonClass}
+                className={classes.button}
                 onClick={handleClick}
             >
-                {iconElement}
-                {buttonText}
+                <span className={contentClass}>
+                    {iconElement}
+                    {buttonText}
+                </span>
             </button>
         </div>
     );
@@ -90,12 +92,13 @@ export default WishlistButton;
 
 WishlistButton.propTypes = {
     classes: shape({
+        button: string,
         checkIcon: string,
         icon: string,
         icon_disabled: string,
         root: string,
-        wishlistButton: string,
-        wishlistButton_disabled: string
+        wishlistButtonContent: string,
+        wishlistButtonContent_disabled: string
     }),
     itemOptions: shape({
         entered_options: arrayOf(

diff --git a/packages/venia-ui/lib/components/Wishlist/WishlistButton/wishlistButton.css b/packages/venia-ui/lib/components/Wishlist/WishlistButton/wishlistButton.css
@@ -3,7 +3,10 @@
     justify-content: center;
 }
 
-.wishlistButton {
+.button {
+}
+
+.wishlistButtonContent {
     align-items: center;
     display: grid;
     font-weight: var(--venia-global-fontWeight-semibold);
@@ -15,7 +18,7 @@
     transition-timing-function: var(--venia-global-anim-standard);
 }
 
-.wishlistButton_disabled {
+.wishlistButtonContent_disabled {
     composes: wishlistButton;
     color: #535965;
     text-decoration: none;

diff --git a/packages/venia-ui/lib/components/Wishlist/WishlistButton/wishlistButton.ee.js b/packages/venia-ui/lib/components/Wishlist/WishlistButton/wishlistButton.ee.js
@@ -56,14 +56,14 @@ const WishlistButton = props => {
               defaultMessage: 'Add to Favorites'
           });
 
-    let buttonClass;
+    let contentClass;
     let iconClass;
 
     if (isDisabled) {
-        buttonClass = classes.wishlistButton_disabled;
+        contentClass = classes.wishlistButtonContent_disabled;
         iconClass = classes.icon_disabled;
     } else {
-        buttonClass = classes.wishlistButton;
+        contentClass = classes.wishlistButtonContent;
         iconClass = classes.icon;
     }
 
@@ -80,11 +80,13 @@ const WishlistButton = props => {
                 <button
                     disabled={isDisabled}
                     type="button"
-                    className={buttonClass}
+                    className={classes.button}
                     onClick={handleButtonClick}
                 >
-                    {iconElement}
-                    {buttonText}
+                    <span className={contentClass}>
+                        {iconElement}
+                        {buttonText}
+                    </span>
                 </button>
                 <WishlistDialog
                     isOpen={isModalOpen}
@@ -100,6 +102,7 @@ export default WishlistButton;
 
 WishlistButton.propTypes = {
     classes: shape({
+        button: string,
         checkIcon: string,
         icon: string,
         icon_disabled: string,