[MM-27159] Button States for Cloud Onboarding (#6189)

* [MM-27159] Button States * PR feedback
mattermost · Aug 19, 2020 · 200fd7c · 200fd7c
1 parent aba0ef5
commit 200fd7c
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 58 deletions.
diff --git a/components/next_steps_view/__snapshots__/next_steps_view.test.tsx.snap b/components/next_steps_view/__snapshots__/next_steps_view.test.tsx.snap
@@ -56,6 +56,7 @@ exports[`components/next_steps_view should match snapshot 1`] = `
           className="NextStepsView__skipGettingStarted"
         >
           <button
+            className="NextStepsView__button tertiary"
             onClick={[Function]}
           >
             <FormattedMessage

diff --git a/components/next_steps_view/next_steps_tips.tsx b/components/next_steps_view/next_steps_tips.tsx
@@ -94,7 +94,7 @@ export default function NextStepsTips(props: {showFinalScreen: boolean; animatin
                         />
                         <MenuWrapper>
                             <button
-                                className='NextStepsView__button confirm'
+                                className='NextStepsView__button NextStepsView__finishButton primary'
                             >
                                 <FormattedMessage
                                     id='next_steps_view.tips.configureLogin.button'
@@ -132,7 +132,7 @@ export default function NextStepsTips(props: {showFinalScreen: boolean; animatin
                             defaultMessage='Visit the Plugins Marketplace to install and configure plugins.'
                         />
                         <button
-                            className='NextStepsView__button confirm'
+                            className='NextStepsView__button NextStepsView__finishButton primary'
                             onClick={() => openPluginMarketplace(dispatch)}
                         >
                             <FormattedMessage
@@ -174,13 +174,13 @@ export default function NextStepsTips(props: {showFinalScreen: boolean; animatin
                     </h3>
                     <div className='NextStepsView__downloadButtons'>
                         <button
-                            className='NextStepsView__downloadForPlatformButton'
+                            className='NextStepsView__button NextStepsView__downloadForPlatformButton secondary'
                             onClick={downloadLatest}
                         >
                             {getDownloadButtonString()}
                         </button>
                         <button
-                            className='NextStepsView__downloadAnyButton'
+                            className='NextStepsView__button NextStepsView__downloadAnyButton tertiary'
                             onClick={seeAllApps}
                         >
                             <FormattedMessage
@@ -233,7 +233,7 @@ export default function NextStepsTips(props: {showFinalScreen: boolean; animatin
                                 defaultMessage='Let us show you around with a guided tour of the interface.'
                             />
                             <button
-                                className='NextStepsView__button confirm'
+                                className='NextStepsView__button NextStepsView__finishButton primary'
                                 onClick={() => {}}
                             >
                                 <FormattedMessage

diff --git a/components/next_steps_view/next_steps_view.scss b/components/next_steps_view/next_steps_view.scss
@@ -220,38 +220,89 @@
     margin-top: 12px;
 
     button {
-        border: none;
-        background: none;
         padding: 10px 16px;
         font-weight: 600;
         font-size: 12px;
         line-height: 9px;
-        color: var(--button-bg);
     }
 }
 
-.NextStepsView__button {
+.NextStepsView__finishButton {
     padding: 12px 20px;
     line-height: 14px;
     font-size: 14px;
     font-weight: 600;
+}
+
+.NextStepsView__button {
     border: none;
+    border-radius: 4px;
 
-    &.cancel {
+    &.secondary {
         background: var(--center-channel-bg);
         color: var(--button-bg);
+        box-shadow: inset 0 0 0 1px var(--button-bg);
+
+        &:hover:not(.disabled) {
+            background: rgba(var(--button-bg-rgb), 0.04);
+        }
+
+        &:active {
+            background: rgba(var(--button-bg-rgb), 0.08);
+        }
+
+        &:focus {
+            box-shadow: inset 0 0 0 2px var(--button-bg);
+        }
+
+        &.disabled {
+            color: rgba(var(--center-channel-color-rgb), 0.32);
+            box-shadow: inset 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.32);
+        }
     }
 
-    &.confirm {
+    &.primary {
         background: var(--button-bg);
-        border-radius: 4px;
         color: var(--button-color);
 
+        &:hover:not(.disabled) {
+            background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.16), rgba(var(--center-channel-color-rgb), 0.16)), var(--button-bg);
+        }
+
+        &:active {
+            background: linear-gradient(0deg, rgba(var(--center-channel-color-rgb), 0.32), rgba(var(--center-channel-color-rgb), 0.32)), var(--button-bg);
+        }
+
+        &:focus {
+            box-shadow: inset 0 0 0 2px var(--sidebar-text-active-border);
+        }
+
         &.disabled {
             color: rgba(var(--center-channel-color-rgb), 0.32);
             background: rgba(var(--center-channel-color-rgb), 0.08);
         }
     }
+
+    &.tertiary {
+        background: none;
+        color: var(--button-bg);
+
+        &:hover:not(.disabled) {
+            background: rgba(var(--button-bg-rgb), 0.04);
+        }
+
+        &:active {
+            background: rgba(var(--button-bg-rgb), 0.08);
+        }
+
+        &:focus {
+            box-shadow: inset 0 0 0 2px var(--button-bg);
+        }
+
+        &.disabled {
+            color: rgba(var(--center-channel-color-rgb), 0.32);
+        }
+    }
 }
 .NextStepsView__wizardButtons {
     display: flex;
@@ -389,22 +440,15 @@
     font-size: 12px;
     line-height: 9px;
     font-weight: 600;
-    color: var(--button-bg);
-    border-radius: 4px;
-    background: none;
-    border: 1px solid var(--button-bg);
     padding: 10px 16px;
 }
 
 .NextStepsView__downloadAnyButton {
     font-size: 12px;
     line-height: 9px;
     font-weight: 600;
-    color: var(--button-bg);
-    border: none;
-    background: none;
-    padding: 0;
-    margin-left: 24px;
+    padding: 10px 16px;
+    margin-left: 8px;
 }
 
 .NextStepsView__tipsMobileMessage {

diff --git a/components/next_steps_view/next_steps_view.tsx b/components/next_steps_view/next_steps_view.tsx
@@ -225,6 +225,7 @@ export default class NextStepsView extends React.PureComponent<Props, State> {
                         </Accordion>
                         <div className='NextStepsView__skipGettingStarted'>
                             <button
+                                className='NextStepsView__button tertiary'
                                 onClick={this.showFinalScreen}
                             >
                                 <FormattedMessage

diff --git a/..._steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap b/..._steps_view/steps/complete_profile_step/__snapshots__/complete_profile_step.test.tsx.snap
@@ -50,7 +50,7 @@ exports[`components/next_steps_view/steps/complete_profile_step should match sna
     className="NextStepsView__wizardButtons"
   >
     <button
-      className="NextStepsView__button confirm disabled"
+      className="NextStepsView__button NextStepsView__finishButton primary disabled"
       disabled={true}
       onClick={[Function]}
     >

diff --git a/components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx b/components/next_steps_view/steps/complete_profile_step/complete_profile_step.tsx
@@ -157,7 +157,7 @@ export default class CompleteProfileStep extends React.PureComponent<Props, Stat
                         />
                     </button> */}
                     <button
-                        className={classNames('NextStepsView__button confirm', {disabled: this.isFinishDisabled()})}
+                        className={classNames('NextStepsView__button NextStepsView__finishButton primary', {disabled: this.isFinishDisabled()})}
                         onClick={this.onFinish}
                         disabled={this.isFinishDisabled()}
                     >

diff --git a/...next_steps_view/steps/invite_members_step/__snapshots__/invite_members_step.test.tsx.snap b/...next_steps_view/steps/invite_members_step/__snapshots__/invite_members_step.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`components/next_steps_view/steps/invite_members_step should match snaps
         className="InviteMembersStep__send"
       >
         <button
-          className="InviteMembersStep__sendButton disabled"
+          className="NextStepsView__button InviteMembersStep__sendButton secondary disabled"
           disabled={true}
           onClick={[Function]}
         >
@@ -86,7 +86,7 @@ exports[`components/next_steps_view/steps/invite_members_step should match snaps
           value="http://localhost:8065/signup_user_complete/?id="
         />
         <button
-          className="InviteMembersStep__shareLinkInputButton"
+          className="NextStepsView__button InviteMembersStep__shareLinkInputButton secondary"
           data-testid="shareLinkInputButton"
           onClick={[Function]}
         >
@@ -106,7 +106,7 @@ exports[`components/next_steps_view/steps/invite_members_step should match snaps
     className="NextStepsView__wizardButtons"
   >
     <button
-      className="NextStepsView__button confirm"
+      className="NextStepsView__button NextStepsView__finishButton primary"
       onClick={[Function]}
     >
       <FormattedMessage

diff --git a/components/next_steps_view/steps/invite_members_step/invite_members_step.scss b/components/next_steps_view/steps/invite_members_step/invite_members_step.scss
@@ -35,18 +35,15 @@
         align-items: center;
         justify-content: center;
         flex-grow: 0;
-        border: 1px solid var(--button-bg);
-        color: var(--button-bg);
         border-radius: 0 4px 4px 0;
         font-size: 12px;
         line-height: 16px;
         font-weight: 600;
         padding: 8px 16px;
-        background: none;
         min-width: 108px;
 
         &.copied {
-            border-color: var(--online-indicator);
+            box-shadow: inset 0 0 0 1px var(--online-indicator);
             color: var(--online-indicator);
         }
 
@@ -58,12 +55,6 @@
             }
         }
 
-        &:hover {
-            background: var(--button-bg-08);
-        }
-        &:active {
-            background: var(--button-bg-08);
-        }
         span {
             display: inline-block;
             margin-left: 4px;
@@ -128,14 +119,10 @@
     align-items: center;
     justify-content: center;
     flex-grow: 0;
-    border: 1px solid var(--button-bg);
-    color: var(--button-bg);
-    border-radius: 4px;
     font-size: 12px;
     line-height: 16px;
     font-weight: 600;
     padding: 8px 16px;
-    background: none;
 
     i {
         font-size: 14px;
@@ -145,25 +132,13 @@
         }
     }
 
-    &:hover:not(.disabled) {
-        background: var(--button-bg-08);
-    }
-    &:active {
-        background: var(--button-bg-08);
-    }
     span {
         display: inline-block;
         margin-left: 4px;
     }
 
-    &.disabled {
-        border-color: 1px solid var(--center-channel-color);
+    &.disabled i {
         color: 1px solid var(--center-channel-color);
-        opacity: 0.32;
-
-        i {
-            color: 1px solid var(--center-channel-color);
-        }
     }
 }
 

diff --git a/components/next_steps_view/steps/invite_members_step/invite_members_step.tsx b/components/next_steps_view/steps/invite_members_step/invite_members_step.tsx
@@ -197,7 +197,7 @@ export default class InviteMembersStep extends React.PureComponent<Props, State>
                         />
                         <div className='InviteMembersStep__send'>
                             <button
-                                className={classNames('InviteMembersStep__sendButton', {disabled: !this.state.emails.length || Boolean(this.state.emailsSent) || this.state.emailError})}
+                                className={classNames('NextStepsView__button InviteMembersStep__sendButton secondary', {disabled: !this.state.emails.length || Boolean(this.state.emailsSent) || this.state.emailError})}
                                 disabled={!this.state.emails.length || Boolean(this.state.emailsSent) || Boolean(this.state.emailError)}
                                 onClick={this.sendEmailInvites}
                             >
@@ -245,7 +245,7 @@ export default class InviteMembersStep extends React.PureComponent<Props, State>
                                 data-testid='shareLinkInput'
                             />
                             <button
-                                className={classNames('InviteMembersStep__shareLinkInputButton', {copied: this.state.copiedLink})}
+                                className={classNames('NextStepsView__button InviteMembersStep__shareLinkInputButton secondary', {copied: this.state.copiedLink})}
                                 onClick={this.copyLink}
                                 data-testid='shareLinkInputButton'
                             >
@@ -273,7 +273,7 @@ export default class InviteMembersStep extends React.PureComponent<Props, State>
                 </div>
                 <div className='NextStepsView__wizardButtons'>
                     <button
-                        className={'NextStepsView__button confirm'}
+                        className={'NextStepsView__button NextStepsView__finishButton primary'}
                         onClick={this.onFinish}
                     >
                         <FormattedMessage

diff --git a/...nts/next_steps_view/steps/team_profile_step/__snapshots__/team_profile_step.test.tsx.snap b/...nts/next_steps_view/steps/team_profile_step/__snapshots__/team_profile_step.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`components/next_steps_view/steps/team_profile_step should match snapsho
     className="NextStepsView__wizardButtons"
   >
     <button
-      className="NextStepsView__button confirm"
+      className="NextStepsView__button NextStepsView__finishButton primary"
       disabled={false}
       onClick={[Function]}
     >

diff --git a/components/next_steps_view/steps/team_profile_step/team_profile_step.tsx b/components/next_steps_view/steps/team_profile_step/team_profile_step.tsx
@@ -189,7 +189,7 @@ export default class TeamProfileStep extends React.PureComponent<Props, State> {
                         />
                     </button> */}
                     <button
-                        className={classNames('NextStepsView__button confirm', {disabled: this.isFinishDisabled()})}
+                        className={classNames('NextStepsView__button NextStepsView__finishButton primary', {disabled: this.isFinishDisabled()})}
                         onClick={this.onFinish}
                         disabled={this.isFinishDisabled()}
                     >