fix(core/wizard): Fix header icons at smaller widths

spinnaker · Apr 10, 2018 · 71d978f · 71d978f
1 parent be938ab
commit 71d978f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/app/scripts/modules/core/src/modal/wizard/WizardPage.tsx b/app/scripts/modules/core/src/modal/wizard/WizardPage.tsx
@@ -17,6 +17,8 @@ export interface IWizardPageProps {
 }
 
 export interface IWizardPageState {
+  hasErrors: boolean;
+  isDirty: boolean;
   label: string;
 }
 
@@ -41,6 +43,8 @@ export function wizardPage<P = {}>(
     constructor(props: P & IWizardPageProps) {
       super(props);
       this.state = {
+        hasErrors: false,
+        isDirty: false,
         label: WizardPage.label,
       };
     }
@@ -53,6 +57,13 @@ export function wizardPage<P = {}>(
       this.props.onMount(undefined);
     }
 
+    private dirtyCallback(name: string, dirty: boolean): void {
+      if (name === this.state.label) {
+        this.setState({ isDirty: dirty });
+        this.props.dirtyCallback(name, dirty);
+      }
+    }
+
     private handleRef(element: any) {
       if (element) {
         this.element = element;
@@ -61,17 +72,21 @@ export function wizardPage<P = {}>(
 
     private handleWrappedRef(wrappedComponent: any) {
       if (wrappedComponent) {
-        this.validate = wrappedComponent.validate;
+        this.validate = (values: { [key: string]: any }) => {
+          const errors = wrappedComponent.validate(values);
+          this.setState({ hasErrors: Object.keys(errors).length > 0 });
+          return errors;
+        }
       }
     }
 
     public render() {
-      const { dirtyCallback, dirty, done, mandatory } = this.props;
-      const { label } = this.state;
+      const { done, mandatory } = this.props;
+      const { hasErrors, isDirty, label } = this.state;
       const showDone = done || !mandatory;
       const className = classNames({
         default: !showDone,
-        dirty,
+        dirty: hasErrors || isDirty,
         done: showDone,
       });
 
@@ -81,7 +96,7 @@ export function wizardPage<P = {}>(
             <h4 className={className}>{label}</h4>
           </div>
           <div className="wizard-page-body">
-            <WrappedComponent {...this.props} dirtyCallback={dirtyCallback} ref={this.handleWrappedRef} />
+            <WrappedComponent {...this.props} dirtyCallback={this.dirtyCallback} ref={this.handleWrappedRef} />
           </div>
         </div>
       );

diff --git a/app/scripts/modules/core/src/modal/wizard/modalWizard.less b/app/scripts/modules/core/src/modal/wizard/modalWizard.less
@@ -111,6 +111,7 @@ v2-modal-wizard, .wizard-modal {
             background-color: var(--color-dovegray);
             content: '';
             transition: 0.25s;
+            font-size: 15px;
           }
           &.done {
             &:before {
@@ -122,6 +123,7 @@ v2-modal-wizard, .wizard-modal {
               color: var(--color-danger);
               background-color: transparent;
               content: "\e088";
+              font-family: 'Glyphicons Halflings';
             }
           }
           &.waiting {