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

package/src/components/Textarea/Textarea.tsx

@@ -48,10 +48,9 @@ const TextareaWrapper = styled.div<WithAdditionalProps>`
     'textarea-large-font-size': whenProps({ scale: 'large' }),
   })};
 
-  color: ${conditional({
-    'textarea-color': whenProps({ scheme: 'light' }),
-    'textarea-dark-color': whenProps({ scheme: 'dark' }),
-  })};
+  border-radius: ${token('textarea-border-radius')};
+  border-width: 1px;
+  border-style: solid;
 
   background: ${conditional({
     'textarea-background': whenProps({ scheme: 'light' }),
@@ -64,9 +63,11 @@ const TextareaWrapper = styled.div<WithAdditionalProps>`
     'textarea-danger-border-color': whenProps({ status: Status.Danger }),
     'textarea-success-border-color': whenProps({ status: Status.Success }),
   })};
-  border-style: solid;
-  border-width: 1px;
-  border-radius: ${token('textarea-border-radius')};
+
+  color: ${conditional({
+    'textarea-color': whenProps({ scheme: 'light' }),
+    'textarea-dark-color': whenProps({ scheme: 'dark' }),
+  })};
 
   ${hoverable`
     background: ${conditional({
@@ -119,30 +120,36 @@ const StyledSpan = styled.span<WithAdditionalProps>`
 const Leading = styled(StyledSpan)<WithAdditionalProps>`
   align-items: flex-start;
 
-  padding: ${token('space-s')} 0;
-
   margin: 0 0 0
     ${conditional({
       'text-field-padding-x': whenProps({ scale: ['default', 'large'] }),
       'text-field-small-padding-x': whenProps({ scale: 'small' }),
     })};
+
+  padding: ${token('space-s')} 0;
 `
 
 const Trailing = styled(StyledSpan)<WithAdditionalProps>`
   align-items: flex-start;
 
-  padding: ${token('space-s')} 0;
-
   margin: 0
     ${conditional({
       'text-field-padding-x': whenProps({ scale: ['default', 'large'] }),
       'text-field-small-padding-x': whenProps({ scale: 'small' }),
     })}
     0 0;
+
+  padding: ${token('space-s')} 0;
 `
 
 const StyledTextarea = styled.textarea<WithAdditionalProps>`
-  flex: 1 0 auto;
+  ${transition()}
+
+  ${font({
+    height: 'textarea-font-height',
+  })}
+
+  background: transparent;
 
   padding: ${conditional({
       'textarea-padding-y': whenProps({ scale: 'default' }),
@@ -150,19 +157,17 @@ const StyledTextarea = styled.textarea<WithAdditionalProps>`
       'textarea-large-padding-y': whenProps({ scale: 'large' }),
     })}
     0;
+
   margin: 0
     ${conditional({
       'textarea-padding-x': whenProps({ scale: ['default', 'large'] }),
       'textarea-small-padding-x': whenProps({ scale: 'small' }),
     })};
 
-  background: transparent;
   border: none;
 
-  ${transition()}
-  ${font({
-    height: 'textarea-font-height',
-  })}
+  flex: 1 0 auto;
+
   ${focusable()}
   ${disableable()}
 `

package/src/components/Toast/Toast.tsx

@@ -18,11 +18,11 @@ const Container = styled.div<ContainerProps>`
   max-width: 100%;
   padding: ${token('toast-padding-y')} ${token('toast-padding-x')};
   overflow: hidden;
-  font-size: ${token('toast-font-size')};
-  font-weight: ${token('toast-font-weight')};
-  line-height: ${token('toast-font-height')};
 
   color: ${token('toast-font-color')};
+  font-weight: ${token('toast-font-weight')};
+  font-size: ${token('toast-font-size')};
+  line-height: ${token('toast-font-height')};
 
   background: ${conditional({
     'toast-neutral-background': whenProps({ status: Status.Neutral }),

package/src/components/ToggleGroup/Toggle.tsx

@@ -14,13 +14,6 @@ import ToggleGroupContext, { SelectableContext } from './ToggleGroupContext'
 import type { ToggleGroupOptionProps, ToggleGroupType } from './ToggleGroup.types'
 
 const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
-  padding: ${token('space-xs')} ${token('space-s')};
-
-  color: ${conditional({
-    'color-neutral-darker': whenProps({ 'aria-checked': false }),
-    'color-neutral-white': whenProps({ 'aria-checked': true }),
-  })};
-
   background: ${conditional({
     'color-transparent': whenProps({ 'aria-checked': false }),
     'color-neutral-darkest': whenProps({ 'aria-checked': true }),
@@ -34,6 +27,13 @@ const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
     'color-transparent': whenProps({ $type: 'single', 'aria-checked': false }),
   })};
 
+  color: ${conditional({
+    'color-neutral-darker': whenProps({ 'aria-checked': false }),
+    'color-neutral-white': whenProps({ 'aria-checked': true }),
+  })};
+
+  padding: ${token('space-xs')} ${token('space-s')};
+
   ${hoverable`
     border-color: ${conditional({
       'color-neutral-dark': whenProps({ $type: 'multiple' }),

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -87,6 +87,19 @@ Playground.args = {
   scale: 'default',
 }
 
+const withIconOptions = [
+  {
+    label: 'Above',
+    value: true,
+    leading: <span>&clubs;</span>,
+  },
+  {
+    label: 'Below',
+    value: false,
+    leading: <span>&spades;</span>,
+  },
+]
+
 export const WithIcon: Story<ToggleGroupProps> = (args) => {
   return (
     <div className="flex flex-row">
@@ -97,18 +110,7 @@ export const WithIcon: Story<ToggleGroupProps> = (args) => {
           aria-labelledby="rank_options_label"
           id="rank_options"
           name="rank_options"
-          options={[
-            {
-              label: 'Above',
-              value: true,
-              leading: <span>&clubs;</span>,
-            },
-            {
-              label: 'Below',
-              value: false,
-              leading: <span>&spades;</span>,
-            },
-          ]}
+          options={withIconOptions}
         />
       </div>
 

package/src/components/Tooltip/Tooltip.tsx

@@ -32,10 +32,10 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
 type ContainerProps = Pick<TooltipProps, 'scheme'>
 
 const Container = styled.div<ContainerProps>`
-  position: relative;
-
   display: inline-block;
 
+  position: relative;
+
   cursor: help;
 
   ${focusable`
@@ -49,22 +49,31 @@ const Container = styled.div<ContainerProps>`
 type BubbleProps = Pick<TooltipProps, 'position' | 'align'>
 
 const Bubble = styled.span<BubbleProps>`
-  position: absolute;
-  z-index: ${token('z-index-tooltip')};
+  ${font({
+    weight: 'font-weight-medium',
+    height: 'font-height-3',
+  })}
+
+  ${transition()}
+
+  white-space: initial;
 
-  width: max-content;
   min-width: ${token('tooltip-min-width')};
   max-width: ${token('tooltip-max-width')};
+  width: max-content;
+
+  position: absolute;
+  z-index: ${token('z-index-tooltip')};
+
+  background: ${token('tooltip-background')};
+  box-shadow: ${token('tooltip-shadow')};
+  border-radius: ${token('tooltip-border-radius')};
 
   padding: ${token('tooltip-padding-y')} ${token('tooltip-padding-x')};
 
+  color: ${token('tooltip-color')};
   font-size: ${token('tooltip-font-size')};
   line-height: ${token('tooltip-font-height')};
-  color: ${token('tooltip-color')};
-  white-space: initial;
-  background: ${token('tooltip-background')};
-  border-radius: ${token('tooltip-border-radius')};
-  box-shadow: ${token('tooltip-shadow')};
 
   ${({ position }) =>
     position === TooltipPosition.Top &&
@@ -109,26 +118,19 @@ const Bubble = styled.span<BubbleProps>`
 
       transform: translate(100%, -50%);
     `};
-
-  ${font({
-    weight: 'font-weight-medium',
-    height: 'font-height-3',
-  })}
-
-  ${transition()}
 `
 
 type ArrowProps = Pick<TooltipProps, 'position'>
 const Arrow = styled.span<ArrowProps>`
-  position: absolute;
-  z-index: 1;
-
   width: 0;
   height: 0;
 
   background: transparent;
   border-style: solid;
 
+  position: absolute;
+  z-index: 1;
+
   ${({ position }) =>
     position === TooltipPosition.Top &&
     css`

package/src/components/TopNavigation/Menu/MenuItemDropdown.tsx

@@ -27,8 +27,8 @@ const MenuDropdownTrigger = styled(DropdownTrigger.Handle)`
 export const MenuDropdownLabel = styled.label`
   ${transition()}
 
-  display: flex;
   align-items: center;
+  display: flex;
 
   ${typography('body-bold', { color: 'top-navigation-item-color' })}
 

package/src/components/TopNavigation/OpenSideNavButton/OpenSideNavButton.tsx

@@ -11,10 +11,10 @@ export type OpenSideNavButtonProps = {
 
 const Container = styled.button`
   margin-right: ${token('space-2xl')};
-  cursor: pointer;
 
   background: none;
   border: none;
+  cursor: pointer;
 `
 
 function OpenSideNavButton({ className, onClick }: OpenSideNavButtonProps): JSX.Element {

package/src/styles/font.tsx

@@ -26,11 +26,11 @@ function fontStyle({
   transform = 'none',
 }: FontStyleOptions): FlattenInterpolation<ThemedProps> {
   return css`
-    font-family: ${getToken(family)};
-    font-size: ${getToken(size)};
+    color: ${getToken(color)};
     font-weight: ${getToken(weight)};
+    font-size: ${getToken(size)};
+    font-family: ${getToken(family)};
     line-height: ${getToken(height)};
-    color: ${getToken(color)};
     text-transform: ${transform};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

package/src/testing/SelectEvent/SelectEvent.ts

@@ -1,16 +1,50 @@
-/* eslint-disable */
-import { fireEvent, queries, waitFor, within } from '@testing-library/dom'
+import { fireEvent, waitFor, within, waitForElementToBeRemoved } from '@testing-library/react'
 import { act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 // based on https://github.com/romgain/react-select-event/blob/master/src/index.ts
 
-// find the react-select container from its input field 🤷
-function getReactSelectContainerFromInput(input: HTMLElement): HTMLElement {
+// find the select container from its input field 🤷
+function getSelectContainer(input: HTMLElement): HTMLElement {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return input.parentNode!.parentNode!.parentNode as HTMLElement
 }
 
+/**
+ * Please, make sure to call expand before trying to get the menu container
+ */
+function getSelectMenu(input: HTMLElement): HTMLElement {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return input.parentNode!.parentNode!.nextSibling as HTMLElement
+}
+
+function getSelectTriggerHandle(input: HTMLElement): HTMLElement {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return input.parentNode!.nextSibling!.nextSibling as HTMLElement
+}
+
+function getSelectSearchContainer(input: HTMLElement): HTMLElement {
+  return input.parentNode as HTMLElement
+}
+
+function isSelectMenuExpanded(input: HTMLElement): boolean {
+  const selectContainer = getSelectContainer(input)
+
+  /**
+   * Once the select is expanded, we have the following structure:
+   * +-------------+
+   * | Close button (visually hiddren)
+   * +-------------+
+   * | DropdownTrigger
+   * +-------------+
+   * | Popover
+   * +-------------+
+   *
+   * This, if the container has 3 children, we assume the menu is expanded
+   */
+  return selectContainer.children.length == 3
+}
+
 /**
  * This is needed because some datasources might be asynchronous.
  * To ensure that the data they retrieve will be available, we wait for the
@@ -18,15 +52,16 @@ function getReactSelectContainerFromInput(input: HTMLElement): HTMLElement {
  * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
  */
 async function waitForPendingQuery(input: HTMLElement) {
-  const selectContainer = getReactSelectContainerFromInput(input)
+  const searchContainer = getSelectSearchContainer(input)
 
-  await waitFor(() => {
-    expect(queries.queryByTestId(selectContainer, 'select-trigger-loading')).not.toBeInTheDocument()
-  })
+  if (!within(searchContainer).queryByTestId('select-trigger-loading')) {
+    return
+  }
 
-  await waitFor(() => {
-    expect(queries.queryByText(selectContainer, 'Loading...')).not.toBeInTheDocument()
-  })
+  await waitForElementToBeRemoved(
+    () => within(searchContainer).queryByTestId('select-trigger-loading'),
+    { timeout: 2500 }
+  )
 }
 
 /**
@@ -35,21 +70,22 @@ async function waitForPendingQuery(input: HTMLElement) {
  * @returns {Promise<void>}
  */
 async function expand(input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
+  await waitForPendingQuery(input)
 
-  // if listbox is rendered, then the select is already expanded
-  if (queries.queryByRole(selectContainer, 'listbox')) {
+  if (isSelectMenuExpanded(input)) {
     return
   }
 
+  const triggerHandle = getSelectTriggerHandle(input)
+
   await waitFor(() => {
-    expect(within(selectContainer).getByTestId('select-trigger-handle')).toBeEnabled()
+    expect(triggerHandle).toBeEnabled()
   })
 
-  await act(async () => {
-    userEvent.click(within(selectContainer).getByTestId('select-trigger-handle'))
+  userEvent.click(triggerHandle)
 
-    expect(await queries.findByRole(selectContainer, 'listbox')).toBeInTheDocument()
+  await waitFor(async () => {
+    expect(await within(getSelectContainer(input)).findByRole('listbox')).toBeInTheDocument()
   })
 }
 
@@ -59,19 +95,16 @@ async function expand(input: HTMLElement): Promise<void> {
  * @returns {Promise<void>}
  */
 async function collapse(input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-
-  // if listbox is not rendered, then the select is already collapsed
-  if (!queries.queryByRole(selectContainer, 'listbox')) {
+  if (!isSelectMenuExpanded(input)) {
     return
   }
 
-  await act(async () => {
-    userEvent.click(within(selectContainer).getByTestId('select-trigger-handle'))
+  const triggerHandle = getSelectTriggerHandle(input)
 
-    await waitFor(() => {
-      expect(queries.queryByRole(selectContainer, 'listbox')).not.toBeInTheDocument()
-    })
+  userEvent.click(triggerHandle)
+
+  await waitFor(() => {
+    expect(within(getSelectContainer(input)).queryByRole('listbox')).not.toBeInTheDocument()
   })
 }
 
@@ -83,19 +116,16 @@ async function collapse(input: HTMLElement): Promise<void> {
  * @returns {Promise<void>}
  */
 async function select(option: string, input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-
-  await waitForPendingQuery(input)
   await expand(input)
 
-  await act(async () => {
-    const optionElement = await queries.findByLabelText(selectContainer, option)
+  const menuContainer = getSelectMenu(input)
 
-    // click the option if exists; Select currently closes when an item is clicked.
-    if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {
-      userEvent.click(optionElement)
-    }
-  })
+  const optionElement = await within(menuContainer).findByLabelText(option)
+
+  // click the option if exists; Select currently closes when an item is clicked.
+  if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {
+    userEvent.click(optionElement)
+  }
 
   // we collapse in the case the option was not clicked
   await collapse(input)
@@ -109,19 +139,16 @@ async function select(option: string, input: HTMLElement): Promise<void> {
  * @returns {Promise<void>}
  */
 async function unselect(option: string, input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-
-  await waitForPendingQuery(input)
   await expand(input)
 
-  await act(async () => {
-    const optionElement = await queries.findByLabelText(selectContainer, option)
+  const menuContainer = getSelectMenu(input)
 
-    // ensures that the option exists and IS selected
-    if (optionElement && optionElement.getAttribute('aria-selected') == 'true') {
-      userEvent.click(optionElement)
-    }
-  })
+  const optionElement = await within(menuContainer).findByLabelText(option)
+
+  // ensures that the option exists and IS selected
+  if (optionElement && optionElement.getAttribute('aria-selected') == 'true') {
+    userEvent.click(optionElement)
+  }
 
   // we collapse in the case the option was not clicked
   await collapse(input)
@@ -133,13 +160,13 @@ async function unselect(option: string, input: HTMLElement): Promise<void> {
  * @returns {Promise<void>}
  */
 async function clear(input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-
   await waitForPendingQuery(input)
 
-  await act(async () => {
-    const clearButton = within(selectContainer).getByTestId('select-trigger-clear')
+  const searchContainer = getSelectSearchContainer(input)
+
+  const clearButton = within(searchContainer).getByTestId('select-trigger-clear')
 
+  act(() => {
     if (clearButton) {
       userEvent.click(clearButton)
     }
@@ -153,13 +180,11 @@ async function clear(input: HTMLElement): Promise<void> {
  * @returns {Promise<void>}
  */
 async function search(query: string, input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
+  const selectContainer = getSelectContainer(input)
 
-  await act(async () => {
-    fireEvent.change(input, { target: { value: query } })
+  fireEvent.change(input, { target: { value: query } })
 
-    await queries.findAllByRole(selectContainer, 'option')
-  })
+  await within(selectContainer).findAllByRole('option')
 }
 
 /**
@@ -168,14 +193,15 @@ async function search(query: string, input: HTMLElement): Promise<void> {
  * @returns {Promise<HTMLElement[]>}
  */
 async function getOptions(input: HTMLElement): Promise<HTMLElement[]> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-
-  await waitForPendingQuery(input)
   await expand(input)
-  const selectedOptions = queries.queryAllByRole(selectContainer, 'option')
+
+  const menuContainer = getSelectMenu(input)
+
+  const options = within(menuContainer).queryAllByRole('option')
+
   await collapse(input)
 
-  return selectedOptions
+  return options
 }
 
 /**
@@ -184,14 +210,15 @@ async function getOptions(input: HTMLElement): Promise<HTMLElement[]> {
  * @returns {Promise<HTMLElement[]>}
  */
 async function getSelectedOptions(input: HTMLElement): Promise<HTMLElement[]> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-  let selectedOptions: HTMLElement[] = []
-
-  await waitForPendingQuery(input)
   await expand(input)
 
+  const menuContainer = getSelectMenu(input)
+  let selectedOptions: HTMLElement[] = []
+
   try {
-    selectedOptions = await queries.findAllByRole(selectContainer, 'option', { selected: true })
+    selectedOptions = await within(menuContainer).findAllByRole('option', {
+      selected: true,
+    })
   } catch (err) {
     selectedOptions = []
   }
@@ -210,6 +237,7 @@ export const selectEvent = {
   collapse,
   getOptions,
   getSelectedOptions,
+  isMenuExpanded: isSelectMenuExpanded,
 }
 
 export default selectEvent