Merge branch 'develop' into feat/categories-ui

.changeset/light-frogs-smoke.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+ fix(admin-ui): Add gap in table actions

packages/admin-ui/ui/src/components/molecules/table/index.tsx

@@ -1,13 +1,11 @@
-import clsx from "clsx"
-import React from "react"
-import { useNavigate } from "react-router-dom"
-import Spinner from "../../atoms/spinner"
-import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
-import ArrowRightIcon from "../../fundamentals/icons/arrow-right-icon"
-import SortingIcon from "../../fundamentals/icons/sorting-icon"
 import Actionables, { ActionType } from "../../molecules/actionables"
 import FilteringOptions, { FilteringOptionProps } from "./filtering-option"
+
+import React from "react"
+import SortingIcon from "../../fundamentals/icons/sorting-icon"
 import TableSearch from "./table-search"
+import clsx from "clsx"
+import { useNavigate } from "react-router-dom"
 
 type TableRowProps = React.HTMLAttributes<HTMLTableRowElement> & {
  forceDropdown?: boolean
@@ -73,17 +71,17 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
 
  return (
  <div className={`flex flex-col ${containerClassName}`}>
- <div className="w-full flex justify-between mb-2">
+ <div className="mb-2 flex w-full justify-between">
  {filteringOptions ? (
- <div className="flex mb-2 self-end">
+ <div className="mb-2 flex self-end">
  {Array.isArray(filteringOptions)
  ? filteringOptions.map((fo) => <FilteringOptions {...fo} />)
  : filteringOptions}
  </div>
  ) : (
  <span aria-hidden />
  )}
- <div className="flex items-center">
+ <div className="gap-x-xsmall flex items-center">
  {tableActions && <div>{tableActions}</div>}
  {enableSearch && (
  <TableSearch
@@ -116,7 +114,7 @@ Table.Head = React.forwardRef<
  <thead
  ref={ref}
  className={clsx(
- "whitespace-nowrap inter-small-semibold text-grey-50 border-t border-b border-grey-20",
+ "inter-small-semibold text-grey-50 border-grey-20 whitespace-nowrap border-t border-b",
  className
  )}
  {...props}
@@ -138,7 +136,7 @@ Table.HeadCell = React.forwardRef<
  HTMLTableCellElement,
  React.HTMLAttributes<HTMLTableCellElement>
 >(({ className, children, ...props }, ref) => (
- <th ref={ref} className={clsx("text-left h-[40px]", className)} {...props}>
+ <th ref={ref} className={clsx("h-[40px] text-left", className)} {...props}>
  {children}
  </th>
 ))
@@ -159,9 +157,9 @@ Table.SortingHeadCell = React.forwardRef<
  ref
  ) => {
  return (
- <th ref={ref} className={clsx("text-left py-2.5", className)} {...props}>
+ <th ref={ref} className={clsx("py-2.5 text-left", className)} {...props}>
  <div
- className="flex items-center cursor-pointer select-none"
+ className="flex cursor-pointer select-none items-center"
  onClick={(e) => {
  e.preventDefault()
  if (!sortDirection) {
@@ -225,9 +223,9 @@ Table.Row = React.forwardRef<HTMLTableRowElement, TableRowProps>(
  <tr
  ref={ref}
  className={clsx(
- "inter-small-regular border-t border-b border-grey-20 text-grey-90",
+ "inter-small-regular border-grey-20 text-grey-90 border-t border-b",
  className,
- { "cursor-pointer hover:bg-grey-5": linkTo !== undefined }
+ { "hover:bg-grey-5 cursor-pointer": linkTo !== undefined }
  )}
  {...props}
  {...(linkTo && {

packages/admin-ui/ui/src/domain/products/components/sales-channels-modal/available-screen.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from "react"
-import { usePagination, useRowSelect, useTable } from "react-table"
-import Modal from "../../../../components/molecules/modal"
-import { useDebounce } from "../../../../hooks/use-debounce"
 import SalesChannelTable, {
  SalesChannelTableActions,
  useSalesChannelsTableColumns,
 } from "./table"
+import { usePagination, useRowSelect, useTable } from "react-table"
+
+import Modal from "../../../../components/molecules/modal"
+import { useDebounce } from "../../../../hooks/use-debounce"
 import { useSalesChannelsModal } from "./use-sales-channels-modal"
 
-const LIMIT = 15
+const LIMIT = 12
 
 const AvailableScreen = () => {
  const { source, onSave } = useSalesChannelsModal()
@@ -75,7 +76,7 @@ const AvailableScreen = () => {
  />
  }
  setSelectedRowIds={setSelectedRowIds}
- limit={15}
+ limit={LIMIT}
  offset={offset}
  setOffset={setOffset}
  setQuery={setQuery}