Add enclosing root div to button components and pack content around c…

…enter. Signed-off-by: sirugh <rugh@adobe.com>
magento · Mar 29, 2021 · 2e5ee88 · 2e5ee88
1 parent de93f85
commit 2e5ee88
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 26 deletions.
diff --git a/packages/venia-ui/lib/components/Wishlist/WishlistButton/wishlistButton.ce.js b/packages/venia-ui/lib/components/Wishlist/WishlistButton/wishlistButton.ce.js
@@ -72,23 +72,30 @@ const WishlistButton = props => {
     const iconElement = isItemAdded ? CheckIcon : HeartIcon;
 
     return (
-        <button
-            disabled={isDisabled}
-            type="button"
-            className={buttonClass}
-            onClick={handleClick}
-        >
-            {iconElement}
-            {buttonText}
-        </button>
+        <div className={classes.root}>
+            <button
+                disabled={isDisabled}
+                type="button"
+                className={buttonClass}
+                onClick={handleClick}
+            >
+                {iconElement}
+                {buttonText}
+            </button>
+        </div>
     );
 };
 
 export default WishlistButton;
 
 WishlistButton.propTypes = {
     classes: shape({
-        wishlistButton: string
+        checkIcon: string,
+        icon: string,
+        icon_disabled: string,
+        root: string,
+        wishlistButton: string,
+        wishlistButton_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
@@ -1,9 +1,14 @@
+.root {
+    display: grid;
+    justify-content: center;
+}
+
 .wishlistButton {
     align-items: center;
     display: grid;
-    grid-auto-flow: column;
     font-weight: var(--venia-global-fontWeight-semibold);
     gap: 0.25rem;
+    grid-auto-flow: column;
     text-decoration: underline;
     transition-property: color;
     transition-duration: 256ms;

diff --git a/packages/venia-ui/lib/components/Wishlist/WishlistButton/wishlistButton.ee.js b/packages/venia-ui/lib/components/Wishlist/WishlistButton/wishlistButton.ee.js
@@ -76,20 +76,22 @@ const WishlistButton = props => {
 
     return (
         <Fragment>
-            <button
-                disabled={isDisabled}
-                type="button"
-                className={buttonClass}
-                onClick={handleButtonClick}
-            >
-                {iconElement}
-                {buttonText}
-            </button>
-            <WishlistDialog
-                isOpen={isModalOpen}
-                onClose={handleModalClose}
-                itemOptions={props.itemOptions}
-            />
+            <div className={classes.root}>
+                <button
+                    disabled={isDisabled}
+                    type="button"
+                    className={buttonClass}
+                    onClick={handleButtonClick}
+                >
+                    {iconElement}
+                    {buttonText}
+                </button>
+                <WishlistDialog
+                    isOpen={isModalOpen}
+                    onClose={handleModalClose}
+                    itemOptions={props.itemOptions}
+                />
+            </div>
         </Fragment>
     );
 };
@@ -98,7 +100,12 @@ export default WishlistButton;
 
 WishlistButton.propTypes = {
     classes: shape({
-        wishlistButton: string
+        checkIcon: string,
+        icon: string,
+        icon_disabled: string,
+        root: string,
+        wishlistButton: string,
+        wishlistButton_disabled: string
     }),
     itemOptions: shape({
         entered_options: arrayOf(