fix(dropdown): fix alignment

Also fix position of toolbar dropdown
snowball-tech · Mar 26, 2024 · f11cfcc · f11cfcc
1 parent 6179738
commit f11cfcc
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 5 deletions.
diff --git a/packages/fractal/src/components/Autocomplete/Autocomplete.tsx b/packages/fractal/src/components/Autocomplete/Autocomplete.tsx
@@ -293,9 +293,9 @@ export const Autocomplete = forwardRef<CombinedRefs, AutocompleteProps>(
 
  <Dropdown
  ref={dropdownRef}
+ align="end"
  disabled={disabled}
  dropdown={{
- align: 'end',
  className: cn(
  `${PREFIX}-${GROUP_NAME}__dropdown`,
  dropdown.className,

diff --git a/packages/fractal/src/components/Dropdown/Dropdown.tsx b/packages/fractal/src/components/Dropdown/Dropdown.tsx
@@ -295,7 +295,7 @@ perfectionist/sort-objects */
  {isOpen && (
  <RxDropdown.Content
  ref={dropdownRef}
- align={align ?? withIndicator ? 'end' : 'center'}
+ align={align || (withIndicator ? 'end' : 'center')}
  asChild
  className={cn(
  `${PREFIX}-${GROUP_NAME}__dropdown`,

diff --git a/packages/fractal/src/components/Dropdown/Dropdown.types.ts b/packages/fractal/src/components/Dropdown/Dropdown.types.ts
@@ -117,7 +117,7 @@ export interface DropdownProps extends AllHTMLAttributes<HTMLDivElement> {
  * option;
  * - a number: the width of the dropdown will be the number of pixels
  * provided.
- * - '*<number>' (a number prefixed with the '*' character): the width of
+ * - '*number' (a number prefixed with the '*' character): the width of
  * the popover will be the provided fraction of the width of the trigger.
  * For example '*0.5' will make the popover width half the width of the
  * trigger.

diff --git a/packages/fractal/src/components/Popover/Popover.types.ts b/packages/fractal/src/components/Popover/Popover.types.ts
@@ -101,7 +101,7 @@ export interface PopoverProps extends AllHTMLAttributes<HTMLDivElement> {
  * - '*<number>': the width of the popover will be the provided fraction of
  * the width of the trigger. For example '*0.5' will make the popover
  * width half the width of the trigger.
- * - '*<number>' (a number prefixed with the '*' character): the width of
+ * - '*number' (a number prefixed with the '*' character): the width of
  * the popover will be the provided fraction of the width of the trigger.
  * For example '*0.5' will make the popover width half the width of the
  * trigger.

diff --git a/packages/fractal/src/components/Toolbar/ToolbarDropdown.stories.tsx b/packages/fractal/src/components/Toolbar/ToolbarDropdown.stories.tsx
@@ -62,6 +62,16 @@ const mixedMenu = (
 
 const meta: Meta<ToolbarDropdownProps> = {
  argTypes: {
+ align: {
+ control: 'radio',
+ mapping: {
+ Auto: undefined,
+ Center: 'center',
+ End: 'end',
+ Start: 'start',
+ },
+ options: ['Auto', 'Start', 'Center', 'End'],
+ },
  children: {
  control: 'radio',
  mapping: {
@@ -97,6 +107,17 @@ const meta: Meta<ToolbarDropdownProps> = {
  },
  options: ['None', 'Cancel', 'Check', 'Error', 'Send', 'Star'],
  },
+ side: {
+ control: 'radio',
+ mapping: {
+ Auto: undefined,
+ Bottom: 'bottom',
+ Left: 'left',
+ Right: 'right',
+ Top: 'top',
+ },
+ options: ['Auto', 'Top', 'Right', 'Bottom', 'Left'],
+ },
  width: {
  control: 'radio',
  options: [
@@ -115,6 +136,7 @@ const meta: Meta<ToolbarDropdownProps> = {
  },
  args: {
  active: false,
+ align: undefined,
  children: 'Text',
  defaultOpen: false,
  disabled: false,
@@ -125,6 +147,7 @@ const meta: Meta<ToolbarDropdownProps> = {
  iconPosition: 'left',
  label: 'Star wars characters',
  open: false,
+ side: undefined,
  width: 'fit',
  withIndicator: true,
  },

diff --git a/packages/fractal/src/components/Toolbar/ToolbarDropdown.tsx b/packages/fractal/src/components/Toolbar/ToolbarDropdown.tsx
@@ -58,7 +58,7 @@ export const ToolbarDropdown = forwardRef<
  aria-label={label}
  className={cn(
  `${PREFIX}-${GROUP_NAME}__dropdown`,
- `group h-3 max-h-3 rounded-xs [&_.fractal-dropdown\\\\_\\\\_trigger\\\\_\\\\_indicator>svg]:size-one-and-half`,
+ 'group h-3 max-h-3 rounded-xs',
  // eslint-disable-next-line no-nested-ternary
  isOpen && !isDisabled
  ? 'text-dark'
@@ -72,6 +72,10 @@ export const ToolbarDropdown = forwardRef<
  )}
  condensed
  disabled={isDisabled}
+ dropdown={{
+ className:
+ 'data-[side="bottom"]:mt-2 data-[side="top"]:mb-2 data-[side="right"]:ml-[calc(theme(spacing.2)+theme(spacing.half))] data-[side="left"]:mr-[calc(theme(spacing.2)+theme(spacing.half))]',
+ }}
  elevation={elevation}
  title={label}
  trigger={