Design edits (#19)

- Made `fullWidth` - Added a consistent password requirement help text - Use `title` for toast - Change username/email to us `dl` - Don’t use html elements in tests
legrego · Apr 5, 2019 · 57f1ed4 · 57f1ed4
1 parent fff9fe4
commit 57f1ed4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 21 deletions.
diff --git a/...ugins/security/public/components/management/change_password_form/change_password_form.tsx b/...ugins/security/public/components/management/change_password_form/change_password_form.tsx
@@ -64,6 +64,7 @@ export class ChangePasswordForm extends Component<Props, State> {
         {this.props.isUserChangingOwnPassword && (
           <EuiFormRow
             {...this.validateCurrentPassword()}
+            fullWidth
             label={
               <FormattedMessage
                 id="xpack.security.account.changePasswordForm.currentPasswordLabel"
@@ -77,12 +78,20 @@ export class ChangePasswordForm extends Component<Props, State> {
               value={this.state.currentPassword}
               onChange={this.onCurrentPasswordChange}
               disabled={this.state.changeInProgress}
+              fullWidth
             />
           </EuiFormRow>
         )}
 
         <EuiFormRow
+          helpText={
+            <FormattedMessage
+              id="xpack.security.account.changePasswordForm.passwordRequirements"
+              defaultMessage="6 characters minimum"
+            />
+          }
           {...this.validateNewPassword()}
+          fullWidth
           label={
             <FormattedMessage
               id="xpack.security.account.changePasswordForm.newPasswordLabel"
@@ -96,10 +105,12 @@ export class ChangePasswordForm extends Component<Props, State> {
             value={this.state.newPassword}
             onChange={this.onNewPasswordChange}
             disabled={this.state.changeInProgress}
+            fullWidth
           />
         </EuiFormRow>
         <EuiFormRow
           {...this.validateConfirmPassword()}
+          fullWidth
           label={
             <FormattedMessage
               id="xpack.security.account.changePasswordForm.confirmPasswordLabel"
@@ -113,10 +124,11 @@ export class ChangePasswordForm extends Component<Props, State> {
             value={this.state.confirmPassword}
             onChange={this.onConfirmPasswordChange}
             disabled={this.state.changeInProgress}
+            fullWidth
           />
         </EuiFormRow>
         <EuiFormRow>
-          <EuiFlexGroup alignItems="center">
+          <EuiFlexGroup alignItems="center" responsive={false}>
             <EuiFlexItem grow={false}>
               <EuiButton
                 onClick={this.onChangePasswordClick}
@@ -197,7 +209,7 @@ export class ChangePasswordForm extends Component<Props, State> {
         error: (
           <FormattedMessage
             id="xpack.security.account.currentPasswordRequired"
-            defaultMessage="Please enter your current password"
+            defaultMessage="Enter your current password"
           />
         ),
       };
@@ -286,7 +298,7 @@ export class ChangePasswordForm extends Component<Props, State> {
 
   private handleChangePasswordSuccess = () => {
     toastNotifications.addSuccess({
-      text: i18n.translate('xpack.security.account.changePasswordSuccess', {
+      title: i18n.translate('xpack.security.account.changePasswordSuccess', {
         defaultMessage: 'Your password has been changed',
       }),
       'data-test-subj': 'passwordUpdateSuccess',

diff --git a/x-pack/plugins/security/public/views/account/components/account_management_page.test.tsx b/x-pack/plugins/security/public/views/account/components/account_management_page.test.tsx
@@ -38,8 +38,8 @@ describe('<AccountManagementPage>', () => {
     expect(wrapper.find('EuiText[data-test-subj="userDisplayName"]').text()).toEqual(
       user.full_name
     );
-    expect(wrapper.find('strong[data-test-subj="username"]').text()).toEqual(user.username);
-    expect(wrapper.find('strong[data-test-subj="email"]').text()).toEqual(user.email);
+    expect(wrapper.find('[data-test-subj="username"]').text()).toEqual(user.username);
+    expect(wrapper.find('[data-test-subj="email"]').text()).toEqual(user.email);
   });
 
   it(`displays username when full_name is not provided`, () => {
@@ -48,10 +48,10 @@ describe('<AccountManagementPage>', () => {
     expect(wrapper.find('EuiText[data-test-subj="userDisplayName"]').text()).toEqual(user.username);
   });
 
-  it(`displays a placeholder when no email address is provided`, () => {
+  it(`displays a placeholder when n do email address is provided`, () => {
     const user: User = createUser({ withEmail: false });
     const wrapper = mountWithIntl(<AccountManagementPage user={user} />);
-    expect(wrapper.find('strong[data-test-subj="email"]').text()).toEqual('(no email address)');
+    expect(wrapper.find('[data-test-subj="email"]').text()).toEqual('(no email address)');
   });
 
   it(`displays change password form for users in the native realm`, () => {

diff --git a/x-pack/plugins/security/public/views/account/components/change_password/change_password.tsx b/x-pack/plugins/security/public/views/account/components/change_password/change_password.tsx
@@ -27,10 +27,7 @@ export class ChangePassword extends Component<Props, {}> {
     const canChangePassword = canUserChangePassword(this.props.user);
 
     const changePasswordTitle = (
-      <FormattedMessage
-        id="xpack.security.account.changePasswordTitle"
-        defaultMessage="Change password"
-      />
+      <FormattedMessage id="xpack.security.account.changePasswordTitle" defaultMessage="Password" />
     );
 
     if (canChangePassword) {
@@ -42,6 +39,7 @@ export class ChangePassword extends Component<Props, {}> {
   private getChangePasswordForm = (changePasswordTitle: React.ReactElement<any>) => {
     return (
       <EuiDescribedFormGroup
+        fullWidth
         title={<h3>{changePasswordTitle}</h3>}
         description={
           <p>
@@ -60,6 +58,7 @@ export class ChangePassword extends Component<Props, {}> {
   private getChangePasswordUnavailable(changePasswordTitle: React.ReactElement<any>) {
     return (
       <EuiDescribedFormGroup
+        fullWidth
         title={<h3>{changePasswordTitle}</h3>}
         description={
           <p>

diff --git a/x-pack/plugins/security/public/views/account/components/personal_info/personal_info.tsx b/x-pack/plugins/security/public/views/account/components/personal_info/personal_info.tsx
@@ -7,7 +7,6 @@ import {
   // @ts-ignore
   EuiDescribedFormGroup,
   EuiFormRow,
-  EuiSpacer,
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -21,6 +20,7 @@ interface Props {
 export const PersonalInfo = (props: Props) => {
   return (
     <EuiDescribedFormGroup
+      fullWidth
       title={
         <h3>
           <FormattedMessage
@@ -36,22 +36,21 @@ export const PersonalInfo = (props: Props) => {
         />
       }
     >
-      <EuiFormRow>
-        <EuiText>
-          <div>
-            <strong title="username" data-test-subj="username">
+      <EuiFormRow fullWidth>
+        <EuiText size="s">
+          <dl>
+            <dt title="username" data-test-subj="username">
               {props.user.username}
-            </strong>
-            <EuiSpacer size="s" />
-            <strong title="email" data-test-subj="email">
+            </dt>
+            <dd title="email" data-test-subj="email">
               {props.user.email || (
                 <FormattedMessage
                   id="xpack.security.account.noEmailMessage"
                   defaultMessage="(no email address)"
                 />
               )}
-            </strong>
-          </div>
+            </dd>
+          </dl>
         </EuiText>
       </EuiFormRow>
     </EuiDescribedFormGroup>