Merge branch 'feature/button-inverted-disabled' into q/1.0

scality · Nov 6, 2019 · 61695d1 · 61695d1
2 parents 94a28e2 + 935ce02
commit 61695d1
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 126 deletions.
diff --git a/src/lib/components/button/Button.component.js b/src/lib/components/button/Button.component.js
@@ -26,7 +26,6 @@ type Props = {
 export const ButtonStyled = styled.button`
   -webkit-appearance: none;
   -moz-appearance: none;
-  cursor: pointer;
   position: relative;
   display: inline-flex;
   user-select: none;
@@ -128,31 +127,6 @@ export const ButtonStyled = styled.button`
     `;
   }}
 
-
-${props => {
-  const brandingTheme = mergeTheme(props.theme, defaultTheme);
-  const brandLighter = lighten(0.3, brandingTheme[props.variant]).toString();
-
-  return css`
-    ${props.disabled
-      ? `
-          box-shadow: none;
-          pointer-events: none;
-          &,
-          &:hover,
-          &:focus,
-          &:active {
-            cursor: default;
-            background-color: ${brandLighter};
-            border-color: ${brandLighter};
-            color: ${defaultTheme.white};
-            box-shadow: none;
-          };
-        `
-      : null}
-  `;
-}}
-
 ${props => {
   return css`
     ${props.isLoading
@@ -177,7 +151,24 @@ ${props => {
 
 ${props => {
   const brandingTheme = mergeTheme(props.theme, defaultTheme);
-  const brandLighter = lighten(0.3, brandingTheme[props.variant]).toString();
+  const brandLighter = lighten(0.2, brandingTheme[props.variant]).toString();
+
+  return css`
+    ${props.disabled
+      ? `
+          box-shadow: none;
+          pointer-events: none;
+          background-color: ${brandLighter};
+          border-color: ${brandLighter};
+          color: ${defaultTheme.white};
+        `
+      : null}
+  `;
+}}
+
+${props => {
+  const brandingTheme = mergeTheme(props.theme, defaultTheme);
+  const brandLighter = lighten(0.2, brandingTheme[props.variant]).toString();
   const brandLight = lighten(0.1, brandingTheme[props.variant]).toString();
 
   return css`
@@ -187,7 +178,7 @@ ${props => {
         height: auto;
         border: none;
         background-color: transparent;
-        color: ${brandingTheme[props.variant]};
+        color: ${props.disabled ? brandLight : brandingTheme[props.variant]};
         
         &:hover{      
           background-color: transparent;

diff --git a/src/lib/components/button/__snapshots__/Button.component.test.js.snap b/src/lib/components/button/__snapshots__/Button.component.test.js.snap
@@ -10,7 +10,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Default
   </h3>
   <button
-    className="sc-bxivhb fKJuJK sc-button"
+    className="sc-bxivhb fQBYbA sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -31,7 +31,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb gxZvuR sc-button"
+    className="sc-bxivhb eMOozZ sc-button"
     disabled={false}
     size="small"
     title=""
@@ -52,7 +52,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hMzQXI sc-button"
+    className="sc-bxivhb zLgyQ sc-button"
     data-cy="default_button"
     disabled={false}
     size="base"
@@ -74,7 +74,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dApMWo sc-button"
+    className="sc-bxivhb kWiOHt sc-button"
     disabled={false}
     size="large"
     title=""
@@ -95,7 +95,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb fWtgix sc-button"
+    className="sc-bxivhb efIzbw sc-button"
     disabled={false}
     size="larger"
     title=""
@@ -121,7 +121,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Variant
   </h3>
   <button
-    className="sc-bxivhb hMzQXI sc-button"
+    className="sc-bxivhb zLgyQ sc-button"
     disabled={false}
     size="base"
     title=""
@@ -142,7 +142,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dqKujv sc-button"
+    className="sc-bxivhb krzuoo sc-button"
     disabled={false}
     size="base"
     title=""
@@ -163,7 +163,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dHrFjj sc-button"
+    className="sc-bxivhb cqZXOa sc-button"
     disabled={false}
     size="base"
     title=""
@@ -184,7 +184,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hlfXUS sc-button"
+    className="sc-bxivhb klwTmP sc-button"
     disabled={false}
     size="base"
     title=""
@@ -205,7 +205,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb cVVPvQ sc-button"
+    className="sc-bxivhb hREJhO sc-button"
     disabled={false}
     size="base"
     title=""
@@ -226,7 +226,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dETwpl sc-button"
+    className="sc-bxivhb cqppyq sc-button"
     disabled={false}
     size="base"
     title=""
@@ -252,7 +252,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Outlined
   </h3>
   <button
-    className="sc-bxivhb kxYbdf sc-button"
+    className="sc-bxivhb dHJDHT sc-button"
     disabled={false}
     onClick={[Function]}
     size="base"
@@ -279,7 +279,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Disabled
   </h3>
   <button
-    className="sc-bxivhb lphces sc-button"
+    className="sc-bxivhb iXtJNQ sc-button"
     disabled={true}
     onClick={[Function]}
     size="base"
@@ -300,13 +300,42 @@ exports[`Storyshots Button Default 1`] = `
       </span>
     </span>
   </button>
+  <button
+    className="sc-bxivhb dThNZe sc-button"
+    disabled={true}
+    size="larger"
+    title=""
+    type="button"
+  >
+    <span
+      className="sc-bZQynM iMWVsx"
+    >
+      <span
+        className="sc-button-text"
+      >
+        <span
+          className="sc-ifAKCX bccMeP"
+          size="larger"
+        >
+          <i
+            className="fas fa-star"
+          />
+        </span>
+        <span
+          className="sc-EHOje boinrg"
+        >
+          
+        </span>
+      </span>
+    </span>
+  </button>
   <h3
     className="sc-dnqmqq gBKyfL"
   >
     Button Link
   </h3>
   <a
-    className="sc-gzVnrw dxIUDu sc-button"
+    className="sc-gzVnrw jfvdNb sc-button"
     disabled={false}
     href="/"
     size="base"
@@ -324,7 +353,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Loading
   </h3>
   <button
-    className="sc-bxivhb hdwVjf sc-button"
+    className="sc-bxivhb fwDfLP sc-button"
     disabled={true}
     size="base"
     title=""
@@ -482,7 +511,7 @@ exports[`Storyshots Button Default 1`] = `
     Button Text Icon
   </h3>
   <button
-    className="sc-bxivhb fKJuJK sc-button"
+    className="sc-bxivhb fQBYbA sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -511,7 +540,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb gxZvuR sc-button"
+    className="sc-bxivhb eMOozZ sc-button"
     disabled={false}
     size="small"
     title=""
@@ -540,7 +569,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hMzQXI sc-button"
+    className="sc-bxivhb zLgyQ sc-button"
     disabled={false}
     size="base"
     title=""
@@ -569,7 +598,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dApMWo sc-button"
+    className="sc-bxivhb kWiOHt sc-button"
     disabled={false}
     size="large"
     title=""
@@ -598,7 +627,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb fWtgix sc-button"
+    className="sc-bxivhb efIzbw sc-button"
     disabled={false}
     size="larger"
     title=""
@@ -632,7 +661,7 @@ exports[`Storyshots Button Default 1`] = `
     Icon Button
   </h3>
   <button
-    className="sc-bxivhb fKJuJK sc-button"
+    className="sc-bxivhb fQBYbA sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -661,7 +690,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb gxZvuR sc-button"
+    className="sc-bxivhb eMOozZ sc-button"
     disabled={false}
     size="small"
     title=""
@@ -690,7 +719,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb hMzQXI sc-button"
+    className="sc-bxivhb zLgyQ sc-button"
     disabled={false}
     size="base"
     title=""
@@ -719,7 +748,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb dApMWo sc-button"
+    className="sc-bxivhb kWiOHt sc-button"
     disabled={false}
     size="large"
     title=""
@@ -748,7 +777,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb fWtgix sc-button"
+    className="sc-bxivhb efIzbw sc-button"
     disabled={false}
     size="larger"
     title=""
@@ -782,7 +811,7 @@ exports[`Storyshots Button Default 1`] = `
     Icon Button Inverted
   </h3>
   <button
-    className="sc-bxivhb fRmOTD sc-button"
+    className="sc-bxivhb bFdGTW sc-button"
     disabled={false}
     size="smaller"
     title=""
@@ -811,7 +840,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb LLhWa sc-button"
+    className="sc-bxivhb grzYAE sc-button"
     disabled={false}
     size="small"
     title=""
@@ -840,7 +869,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb bGOshX sc-button"
+    className="sc-bxivhb bWjsDA sc-button"
     disabled={false}
     size="base"
     title=""
@@ -869,7 +898,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb fgMFFV sc-button"
+    className="sc-bxivhb hEQong sc-button"
     disabled={false}
     size="large"
     title=""
@@ -898,7 +927,7 @@ exports[`Storyshots Button Default 1`] = `
     </span>
   </button>
   <button
-    className="sc-bxivhb krAwuY sc-button"
+    className="sc-bxivhb cpeGeg sc-button"
     disabled={false}
     size="larger"
     title=""