playbook_ui 14.0.0.pre.alpha.play1447alphatest3462 → 14.0.0

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-multi-comp */
-
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -26,7 +24,7 @@ type WalkthroughProps = {
   disableOverlay?: boolean,
   disableOverlayClose?: boolean,
   disableScrolling?: boolean,
-  floaterProps?: Record<string, unknown>,
+  floaterProps?: object,
   hideBackButton?: boolean,
   hideCloseButton?: boolean,
   showProgress?: boolean,
@@ -60,92 +58,89 @@ type TooltipProps = {
     disableBeacon?: boolean,
   },
   skip?: boolean,
-  backProps?: Record<string, unknown>,
-  closeProps?: Record<string, unknown>,
-  primaryProps?: Record<string, unknown>,
-  skipProps?: Record<string, unknown>,
-  tooltipProps?: Record<string, unknown>,
+  backProps?: object,
+  closeProps?: object,
+  primaryProps?: object,
+  skipProps?: object,
+  tooltipProps?: object,
 }
 
-// eslint-disable-next-line react/display-name
 const Tooltip = React.forwardRef((props: TooltipProps) => (
-<div
+  <div
     className="pb_card_kit_border_none p_none"
     {...props.tooltipProps}
->
-  {props.step.title && <div>
-  <Flex
-      align="center"
-      justify="between"
-      padding="xs"
   >
-      <Title
+    {props.step.title && <div>
+      <Flex
+        align="center"
+        justify="between"
+        padding="xs"
+      >
+        <Title
           paddingLeft="xs"
           size={4}
-      >
-      {props.step.title}
-      </Title>
-      {props.skip && (
-      <Button
+        >
+          {props.step.title}
+        </Title>
+        {props.skip && (<Button
           {...props.skipProps}
           id="skip"
           text="Skip Tour"
           variant="link"
-      />
-      )}
-      <Button
+        />)}
+        <Button
           {...props.skipProps}
           id="skip"
           text="Skip Tour"
           variant="link"
-      />
-  </Flex>
-  <SectionSeparator />
-  </div>}
+        />
+      </Flex>
+      <SectionSeparator />
+    </div>}
 
-  <Flex padding="sm">{props.step.content}</Flex>
-  <SectionSeparator />
-  <Flex
+    <Flex padding="sm">{props.step.content}</Flex>
+    <SectionSeparator />
+    <Flex
       justify={props.index == 0 ? 'end' : 'between'}
       padding="xs"
-  >
+    >
 
-  {props.index > 0 && (
-      <Button
+      {props.index > 0 && (
+        <Button
           {...props.backProps}
           id="back"
           text="Back"
-      />
-  )}
+        />
+      )}
 
-  {props.continuous && !props.isLastStep &&
-      <Button
+      {props.continuous && !props.isLastStep &&
+        <Button
           {...props.primaryProps}
           id="next"
           text="Next"
-      />
-  }
+        />
+      }
 
-  {!props.continuous &&
-      <Button
+      {!props.continuous &&
+        <Button
           {...props.closeProps}
           id="close"
           text="Close"
-      />
-  }
+        />
+      }
 
-  {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
-      <Button
+      {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
+        <Button
           {...props.closeProps}
           id="close"
           text="Close"
-      />
-  }
-  </Flex>
-</div>
+        />
+      }
+    </Flex>
+  </div>
 )) as unknown as React.ForwardRefRenderFunction<HTMLDivElement, TooltipRenderProps>
 
-const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
+const Walkthrough = (props: WalkthroughProps) => {
   const {
     aria = {},
     callback,
@@ -175,24 +170,24 @@ const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       <Joyride
-          callback={callback}
-          continuous={continuous}
-          disableOverlay={disableOverlay}
-          disableScrolling
-          floaterProps={floaterProps}
-          run={run}
-          showSkipButton={showSkipButton}
-          steps={steps}
-          styles={styles}
-          tooltipComponent={Tooltip}
-          {...props}
+        callback={callback}
+        continuous={continuous}
+        disableOverlay={disableOverlay}
+        disableScrolling
+        floaterProps={floaterProps}
+        run={run}
+        showSkipButton={showSkipButton}
+        steps={steps}
+        styles={styles}
+        tooltipComponent={Tooltip}
+        {...props}
       />
     </div>
 

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx

@@ -38,7 +38,7 @@ const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expa
   }
 }
 
-const WeekdayStacked = (props: WeekdayStackedProps): React.ReactElement => {
+const WeekdayStacked = (props: WeekdayStackedProps) => {
   const {
     align = 'left',
     aria = {},

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -19,66 +19,55 @@
 }
 
 .z_index_1 {
-  z-index: $z_1 !important;
+  z-index: 100;
 }
 
 .z_index_2 {
-  z-index: $z_2 !important;
+  z-index: 200;
 }
 
 .z_index_3 {
-  z-index: $z_3 !important;
+  z-index: 300;
 }
 
 .z_index_4 {
-  z-index: $z_4 !important;
+  z-index: 400;
 }
 
 .z_index_5 {
-  z-index: $z_5 !important;
+  z-index: 500;
 }
 
 .z_index_6 {
-  z-index: $z_6 !important;
+  z-index: 600;
 }
 
 .z_index_7 {
-  z-index: $z_7 !important;
+  z-index: 700;
 }
 
 .z_index_8 {
-  z-index: $z_8 !important;
+  z-index: 800;
 }
 
 .z_index_9 {
-  z-index: $z_9 !important;
+  z-index: 900;
 }
 
 .z_index_10 {
-  z-index: $z_10 !important;
-}
-
-$zIndex_values: (
-  1: $z_1,
-  2: $z_2,
-  3: $z_3,
-  4: $z_4,
-  5: $z_5,
-  6: $z_6,
-  7: $z_7,
-  8: $z_8,
-  9: $z_9,
-  10: $z_10
-);
+  z-index: 1000;
+}
+
+$zIndex_values: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
 
 @each $size, $size_value in $breakpoints_grid {
-  @each $zIndex_value, $zIndex_variable in $zIndex_values {
+  @each $zIndex_value in $zIndex_values {
     $min_size: map-get($size_value, "min");
     $max_size: map-get($size_value, "max");
 
     .z_index_#{$size}_#{$zIndex_value} {
       @include break_on($min_size, $max_size) {
-        z-index: $zIndex_variable !important;
+        z-index: #{$zIndex_value * 100} !important;
       }
     }
   }