playbook_ui 14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5315 → 14.10.0.pre.alpha.play1465attempt25272

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -50,7 +50,7 @@ $gap_lg: $height_from_top + $space_lg;
         >div {
             &:last-child {
                 flex-basis: auto !important;
-                [class^=pb_timeline_item_step] {
+                [class=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         opacity: 0;
                     }
@@ -66,25 +66,29 @@ $gap_lg: $height_from_top + $space_lg;
         [class*=pb_timeline_item_kit] {
             &[class*=_solid] {
                 flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
+                [class=pb_timeline_item_left_block] {
+                    height: 0px;
+                }
+                [class=pb_timeline_item_step] {
                     @include flex_wrapper(row);
-                    align-items: center;
                     margin-top: $space_xs;
                     margin-bottom: $space_xs;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
+                        @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
                     }
                 }
             }
             &[class*=_dotted] {
                 flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
+                [class=pb_timeline_item_left_block] {
+                    height: 0;
+                }
+                [class=pb_timeline_item_step] {
                     @include flex_wrapper(row);
-                    align-items: center;
                     margin-top: $space_xs;
                     margin-bottom: $space_xs;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
+                        @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
                     }
                 }
             }
@@ -95,7 +99,7 @@ $gap_lg: $height_from_top + $space_lg;
             >div {
                 &:last-child {
                     flex-basis: auto !important;
-                    [class^=pb_timeline_item_step] {
+                    [class=pb_timeline_item_step] {
                         [class=pb_timeline_item_connector] {
                             opacity: 0;
                         }
@@ -125,12 +129,12 @@ $gap_lg: $height_from_top + $space_lg;
                             }
                         }
                     }
-                    [class^=pb_timeline_item_step] {
+                    [class=pb_timeline_item_step] {
                         @include flex_wrapper(row);
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
+                            @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
                         }
                     }
                 }
@@ -149,12 +153,12 @@ $gap_lg: $height_from_top + $space_lg;
                             }
                         }
                     }
-                    [class^=pb_timeline_item_step] {
+                    [class=pb_timeline_item_step] {
                         @include flex_wrapper(row);
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
+                            @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
                         }
                     }
                 }
@@ -166,7 +170,7 @@ $gap_lg: $height_from_top + $space_lg;
         align-items: flex-start;
         align-self: auto;
         >div:last-child {
-            [class^=pb_timeline_item_step] {
+            [class=pb_timeline_item_step] {
                 [class=pb_timeline_item_connector] {
                     opacity: 0;
                 }
@@ -176,14 +180,13 @@ $gap_lg: $height_from_top + $space_lg;
             @include flex_wrapper(row);
             &[class*=_solid] {
                 flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
+                [class=pb_timeline_item_step] {
                     @include flex_wrapper(column);
-                    align-items: center;
                     align-content: flex-start;
                     margin-right: $space_sm;
                     margin-left: $space_sm;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
+                        @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
                     }
                 }
                 [class=pb_timeline_item_left_block] {
@@ -197,13 +200,12 @@ $gap_lg: $height_from_top + $space_lg;
             }
             &[class*=_dotted] {
                 flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
+                [class=pb_timeline_item_step] {
                     @include flex_wrapper(column);
-                    align-items: center;
                     margin-right: $space_sm;
                     margin-left: $space_sm;
                     [class=pb_timeline_item_connector] {
-                        @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
+                        @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
                     }
                 }
                 [class=pb_timeline_item_left_block] {
@@ -221,7 +223,7 @@ $gap_lg: $height_from_top + $space_lg;
             align-items: flex-start;
             align-self: auto;
             >div:last-child {
-                [class^=pb_timeline_item_step] {
+                [class=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         opacity: 0;
                     }
@@ -231,14 +233,13 @@ $gap_lg: $height_from_top + $space_lg;
                 @include flex_wrapper(row);
                 &[class*=_solid] {
                     flex-basis: 100%;
-                    [class^=pb_timeline_item_step] {
+                    [class=pb_timeline_item_step] {
                         @include flex_wrapper(column);
-                        align-items: center;
                         align-content: flex-start;
                         margin-right: $space_sm;
                         margin-left: $space_sm;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
+                            @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
                         }
                     }
                     [class=pb_timeline_item_left_block] {
@@ -252,13 +253,12 @@ $gap_lg: $height_from_top + $space_lg;
                 }
                 &[class*=_dotted] {
                     flex-basis: 100%;
-                    [class^=pb_timeline_item_step] {
+                    [class=pb_timeline_item_step] {
                         @include flex_wrapper(column);
-                        align-items: center;
                         margin-right: $space_sm;
                         margin-left: $space_sm;
                         [class=pb_timeline_item_connector] {
-                            @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
+                            @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
                         }
                     }
                     [class=pb_timeline_item_left_block] {
@@ -274,7 +274,7 @@ $gap_lg: $height_from_top + $space_lg;
         }
         &[class*=_gap_xs] {
             [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
+                [class=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_xs !important;
                     }
@@ -283,7 +283,7 @@ $gap_lg: $height_from_top + $space_lg;
         }
         &[class*=_gap_sm] {
             [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
+                [class=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_sm !important;
                     }
@@ -292,7 +292,7 @@ $gap_lg: $height_from_top + $space_lg;
         }
         &[class*=_gap_md] {
             [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
+                [class=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_md !important;
                     }
@@ -301,7 +301,7 @@ $gap_lg: $height_from_top + $space_lg;
         }
         &[class*=_gap_lg] {
             [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
+                [class=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_lg !important;
                     }

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -20,7 +20,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-  itemGap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'none',
 } & GlobalProps
 
 const Timeline = ({
@@ -32,15 +32,15 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
-  itemGap = 'none',
+  gap = 'none',
   ...props
 }: TimelineProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const dateStyle = showDate === true ? '_with_date' : ''
-  const itemGapStyle = itemGap === 'none' ? '' : `gap_${itemGap}`
-  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, itemGapStyle)
+  const gapStyle = gap === 'none' ? '' : `gap_${gap}`
+  const timelineCss = buildCss('pb_timeline_kit', `${orientation}`, dateStyle, gapStyle)
 
   return (
     <div
@@ -60,4 +60,4 @@ Timeline.Step = TimelineStep
 Timeline.Label = TimelineLabel
 Timeline.Detail = TimelineDetail
 
-export default Timeline
+export default Timeline

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.html.erb

@@ -1,6 +1,6 @@
 <%= pb_rails("flex", props: { justify: "evenly" }) do %>
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "xs"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -23,7 +23,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "sm"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -46,7 +46,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "md"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -69,7 +69,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "lg"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -91,3 +91,4 @@
         <% end %>
     <% end %>
 <% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx

@@ -10,7 +10,7 @@ const TimelineWithGap = (props) => (
     <Flex justify="evenly">
     <FlexItem>
         <Timeline
-            itemGap="xs"
+            gap="xs"
             orientation="vertical"
         >
           <Timeline.Item
@@ -51,7 +51,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="sm"
+            gap="sm"
             orientation="vertical"
         >
           <Timeline.Item
@@ -92,7 +92,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="md"
+            gap="md"
             orientation="vertical"
         >
           <Timeline.Item
@@ -134,7 +134,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="lg"
+            gap="lg"
             orientation="vertical"
         >
           <Timeline.Item

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md

@@ -1 +1 @@
-Use the optional `itemGap` prop to render the timeline kit with adjusted spacing between nodes. The `itemGap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
+Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

data/app/pb_kits/playbook/pb_timeline/timeline.rb

@@ -8,15 +8,15 @@ module Playbook
                          default: "horizontal"
       prop :show_date, type: Playbook::Props::Boolean,
                        default: false
-      prop :item_gap, type: Playbook::Props::Enum,
-                      values: %w[xs sm md lg none],
-                      default: "none"
+      prop :gap, type: Playbook::Props::Enum,
+                 values: %w[xs sm md lg none],
+                 default: "none"
 
       def classname
         generate_classname("pb_timeline_kit",
                            orientation,
                            date_class,
-                           item_gap_class)
+                           gap_class)
       end
 
     private
@@ -25,8 +25,8 @@ module Playbook
         show_date ? "with_date" : nil
       end
 
-      def item_gap_class
-        item_gap == "none" ? nil : "gap_#{item_gap}"
+      def gap_class
+        gap == "none" ? nil : "gap_#{gap}"
       end
     end
   end

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -42,8 +42,8 @@ type TypeaheadProps = {
   id?: string,
   label?: string,
   loadOptions?: string | Noop,
-  getOptionLabel?: string | (() => any),
-  getOptionValue?: string | (() => any),
+  getOptionLabel?: string | (() => string),
+  getOptionValue?: string | (() => string),
   name?: string,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
@@ -109,6 +109,7 @@ const Typeahead = ({
     multiKit: '',
     onCreateOption: null as null,
     plusIcon: false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onMultiValueClick: (_option: SelectValueType): any => undefined,
     pillColor: pillColor,
     ...props,

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -1,16 +1,24 @@
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
-const ClearContainer = (props: any) => {
+type ClearContainerProps = {
+  children: React.ReactNode,
+  selectProps?: {
+    id: string,
+  },
+  clearValue: () => void,
+}
+
+const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, [true])
+  }, [clearValue, selectProps.id])
 
   return (
     <components.ClearIndicator
-      className="clear_indicator"
-      {...props}
+        className="clear_indicator"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx

@@ -5,7 +5,11 @@ import Flex from '../../pb_flex/_flex'
 import TextInput from '../../pb_text_input/_text_input'
 
 type Props = {
-  selectProps: any,
+    selectProps: {
+    dark?: boolean,
+    label: string,
+    error?: string,
+  },
 }
 
 const TypeaheadControl = (props: Props) => (

data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const IndicatorsContainer = (props: any) => (
+type IndicatorsContainerProps = {
+  children: React.ReactNode,
+}
+
+
+const IndicatorsContainer = (props: IndicatorsContainerProps): React.ReactElement => (
   <components.IndicatorsContainer
-    className="text_input_indicators"
-    {...props}
+      className="text_input_indicators"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const MenuList = (props: any) => {
+type MenuListProps = {
+  children: React.ReactNode,
+  footer: React.ReactNode,
+}
+
+const MenuList = (props: MenuListProps): React.ReactElement => {
   return (
   <components.MenuList {...props}>
     {props.children}

data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx

@@ -3,7 +3,22 @@ import { components } from 'react-select'
 
 import User from '../../pb_user/_user'
 
-const Option = (props: any) => {
+type OptionProps = {
+  children: React.ReactNode,
+  label?: string,
+  data: {
+    imageUrl?: string,
+  },
+  selectProps: {
+    dark?: boolean,
+    valueComponent?: (data: {
+      imageUrl?: string,
+    }) => React.ReactNode,
+  },
+}
+
+
+const Option = (props: OptionProps): React.ReactElement => {
   const {
     imageUrl,
   } = props.data
@@ -14,11 +29,11 @@ const Option = (props: any) => {
       <>
         {!valueComponent && imageUrl &&
           <User
-            align="left"
-            avatarUrl={imageUrl}
-            dark={props.selectProps.dark}
-            name={props.label}
-            orientation="horizontal"
+              align="left"
+              avatarUrl={imageUrl}
+              dark={props.selectProps.dark}
+              name={props.label}
+              orientation="horizontal"
           />
         }
 

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx

@@ -4,19 +4,26 @@ import { components } from 'react-select'
 import Flex from '../../pb_flex/_flex'
 import Icon from '../../pb_icon/_icon'
 
-const Placeholder = (props: any) => (
+type PlaceholderProps = {
+  children: React.ReactNode,
+  selectProps: {
+    plusIcon?: boolean,
+  },
+}
+
+const Placeholder = (props: PlaceholderProps): React.ReactElement => (
   <>
     <Flex
-      align="center"
-      className="placeholder"
+        align="center"
+        className="placeholder"
     >
       <components.IndicatorsContainer
-        {...props}
+          {...props}
       />
       {props.selectProps.plusIcon &&
         <Icon
-          className="typeahead-plus-icon"
-          icon="plus"
+            className="typeahead-plus-icon"
+            icon="plus"
         />
       }
     </Flex>

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const ValueContainer = (props: any) => (
+type ValueContainerProps = {
+  children: React.ReactNode,
+}
+
+const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
   <components.ValueContainer
-    className="text_input_value_container"
-    {...props}
+      className="text_input_value_container"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
+
 import React, { useState } from 'react'
 
 import {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -45,8 +45,7 @@ const promiseOptions = (inputValue) =>
 
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
+
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -58,6 +57,9 @@ const TypeaheadWithPillsAsync = (props) => {
     return results()
   }
 
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
+
   return (
     <>
       {users && users.length > 0 && (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx

@@ -83,13 +83,13 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={(props) => (
+          valueComponent={({imageUrl, label, territory, type}) => (
             <User
                 avatar
-                avatarUrl={props.imageUrl}
-                name={props.label}
-                territory={props.territory}
-                title={props.type}
+                avatarUrl={imageUrl}
+                name={label}
+                territory={territory}
+                title={type}
             />
           )}
           {...props}

data/app/pb_kits/playbook/utilities/globalPropNames.mjs

@@ -27,7 +27,6 @@ export default [
   "overflow",
   "order",
   "numberSpacing",
-  "gap",
   "maxWidth",
   "minWidth",
   "width",

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -108,10 +108,6 @@ type MinWidth = {
   minWidth?: string,
 }
 
-type Gap = {
-  gap?: string,
-}
-
 type NumberSpacing = {
   numberSpacing?: "tabular",
 }
@@ -200,7 +196,7 @@ type MinHeight = {
 export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
-  LineHeight & Margin & Width & MinWidth & MaxWidth & Gap & NumberSpacing & Order & Overflow & Padding &
+  LineHeight & Margin & Width & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
   Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left & Height & MaxHeight & MinHeight;
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -376,11 +372,6 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
     return css.trimEnd()
   },
-  gapProps: ({ gap }: Gap) => {
-    let css = ''
-    css += gap ? `gap_${gap} ` : ''
-    return css.trimEnd()
-  },
   minHeightProps: ({ minHeight }: MinHeight) => {
     const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
     if (heightValues.includes(minHeight)) {
@@ -539,15 +530,15 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   },
 
 
-  topProps: ({top}) => getPositioningPropsClasses('top', top),
-
-  rightProps: ({right}) => getPositioningPropsClasses('right', right),
+  topProps: ({top}) => getPositioningPropsClasses('top', top), 
 
-  bottomProps:({bottom}) =>  getPositioningPropsClasses('bottom', bottom),
+  rightProps: ({right}) => getPositioningPropsClasses('right', right), 
 
+  bottomProps:({bottom}) =>  getPositioningPropsClasses('bottom', bottom), 
+  
   leftProps: ({left}) => getPositioningPropsClasses('left', left),
-
-
+    
+  
   textAlignProps: ({ textAlign }: TextAlign) => {
     if (typeof textAlign === 'object') {
       return getResponsivePropClasses(textAlign, 'text_align')
@@ -567,7 +558,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
 
 const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[key: string]: any}} = {
   heightProps: ({ height }: Height) => {
-    return height ? { height } : {};
+    return height ? { height } : {}; 
   },
 
   maxHeightProps: ({ maxHeight }: MaxHeight) => {
@@ -575,7 +566,7 @@ const PROP_INLINE_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => {[
   },
 
   minHeightProps: ({ minHeight }: MinHeight) => {
-    return minHeight ? { minHeight } : {};
+    return minHeight ? { minHeight } : {}; 
   },
 }