@loadsmart/loadsmart-ui 5.11.0 → 5.11.2-beta.1

package/src/components/Select/SelectEmpty.tsx

@@ -5,19 +5,20 @@ import { getToken as token } from 'theming'
 import type { SelectEmptyProps } from './Select.types'
 
 const Wrapper = styled.div`
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  padding: ${token('space-s')};
+
+  box-sizing: border-box;
   margin: 0 ${token('space-s')};
+  padding: ${token('space-s')};
+
+  color: ${token('color-neutral')};
 
   font-size: 1em;
   line-height: ${token('font-height-3')};
 
-  color: ${token('color-neutral')};
-
   background: ${token('color-transparent')};
 `
 

package/src/components/Select/SelectTrigger.tsx

@@ -13,14 +13,19 @@ const GenericSelectTrigger = styled(GenericDropdownTrigger)`
 `
 
 const SelectTriggerSearchField = styled(TextField)`
-  flex: 1;
-  height: 100%;
-  background-color: transparent;
-  border: none;
-  border-radius: ${token('border-radius-s')} 0 0 ${token('border-radius-s')};
   ${focusable`
     box-shadow: none;
   `}
+
+  background-color: transparent;
+
+  border: none;
+  border-radius: ${token('border-radius-s')} 0 0 ${token('border-radius-s')};
+
+  height: 100%;
+
+  flex: 1;
+
   ${Trailing} {
     margin: 0 ${token('space-xs')} 0 0;
   }
@@ -32,8 +37,8 @@ const Separator = styled.span`
   margin: 0;
 
   border-right-color: ${token('color-neutral-light')};
-  border-right-style: solid;
   border-right-width: 1px;
+  border-right-style: solid;
 `
 
 const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function SelectTrigger(

package/src/components/SideNavigation/Menu/Menu.tsx

@@ -13,11 +13,11 @@ import { styledCompounds } from 'utils/toolset/styledCompounds'
 const MenuTitle = styled.div`
   padding: ${token('space-s')} 0;
   padding-left: ${token('space-l')};
-  font-size: ${token('font-size-5')};
-  font-weight: ${token('font-weight-bold')};
-  line-height: ${token('font-height-3')};
 
   color: ${token('color-neutral')};
+  font-weight: ${token('font-weight-bold')};
+  font-size: ${token('font-size-5')};
+  line-height: ${token('font-height-3')};
   text-transform: uppercase;
 `
 

package/src/components/SideNavigation/Menu/MenuBaseItem.tsx

@@ -17,22 +17,23 @@ export type MenuBaseItemProps = HTMLAttributes<HTMLElement> & {
 }
 
 const StyledMenuItem = styled.button`
+  ${transition({ duration: '0.25s' })};
+
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
   padding: ${token('space-s')} 0;
   padding-right: ${rem('12px')};
   padding-left: ${token('space-l')};
 
-  font-size: ${token('font-size-4')};
+  color: ${token('color-neutral-white')};
   font-weight: ${token('font-weight-bold')};
+  font-size: ${token('font-size-4')};
   line-height: ${token('font-height-3')};
-  color: ${token('color-neutral-white')};
 
   cursor: pointer;
 
-  ${transition({ duration: '0.25s' })};
   ${focusable`
     color: ${token('color-primary')};
   `}

package/src/components/SideNavigation/Menu/MenuExpandable.tsx

@@ -35,10 +35,11 @@ const StyledIcon = styled(Icon)<IExpandable>`
 `
 
 const ExpandableItems = styled.div<IExpandable>`
-  height: ${prop('$height', 0)}px;
   overflow: hidden;
-
   ${transition({ property: 'height' })}
+
+  height: ${prop('$height', 0)}px;
+
   ${MenuLink} {
     padding-left: ${token('space-xl')};
   }

package/src/components/Steps/ProgressSteps/ProgressStep.tsx

@@ -60,18 +60,32 @@ const ProgressStepContainer = styled.div`
 `
 
 const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
+  ${transition()}
+
+  ${font({
+    weight: 'font-weight-bold',
+    height: 'steps-indicator-size',
+  })}
+
+  font-size: ${token('font-size-4')};
+
+  height: ${token('steps-indicator-size')};
+  width: ${token('steps-indicator-size')};
+
   display: flex;
-  align-items: center;
   justify-content: center;
-  width: ${token('steps-indicator-size')};
-  height: ${token('steps-indicator-size')};
-  font-size: ${token('font-size-4')};
+  align-items: center;
 
-  color: ${conditional({
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${conditional({
+    'color-accent': whenProps([
+      { current: true, complete: [true, false] },
+      { current: false, complete: true },
+    ]),
     'color-neutral': whenProps({ current: false, complete: false }),
-    'color-neutral-white': whenProps({ current: false, complete: true }),
-    'color-accent': whenProps({ current: true }),
   })};
+  border-radius: ${token('border-radius-circle')};
 
   background: ${conditional({
     'color-accent': whenProps([{ current: false, complete: true }]),
@@ -81,47 +95,41 @@ const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
     ]),
   })};
 
-  border-color: ${conditional({
-    'color-accent': whenProps([
-      { current: true, complete: [true, false] },
-      { current: false, complete: true },
-    ]),
+  color: ${conditional({
     'color-neutral': whenProps({ current: false, complete: false }),
+    'color-neutral-white': whenProps({ current: false, complete: true }),
+    'color-accent': whenProps({ current: true }),
   })};
-  border-style: solid;
-  border-width: 2px;
-  border-radius: ${token('border-radius-circle')};
+`
 
-  ${transition()}
+const StepLabel = styled.span<{ current: boolean; complete: boolean }>`
   ${font({
-    weight: 'font-weight-bold',
-    height: 'steps-indicator-size',
+    height: 'font-height-2',
   })}
-`
 
-const StepLabel = styled.span<{ current: boolean; complete: boolean }>`
   position: relative;
 
-  display: flex;
-  flex-direction: row;
-
-  align-items: center;
-  justify-content: center;
-
-  margin: ${token('space-xs')} 0 0 0;
-  font-size: ${token('font-size-4')};
   font-weight: ${conditional({
     'font-weight-medium': whenProps({ current: false }),
     'font-weight-bold': whenProps({ current: true }),
   })};
+
   color: ${conditional({
     'color-neutral-darker': whenProps([{ current: true }, { current: false, complete: true }]),
     'color-neutral': whenProps({ current: false, complete: false }),
   })};
+
+  font-size: ${token('font-size-4')};
+
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  justify-content: center;
+
   text-align: center;
-  ${font({
-    height: 'font-height-2',
-  })}
+
+  margin: ${token('space-xs')} 0 0 0;
 `
 
 function ProgressStep(props: { step: Step; current: boolean; indicator: ReactNode }): JSX.Element {

package/src/components/Switch/Switch.tsx

@@ -24,8 +24,19 @@ export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, With
 }
 
 const SwitchWrapper = styled.label<WithAdditionalProps>`
+  ${transition()}
+
+  ${font({})};
+
+  user-select: none;
+
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+
   position: relative;
+
   display: inline-flex;
+
   width: ${conditional({
     'switch-width': whenProps({ scale: 'default' }),
     'switch-large-width': whenProps({ scale: 'large' }),
@@ -34,28 +45,28 @@ const SwitchWrapper = styled.label<WithAdditionalProps>`
     'switch-height': whenProps({ scale: 'default' }),
     'switch-large-height': whenProps({ scale: 'large' }),
   })};
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
+
   background-color: ${conditional({
     'switch-inactive-background-color': whenProps({ active: false }),
     'switch-active-background-color': whenProps({ active: true }),
   })};
+
   border-radius: ${conditional({
     'switch-border-radius': whenProps({ scale: 'default' }),
     'switch-large-border-radius': whenProps({ scale: 'large' }),
   })};
-  ${transition()}
-  ${font({})};
+
   ${hoverable`
     background: ${conditional({
       'switch-inactive-background-color--hover': whenProps({ active: false }),
       'switch-active-background-color--hover': whenProps({ active: true }),
     })};
   `}
+
   ${focusable`
     box-shadow: ${token('switch-outline')}
   `}
+
   ${disableable``}
 `
 
@@ -91,7 +102,6 @@ const Slider = styled.span<WithAdditionalProps>`
       'switch-slider-large-size': whenProps({ scale: 'large' }),
     })};
 
-    content: '';
     background-color: ${token('switch-slider-background-color')};
     border-radius: ${token('switch-slider-border-radius')};
 
@@ -99,6 +109,8 @@ const Slider = styled.span<WithAdditionalProps>`
       timingFunction: 'ease-out',
       duration: '150ms',
     })}
+
+    content: '';
   }
 `
 

package/src/components/Table/Table.tsx

@@ -152,10 +152,10 @@ const StyledTable = styled.table<{ scale?: string }>`
 
   white-space: nowrap;
 
-  border-collapse: collapse;
-
   background-color: ${token('color-neutral-white')};
 
+  border-collapse: collapse;
+
   ${StyledTableBody} ${StyledTableRow},
   ${StyledTableBody} ${StyledExpandableTableRow} {
     height: ${conditional({

package/src/components/Tabs/Tabs.tsx

@@ -26,8 +26,8 @@ const TabsItemsWrapper = styled.ul`
   padding: 0;
 
   border-bottom-color: ${token('color-neutral-lighter')};
-  border-bottom-style: solid;
   border-bottom-width: 2px;
+  border-bottom-style: solid;
 `
 
 const StyledSpan = styled.span`
@@ -48,44 +48,50 @@ const Leading = styled(StyledSpan)`
 `
 
 const StyledLabel = styled.label<WithActiveProps & WithDirectionProps>`
-  position: relative;
-  bottom: -2px;
-  display: inline-flex;
-  flex-direction: ${conditional({
-    row: whenProps({ direction: 'horizontal' }),
-    column: whenProps({ direction: 'vertical' }),
-  })};
-  padding: ${token('space-m')} ${token('space-l')};
-  font-size: ${token('font-size-4')};
-
-  color: ${conditional({
-    'color-neutral': whenProps({ active: false }),
-    'neutral-darker': whenProps({ active: true }),
-  })};
-  text-transform: uppercase;
-
-  cursor: pointer;
-
-  border-color: ${conditional({
-    'color-transparent': whenProps({ active: false }),
-    'color-primary': whenProps({ active: true }),
-  })};
-  border-bottom-style: solid;
-  border-bottom-width: 2px;
-
   ${font({
     height: 'font-height-2',
     weight: 'font-weight-bold',
   })}
   ${transition()}
+
+  font-size: ${token('font-size-4')};
+  text-transform: uppercase;
+
   ${hoverable`
     color: ${token('color-neutral-darker')};
     background-color: ${token('color-neutral-light')}33;
   `}
+
   ${disableable`
     color: ${token('color-neutral-dark')}33;
     background-color: ${token('color-neutral-light')}33;
   `}
+
+  padding: ${token('space-m')} ${token('space-l')};
+  display: inline-flex;
+  flex-direction: ${conditional({
+    row: whenProps({ direction: 'horizontal' }),
+    column: whenProps({ direction: 'vertical' }),
+  })};
+
+  cursor: pointer;
+
+  position: relative;
+  bottom: -2px;
+
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+
+  border-color: ${conditional({
+    'color-transparent': whenProps({ active: false }),
+    'color-primary': whenProps({ active: true }),
+  })};
+
+  color: ${conditional({
+    'color-neutral': whenProps({ active: false }),
+    'neutral-darker': whenProps({ active: true }),
+  })};
+
   ${Leading} + ${Children} {
     margin: ${conditional({
         '0': whenProps({ direction: 'horizontal' }),

package/src/components/Tag/Tag.tsx

@@ -39,28 +39,44 @@ export interface TagProps extends React.HTMLAttributes<HTMLElement>, WithSizePro
 
 // styled elements
 const StyledTag = styled.span`
-  position: relative;
-  z-index: 0;
   display: inline-flex;
 
+  position: relative;
+
   width: auto;
 
+  z-index: 0;
+
   ${disableable`
     opacity: ${token('opacity-60')};
   `}
 `
 
 const StyledSpan = styled.span<TagProps>`
-  box-sizing: border-box;
+  ${transition()}
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  min-width: ${token('tag-width')};
-  height: ${conditional({
-    'tag-height': whenProps({ size: 'default' }),
-    'tag-small-height': whenProps({ size: 'small' }),
-    'tag-large-height': whenProps({ size: 'large' }),
+  box-sizing: border-box;
+
+  text-decoration: none;
+
+  ${typography(
+    conditional({
+      'chips-sm': whenProps({ size: 'small' }),
+      'caption-bold': whenProps({ size: 'default' }),
+      'body-bold': whenProps({ size: 'large' }),
+    })
+  )}
+
+  line-height: initial;
+
+  text-transform: ${conditional({
+    'tag-transform': whenProps({ size: 'default' }),
+    'tag-small-transform': whenProps({ size: 'small' }),
+    'tag-large-transform': whenProps({ size: 'large' }),
   })};
 
   padding: ${conditional({
@@ -69,7 +85,13 @@ const StyledSpan = styled.span<TagProps>`
     'tag-small-spacing-removable': whenProps([{ size: 'small', removable: true }]),
   })};
 
-  line-height: initial;
+  min-width: ${token('tag-width')};
+  height: ${conditional({
+    'tag-height': whenProps({ size: 'default' }),
+    'tag-small-height': whenProps({ size: 'small' }),
+    'tag-large-height': whenProps({ size: 'large' }),
+  })};
+
   color: ${conditional({
     'tag-default-color': whenProps({ variant: 'default' }),
     'tag-outlined-color': whenProps({ variant: 'outlined' }),
@@ -79,14 +101,6 @@ const StyledSpan = styled.span<TagProps>`
     'tag-danger-color': whenProps({ variant: 'danger' }),
   })};
 
-  text-decoration: none;
-
-  text-transform: ${conditional({
-    'tag-transform': whenProps({ size: 'default' }),
-    'tag-small-transform': whenProps({ size: 'small' }),
-    'tag-large-transform': whenProps({ size: 'large' }),
-  })};
-
   background: ${conditional({
     'tag-default-background': whenProps({ variant: 'default' }),
     'tag-outlined-background': whenProps({ variant: 'outlined' }),
@@ -96,6 +110,10 @@ const StyledSpan = styled.span<TagProps>`
     'tag-danger-background': whenProps({ variant: 'danger' }),
   })};
 
+  border-radius: ${token('tag-border-radius')};
+  border-width: ${token('tag-border-width')};
+  border-style: solid;
+
   border-color: ${conditional({
     'tag-default-border-color': whenProps({ variant: 'default' }),
     'tag-outlined-border-color': whenProps({ variant: 'outlined' }),
@@ -104,18 +122,7 @@ const StyledSpan = styled.span<TagProps>`
     'tag-warning-border-color': whenProps({ variant: 'warning' }),
     'tag-danger-border-color': whenProps({ variant: 'danger' }),
   })};
-  border-style: solid;
-  border-width: ${token('tag-border-width')};
-  border-radius: ${token('tag-border-radius')};
 
-  ${transition()}
-  ${typography(
-    conditional({
-      'chips-sm': whenProps({ size: 'small' }),
-      'caption-bold': whenProps({ size: 'default' }),
-      'body-bold': whenProps({ size: 'large' }),
-    })
-  )}
   ${hoverable`
     background: ${conditional({
       'tag-default-background--hover': whenProps([
@@ -198,6 +205,7 @@ const StyledSpan = styled.span<TagProps>`
       ]),
     })};
   `}
+
   ${focusable`
     color: ${conditional({
       'tag-default-color--focus': whenProps({ variant: 'default' }),
@@ -217,6 +225,7 @@ const StyledSpan = styled.span<TagProps>`
     })};
     box-shadow: ${token('tag-outline')};
   `}
+
   ${disableable`
     opacity: ${token('opacity-60')};
   `}
@@ -239,8 +248,14 @@ const StyledCloseButton = styled.button<WithSizeProps & WithVariantProps>`
   z-index: 2;
 
   display: inline-flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+
+  background: ${token('tag-remove-button-background')};
+  border-radius: ${token('tag-remove-button-border-radius')};
+  border: 0;
 
   width: ${conditional({
     'tag-remove-button-size': whenProps({ size: 'default' }),
@@ -256,12 +271,6 @@ const StyledCloseButton = styled.button<WithSizeProps & WithVariantProps>`
 
   padding: 0;
 
-  cursor: pointer;
-
-  background: ${token('tag-remove-button-background')};
-  border: 0;
-  border-radius: ${token('tag-remove-button-border-radius')};
-
   ${disableable`
     opacity: ${token('opacity-60')};
   `}

package/src/components/TextField/TextField.tsx

@@ -34,12 +34,12 @@ const InputWrapper = styled.div<WithAdditionalProps>`
   display: inline-flex;
   flex-flow: row nowrap;
 
-  min-width: 0;
   height: ${conditional({
     'text-field-height': whenProps({ scale: 'default' }),
     'text-field-small-height': whenProps({ scale: 'small' }),
     'text-field-large-height': whenProps({ scale: 'large' }),
   })};
+  min-width: 0;
 
   ${font({
     height: 'text-field-font-height',
@@ -51,10 +51,10 @@ const InputWrapper = styled.div<WithAdditionalProps>`
     'text-field-large-font-size': whenProps({ scale: 'large' }),
   })};
 
-  color: ${conditional({
-    'text-field-color': whenProps({ scheme: 'light' }),
-    'text-field-dark-color': whenProps({ scheme: 'dark' }),
-  })};
+  border-radius: ${token('text-field-border-radius')};
+  border-width: 1px;
+  border-style: solid;
+
   background: ${conditional({
     'text-field-background': whenProps({ scheme: 'light' }),
     'text-field-dark-background': whenProps({ scheme: 'dark' }),
@@ -66,9 +66,11 @@ const InputWrapper = styled.div<WithAdditionalProps>`
     'text-field-danger-border-color': whenProps({ status: Status.Danger }),
     'text-field-success-border-color': whenProps({ status: Status.Success }),
   })};
-  border-style: solid;
-  border-width: 1px;
-  border-radius: ${token('text-field-border-radius')};
+
+  color: ${conditional({
+    'text-field-color': whenProps({ scheme: 'light' }),
+    'text-field-dark-color': whenProps({ scheme: 'dark' }),
+  })};
 
   ${hoverable`
     background: ${conditional({
@@ -136,8 +138,14 @@ export const Trailing = styled(StyledSpan)<WithAdditionalProps>`
 `
 
 const StyledInput = styled.input<WithAdditionalProps>`
-  flex: 1;
-  min-width: 0;
+  ${transition()}
+
+  ${font({
+    height: 'text-field-font-height',
+  })}
+
+  background: transparent;
+
   padding: ${conditional({
       'text-field-padding-y': whenProps({ scale: 'default' }),
       'text-field-small-padding-y': whenProps({ scale: 'small' }),
@@ -151,13 +159,12 @@ const StyledInput = styled.input<WithAdditionalProps>`
       'text-field-small-padding-x': whenProps({ scale: 'small' }),
     })};
 
-  background: transparent;
   border: none;
 
-  ${transition()}
-  ${font({
-    height: 'text-field-font-height',
-  })}
+  flex: 1;
+
+  min-width: 0;
+
   ${focusable()}
   ${disableable()}