Просмотр исходного кода

fix(onboarding): Onboarding fix animation & nav-tabs styling (#38972)

1. Fixed some animation stylings to reduce glitch
2. Fixed a problem with nav-tabs where the content of the tabs aren't
actually aligned.

Before:
<img width="377" alt="image"
src="https://user-images.githubusercontent.com/8980455/190726966-812ed36b-8d16-4373-8336-2a60a27889d0.png">

After:
<img width="377" alt="image"
src="https://user-images.githubusercontent.com/8980455/190726904-99d405b2-d98f-4b58-bb56-37f5fcf762f3.png">
Zhixing Zhang 2 лет назад
Родитель
Сommit
02663a35bb

+ 1 - 3
static/app/views/onboarding/targetedOnboarding/onboarding.tsx

@@ -91,6 +91,7 @@ function Onboarding(props: Props) {
 
   useEffect(updateCornerVariant, [stepIndex, cornerVariantControl]);
 
+  // Called onExitComplete
   const [containerHasFooter, setContainerHasFooter] = useState<boolean>(false);
   const updateAnimationState = () => {
     if (!stepObj) {
@@ -98,11 +99,8 @@ function Onboarding(props: Props) {
     }
 
     setContainerHasFooter(stepObj.hasFooter ?? false);
-    cornerVariantControl.start(stepObj.cornerVariant);
   };
 
-  useEffect(updateAnimationState, [stepObj, cornerVariantControl]);
-
   const goToStep = (step: StepDescriptor) => {
     if (!stepObj) {
       return;

+ 1 - 0
static/less/shared-components.less

@@ -1071,6 +1071,7 @@ header + .alert {
     > a {
       display: flex;
       align-items: center;
+      justify-content: center;
       padding: 0 0 10px;
       margin: 0;
       border: 0;