@adaptavant/core@0.0.12

This release is our third Release Candidate for Earth 1.0.

As with the last RC, we encourage you to try it out and give us feedback to ensure we can address it before we publish the stable release.

Here are the highlights:

Previously, we were applying a CSS reset per element. This meant that reset styles didn't leak out and affect other components that might not work with them, but since we're all in on Tailwind, we decided to remove our resets and rely on Preflight.

We've updated the Avatar component to accept children designed to be used with two new subcomponents: AvatarImage and AvatarIcon.

Now that we have AvatarImage, we've deprecated the imageSrc prop. We are planning to remove this prop before we release 1.0, so please update to the new API before then to ensure a smoother upgrade experience in the future:

// before
<Avatar
  imageSrc="https://placehold.co/40.png"
  name="Robert Anderson"
  size="40"
/>

// after
<Avatar
  name="Robert Anderson"
  size="40"
>
  <AvatarImage src="https://placehold.co/40.png" />
</Avatar>

The catalyst for changing the API for Avatar was the introduction of icon avatars. Here is how to create an Avatar with an icon:

<Avatar
  name="Robert Anderson"
  size="64"
>
  <AvatarIcon icon={ProfileIcon} />
</Avatar>

This new API allows us to avoid overloading the Avatar component with props that should not be used together, and it increases the flexibility of our Avatar component to be further extended in the future.

We've added lots of new icons: AmexColorIcon, ApplePayColorIcon, CashAppPayColorIcon, GooglePayColorIcon, MastercardColorIcon, SecuredIcon, VisaColorIcon, BlockIcon, CalView3DayIcon, CheckCircleIcon, CheckUserIcon, CircleDashIcon, CropIcon, CustomerIcon, DeviceMobileIcon, EyeHiddenIcon, EyeVisibleIcon, HomeIcon, InboxIcon, KeypadIcon, LinkedinIcon, MoneyIcon, NavigationIcon, NewWindowIcon, NotesFilledIcon, NotesIcon, QrCodeIcon, RotateItemIcon, SlotIcon, SortDownIcon, SortUpIcon, StatusAwayFilledIcon, StatusBusyFilledIcon, StatusOfflineFilledIcon, SupportFilledIcon, TextCopyIcon, TryProFilledIcon, YocoTimerIcon, and YoutubeIcon.

We've also added CalDynamicIcon, which is available as an experimental component. It works like our other icons but accepts children so you can pass in a number to display the current date.

This is a new experimental component.

Traditionally, adornments are interactive elements. A classic example of this is a password input with a show/hide button to mask and unmask what you have typed. Clickable Adornments are for wrapping non-interactive elements where you want to provide some supplementary information, such as a prefix or suffix for the input's intended value. Since these appear to be inside the input, users might click on them expecting to be able to type into the input (since there is no clear visual indicator of where the actual <input> element is when using an adornment). By using a Clickable Adornment, we will focus the input for you.

This is a new experimental component.

This is a new input that is styled to not have a border for UIs that require a more subtle appearance.

This is a new experimental component.

We've added a new Tag component for displaying content in various situations, such as the selected values for a multiselect. It is a compound component that has adornments for a TagAvatar or TagButton, and it is designed to work for drag-and-drop applications.

This is an experimental component.

We've rebuilt the Tooltip component from scratch rather than wrapping a library. This gives us more control to render the Tooltip inside a Portal to avoid overflow-hidden and z-index issues, as well as extra placement options.

We've also changed the API slightly. The new design adopts a render prop pattern for children. This pattern allows for passing values directly to the trigger element:

// before
<Tooltip content="Copy">
  <IconButton
    aria-label="Copy icon"
    icon={ClipboardCopyIcon}
    variant="neutralSecondary"
  />
</Tooltip>

// after
<Tooltip content="Copy">
  {({ triggerProps }) => (
    <IconButton
      aria-label="Copy icon"
      icon={ClipboardCopyIcon}
      variant="neutralSecondary"
      {...triggerProps}
    />
  )}
</Tooltip>

Previously, we used React.cloneElement (which the React docs advise caution with) to attempt to automatically merge the props provided by the consumer with the props required for the Tooltip to work correctly. Because this happens internally within the component, users are unable to override this behaviour if they ever need to. Additionally, this approach could be confusing for consumers. They might not fully understand how the trigger was receiving props or how the props they provided could potentially interact differently when merged with our internal logic.

Merging props manually can also be daunting. To make this easier, we also offer a mergeProps utility that will:

• Error if it encounters two id strings that don't match
• Merge refs
• Chain event handlers
• Concatenate className strings as well as the properties of classNames objects.
• Merge style objects and properties of styles objects.

import { mergeProps } from '@adaptavant/core/utils';

<Tooltip content="Copy">
  {({ triggerProps }) => (
    <IconButton
      {...mergeProps(triggerProps, {
        'aria-label': 'Copy icon',
        icon: ClipboardCopyIcon,
        ref: buttonRef,
        variant: 'neutralSecondary',
      })}
    />
  )}
</Tooltip>

We changed the name of the props available in the render prop for spreading onto custom triggers from buttonProps to triggerProps. This is consistent with the naming of the render prop in Tooltip.

Here is the full changelog with links to commits where changes were introduced:

• a179ad7: FocusContainer:
  • Add isGhost prop
  • Update all styles to Tailwind instead of sx
• 255ecd0: Add new experimental ClickableAdornment component.
• 4a9aa1b: Avatar:
  • deprecate imageSrc prop
  • accept children prop
  • add AvatarImage component to use inside of Avatar
  • add AvatarIcon component to use inside of Avatar
• f8adcb2: Add new useButton hook
• 201415a: Use Tailwind class instead of sx for align-items to override Stack
• e102993: DropdownMenu: Rename buttonProps in render prop to triggerProps
• 0fa2af8: Remove resets from DS components. Update Tailwind base & Button to accommodate
• f4599cd: Icons: Add new icons
  • AmexColorIcon
  • ApplePayColorIcon
  • CashAppPayColorIcon
  • GooglePayColorIcon
  • MastercardColorIcon
  • SecuredIcon
  • VisaColorIcon
• 6e8af42: - Add Tailwind Preflight and custom base overrides.
  • Remove reset from Box.
  • Fix Chip, Label & Calendar styles broken by Preflight/reset removal.
• 41e2922: Create Tag component for any categorization or sort functionalities.
• a1bd269: IconButton: Rename label to aria-labelIconLink: Rename label to aria-label
• 20e22d5: Add CalDynamicIcon as new component
• 4cbde3a: FieldErrorMessage: Fix alignment of icon when text wraps
• b1b6558: Remove simple usage of deprecated_sx throughout components. Fix IconButton loading state
• 6b54dd3: Change custom focus-ring class to be generic so it can be applied in modifiers
• e102993: Tooltip:
  • Add shouldUsePortal prop
  • Update children prop to optionally accept children-as-a-function
  • Update placement prop to accept start and end variations for all directions (e.g. bottom-end)
• 20e22d5: IconAdd new icons:
  • BlockIcon
  • CalView3DayIcon
  • CheckCircleIcon
  • CheckUserIcon
  • CircleDashIcon
  • CropIcon
  • CustomerIcon
  • DeviceMobileIcon
  • EyeHiddenIcon
  • EyeVisibleIcon
  • HomeIcon
  • InboxIcon
  • KeypadIcon
  • LinkedinIcon
  • MoneyIcon
  • NavigationIcon
  • NewWindowIcon
  • NotesFilledIcon
  • NotesIcon
  • QrCodeIcon
  • RotateItemIcon
  • SlotIcon
  • SortDownIcon
  • SortUpIcon
  • StatusAwayFilledIcon
  • StatusBusyFilledIcon
  • StatusOfflineFilledIcon
  • SupportFilledIcon
  • TextCopyIcon
  • TryProFilledIcon
  • YocoTimerIcon
  • YoutubeIcon
• 8625bdf: Migrate core Stack and Track styles to Tailwind
• e102993: Add chainFunctions and mergeProps to utils
• e102993: Update usePopover to use maxWidth instead of width
• a179ad7: Add new experimental GhostInput component
• 1eb16c3: AlignChildToText:
  • Properly forward props and ref
  • Make polymorphic
• db5e69f: Dropdown: fix active style and remove unused action