feat(progress-step):update design (uber#3703)

* feat(progress-step):update design * fix typos * test(vrt): update visual snapshots for 213cbb4 [skip ci] (uber#3704) Co-authored-by: UberOpenSourceBot <[email protected]> * update docs * fix typos * style modification * fix bugs * fix bugs * fix bugs * test(vrt): update visual snapshots for b9dfdda [skip ci] (uber#3709) Co-authored-by: UberOpenSourceBot <[email protected]> * test(vrt): update visual snapshots for bf5e760 [skip ci] (uber#3712) Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: UberOpenSourceBot <[email protected]> Co-authored-by: Chase Starr <[email protected]>
refrigeratorstory · Sep 4, 2020 · f98ddc7 · f98ddc7
1 parent 4f0f593
commit f98ddc7
Show file tree

Hide file tree

Showing 30 changed files with 237 additions and 86 deletions.
diff --git a/documentation-site/examples/progress-steps/dotted.js b/documentation-site/examples/progress-steps/dotted.js
@@ -2,19 +2,22 @@
 import * as React from 'react';
 import {useStyletron} from 'baseui';
 import {ProgressSteps, Step} from 'baseui/progress-steps';
-import {Button} from 'baseui/button';
+import {Button, SHAPE, KIND, SIZE} from 'baseui/button';
 import {StatefulSelect, TYPE} from 'baseui/select';
 
 function SpacedButton(props) {
   return (
     <Button
       {...props}
+      shape={SHAPE.pill}
+      kind={KIND.secondary}
+      size={SIZE.compact}
       overrides={{
         BaseButton: {
           style: ({$theme}) => ({
             marginLeft: $theme.sizing.scale200,
             marginRight: $theme.sizing.scale200,
-            marginTop: $theme.sizing.scale200,
+            marginTop: $theme.sizing.scale800,
           }),
         },
       }}
@@ -29,7 +32,12 @@ function ProgressStepsContainer() {
   return (
     <ProgressSteps current={current}>
       <Step title="Create Account">
-        <div className={css({...theme.typography.font300})}>
+        <div
+          className={css({
+            ...theme.typography.ParagraphSmall,
+            marginBottom: '24px',
+          })}
+        >
           Here is some step content
         </div>
         <StatefulSelect
@@ -54,7 +62,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </Step>
       <Step title="Verify Payment">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here is some more content
         </div>
         <SpacedButton onClick={() => setCurrent(0)}>
@@ -65,7 +73,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </Step>
       <Step title="Add Payment Method">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here too!
         </div>
         <SpacedButton onClick={() => setCurrent(1)}>

diff --git a/documentation-site/examples/progress-steps/dotted.tsx b/documentation-site/examples/progress-steps/dotted.tsx
@@ -1,19 +1,28 @@
 import * as React from 'react';
-import {ProgressSteps, Step} from 'baseui/progress-steps';
-import {Button, ButtonProps} from 'baseui/button';
 import {useStyletron} from 'baseui';
+import {ProgressSteps, Step} from 'baseui/progress-steps';
+import {
+  Button,
+  SHAPE,
+  ButtonProps,
+  KIND,
+  SIZE,
+} from 'baseui/button';
 import {StatefulSelect, TYPE} from 'baseui/select';
 
 function SpacedButton(props: ButtonProps) {
   return (
     <Button
       {...props}
+      shape={SHAPE.pill}
+      kind={KIND.secondary}
+      size={SIZE.compact}
       overrides={{
         BaseButton: {
           style: ({$theme}) => ({
             marginLeft: $theme.sizing.scale200,
             marginRight: $theme.sizing.scale200,
-            marginTop: $theme.sizing.scale200,
+            marginTop: $theme.sizing.scale800,
           }),
         },
       }}
@@ -28,7 +37,12 @@ function ProgressStepsContainer() {
   return (
     <ProgressSteps current={current}>
       <Step title="Create Account">
-        <div className={css({...theme.typography.font300})}>
+        <div
+          className={css({
+            ...theme.typography.ParagraphSmall,
+            marginBottom: '24px',
+          })}
+        >
           Here is some step content
         </div>
         <StatefulSelect
@@ -53,8 +67,8 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </Step>
       <Step title="Verify Payment">
-        <div className={css({...theme.typography.font300})}>
-          Here is some some content
+        <div className={css({...theme.typography.ParagraphSmall})}>
+          Here is some more content
         </div>
         <SpacedButton onClick={() => setCurrent(0)}>
           Previous
@@ -64,7 +78,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </Step>
       <Step title="Add Payment Method">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here too!
         </div>
         <SpacedButton onClick={() => setCurrent(1)}>

diff --git a/documentation-site/examples/progress-steps/numbered.js b/documentation-site/examples/progress-steps/numbered.js
@@ -1,19 +1,22 @@
 // @flow
 import * as React from 'react';
 import {ProgressSteps, NumberedStep} from 'baseui/progress-steps';
-import {Button} from 'baseui/button';
+import {Button, SHAPE, KIND, SIZE} from 'baseui/button';
 import {useStyletron} from 'baseui';
 
 function SpacedButton(props) {
   return (
     <Button
       {...props}
+      shape={SHAPE.pill}
+      kind={KIND.secondary}
+      size={SIZE.compact}
       overrides={{
         BaseButton: {
           style: ({$theme}) => ({
             marginLeft: $theme.sizing.scale200,
             marginRight: $theme.sizing.scale200,
-            marginTop: $theme.sizing.scale200,
+            marginTop: $theme.sizing.scale800,
           }),
         },
       }}
@@ -27,7 +30,7 @@ function ProgressStepsContainer() {
   return (
     <ProgressSteps current={current}>
       <NumberedStep title="Create Account">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here is some step content
         </div>
         <SpacedButton disabled>Previous</SpacedButton>
@@ -36,7 +39,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </NumberedStep>
       <NumberedStep title="Verify Payment">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here is some more content
         </div>
         <SpacedButton onClick={() => setCurrent(0)}>
@@ -47,7 +50,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </NumberedStep>
       <NumberedStep title="Add Payment Method">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here too!
         </div>
         <SpacedButton onClick={() => setCurrent(1)}>

diff --git a/documentation-site/examples/progress-steps/numbered.tsx b/documentation-site/examples/progress-steps/numbered.tsx
@@ -1,18 +1,27 @@
 import * as React from 'react';
 import {ProgressSteps, NumberedStep} from 'baseui/progress-steps';
-import {Button, ButtonProps} from 'baseui/button';
+import {
+  Button,
+  SHAPE,
+  ButtonProps,
+  KIND,
+  SIZE,
+} from 'baseui/button';
 import {useStyletron} from 'baseui';
 
 function SpacedButton(props: ButtonProps) {
   return (
     <Button
       {...props}
+      shape={SHAPE.pill}
+      kind={KIND.secondary}
+      size={SIZE.compact}
       overrides={{
         BaseButton: {
           style: ({$theme}) => ({
             marginLeft: $theme.sizing.scale200,
             marginRight: $theme.sizing.scale200,
-            marginTop: $theme.sizing.scale200,
+            marginTop: $theme.sizing.scale800,
           }),
         },
       }}
@@ -26,7 +35,7 @@ function ProgressStepsContainer() {
   return (
     <ProgressSteps current={current}>
       <NumberedStep title="Create Account">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here is some step content
         </div>
         <SpacedButton disabled>Previous</SpacedButton>
@@ -35,7 +44,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </NumberedStep>
       <NumberedStep title="Verify Payment">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here is some more content
         </div>
         <SpacedButton onClick={() => setCurrent(0)}>
@@ -46,7 +55,7 @@ function ProgressStepsContainer() {
         </SpacedButton>
       </NumberedStep>
       <NumberedStep title="Add Payment Method">
-        <div className={css({...theme.typography.font300})}>
+        <div className={css({...theme.typography.ParagraphSmall})}>
           Here too!
         </div>
         <SpacedButton onClick={() => setCurrent(1)}>

diff --git a/src/progress-steps/__tests__/__snapshots__/numbered-step.test.js.snap b/src/progress-steps/__tests__/__snapshots__/numbered-step.test.js.snap
@@ -36,7 +36,7 @@ exports[`NumberedStep applies isCompleted prop correctly 1`] = `
     $isCompleted={true}
   >
     <ForwardRef(Check)
-      size={12}
+      size={28}
     />
   </ForwardRef>
   <ForwardRef

diff --git a/src/progress-steps/__tests__/__snapshots__/step.test.js.snap b/src/progress-steps/__tests__/__snapshots__/step.test.js.snap
@@ -9,7 +9,12 @@ exports[`Step applies isActive prop correctly 1`] = `
     $isActive={true}
     $isCompleted={false}
   >
-    <ForwardRef />
+    <ForwardRef
+      $isActive={true}
+      $isCompleted={false}
+    >
+      <ForwardRef />
+    </ForwardRef>
   </ForwardRef>
   <ForwardRef
     $isActive={true}
@@ -34,7 +39,11 @@ exports[`Step applies isCompleted prop correctly 1`] = `
 >
   <ForwardRef
     $isCompleted={true}
-  />
+  >
+    <ForwardRef
+      $isCompleted={true}
+    />
+  </ForwardRef>
   <ForwardRef
     $isCompleted={true}
   />
@@ -55,7 +64,11 @@ exports[`Step applies isLast prop correctly 1`] = `
 >
   <ForwardRef
     $isCompleted={false}
-  />
+  >
+    <ForwardRef
+      $isCompleted={false}
+    />
+  </ForwardRef>
   <ForwardRef
     $isCompleted={false}
   >
@@ -73,7 +86,11 @@ exports[`Step applies title prop correctly 1`] = `
 >
   <ForwardRef
     $isCompleted={false}
-  />
+  >
+    <ForwardRef
+      $isCompleted={false}
+    />
+  </ForwardRef>
   <ForwardRef
     $isCompleted={false}
   />
@@ -99,7 +116,12 @@ exports[`Step renders children correctly if isActive is provided 1`] = `
     $isActive={true}
     $isCompleted={false}
   >
-    <ForwardRef />
+    <ForwardRef
+      $isActive={true}
+      $isCompleted={false}
+    >
+      <ForwardRef />
+    </ForwardRef>
   </ForwardRef>
   <ForwardRef
     $isActive={true}

diff --git a/src/progress-steps/__tests__/progress-steps-number.scenario.js b/src/progress-steps/__tests__/progress-steps-number.scenario.js
@@ -0,0 +1,58 @@
+/*
+Copyright (c) 2018-2020 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+
+import {Block} from '../../block/index.js';
+import {Button} from '../../button/index.js';
+import {ProgressSteps, NumberedStep} from '../index.js';
+
+class ProgressStepsNumberContainer extends React.Component<
+  {},
+  {current: number},
+> {
+  state = {current: 0};
+
+  render() {
+    return (
+      <ProgressSteps current={this.state.current}>
+        <NumberedStep title="Create Account">
+          <Block data-e2e="content-1" font="font400">
+            Here is some step content
+          </Block>
+          <Button
+            data-e2e="button-next"
+            onClick={() => this.setState({current: 1})}
+          >
+            Next
+          </Button>
+        </NumberedStep>
+        <NumberedStep title="Verify Payment">
+          <Block data-e2e="content-2" font="font400">
+            Here is some more content
+          </Block>
+          <Button
+            data-e2e="button-previous"
+            onClick={() => this.setState({current: 0})}
+          >
+            Previous
+          </Button>
+          <Button onClick={() => this.setState({current: 2})}>Next</Button>
+        </NumberedStep>
+        <NumberedStep title="Add Payment Method">
+          <Block data-e2e="content-3" font="font400">
+            Here too!
+          </Block>
+          <Button onClick={() => this.setState({current: 1})}>Previous</Button>
+        </NumberedStep>
+      </ProgressSteps>
+    );
+  }
+}
+
+export default ProgressStepsNumberContainer;
diff --git a/src/progress-steps/index.d.ts b/src/progress-steps/index.d.ts
@@ -14,6 +14,7 @@ export const ProgressSteps: React.FC<ProgressStepsProps>;
 
 export interface StepOverrides {
   Root?: Override<any>;
+  IconContainer?: Override<any>;
   Icon?: Override<any>;
   InnerIcon?: Override<any>;
   Tail?: Override<any>;
@@ -33,6 +34,7 @@ export const Step: React.FC<StepProps>;
 
 export interface NumberedStepOverrides {
   Root?: Override<any>;
+  IconContainer?: Override<any>;
   Icon?: Override<any>;
   InnerIcon?: Override<any>;
   Tail?: Override<any>;

diff --git a/src/progress-steps/numbered-step.js b/src/progress-steps/numbered-step.js
@@ -59,7 +59,7 @@ function NumberedStep({
     <Root {...sharedProps} {...rootProps}>
       <Icon {...sharedProps} {...iconProps}>
         {!isCompleted && <span>{step}</span>}
-        {isCompleted && <CheckIcon size={12} {...checkIconProps} />}
+        {isCompleted && <CheckIcon size={28} {...checkIconProps} />}
       </Icon>
       {!isLast && <Tail {...sharedProps} {...tailProps} />}
       <Content {...sharedProps} {...contentProps}>