@adaptavant/core@0.0.14

This release is our fifth Release Candidate for Earth 1.0 and the first release for 2024 🎆.

As always, we encourage you to try it out and give us feedback to ensure we can address any issues before the stable release.

Here are the highlights:

We've finally finished porting all of the DS to use Tailwind, which means we were also able to remove the style engine.

To update, please uninstall the @adaptavant/emotion package and remove the styleEngine prop from Root.

import setmoreBlackBrand from '@adaptavant/brands/setmore-black';
import { Root } from '@adaptavant/core';
-import styleEngine from '@adaptavant/emotion';
import translations from '@adaptavant/translations/english';

export default function Page({
  children,
  theme: brand = setmoreBlackBrand,
}: {
  children: React.ReactNode;
  theme: typeof setmoreBlackBrand;
}) {
  return (
    <Root
      brand={brand}
      colorScheme="system"
-     styleEngine={styleEngine}
      translations={translations}
    >
      <App />
    </Root>
  );
}

We've also removed the Spacing and NegativeSpacing types as they were only used by sx.

We've made a bunch of changes to our colour tokens in this release. Here are the new or updated colour tokens:

• background['canvas-secondary']
• background['menu']
• background['positive']
• background['positive-hover']
• background['positive-pressed']
• background['positive-secondary']
• background['caution']
• background['caution-hover']
• background['caution-pressed']
• background['caution-secondary']
• background['avatar']
• background['avatar-secondary']
• background['calendar']
• background['calendar-disabled']
• text['inverse-caution']
• text['inverse-positive']
• text['inverse-critical']
• text['inverse-accent']
• text['critical-secondary']
• text['positive']
• text['positive-secondary']
• text['caution']
• text['caution-secondary']
• text['link']
• text['link-hover']
• text['link-pressed']
• icon['positive']
• icon['caution']
• border['calendar']
• border['status']
• status['icon']
• status['border']

We've also renamed the following:

• background['critical-tertiary'] to background['critical-secondary']
• background['critical-tertiary-hover'] to background['critical-secondary-hover']
• background['critical-tertiary-pressed'] to background['critical-secondary-pressed']

After updating, perform a "find and replace" operation to replace "bg-critical-tertiary" with "bg-critical-secondary".

We've also removed the following token:

• background['input-pressed']

If for some reason you were using this token, consult with the design team on what to replace it with.

We've added a new SearchInput component. It has a built-in clear button and handles clearing the input's value by either clicking on the button or pressing the escape key on your keyboard.

We now show a custom icon when an image fails to load.

We've updated our field components to expose a variant of either "standard" or "subtle" via context. TextInput's appearance adapts based on this setting: when nested within a Field, it adopts a standard look; within an InlineField, it shifts to a subtle style.

Now that TextInput can change its appearance based on its parent field, we've deprecated GhostInput and will remove it in a future release.

TextInput is now composed using a TextInputPrimitive, which is not wrapped with our FocusContainer (so it has no focus styles by default) and does not receive state via context so it can be used outside of a Field.

We've switched to literal (pixel) values from t-shirt values for the size prop on our icons.

Our Track component previously accepted our old typography keys as a prop for verticalAlign (along with "top", "middle", and "bottom"). This was so you could align an item in the rail with text that wraps. This didn't work for responsive styles though, so we've opted to remove the prop and recommend using the AlignChildToText component instead.

<Track
- railStart={<MapPinIcon size="32" />}
- verticalAlign="body.3"
+ className="text-body-16 sm:text-body-14"
+ railStart={
+   <AlignChildToText>
+     <MapPinIcon size="32" />
+   </AlignChildToText>
+ }
+ verticalAlign="top"
>
  Anywhere is the freedom to boldly go... well, <br />
  Anywhere; untethered from geographic constraints and free to think outside
  the cubicle.
</Track>

We've deprecated the objectFit prop on our image component. Please use Tailwind's object fit utilities instead.

We've moved composeId, mergeIds, useDebounce, and useProvidedOrGeneratedId from @adaptavant/core to @adaptavant/core/utils, as well as adding a new util — useClickAway.

We've changed the bundler we use for building the design system from tsup to Preconstruct and marked our packages as side-effect free. This has resulted in smaller bundle sizes, the ability to easily add new entrypoints with granular control over things like marking files as client components, and improved DX for users of the awds repo.

We've added inherit and currentColor to all of our colour utilities, as well as adding transparent to stop-color.

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

• edd6ba1: Icons:
  • Switch to Tailwind for styling
  • Switch to literal values instead of t-shirt sizes
• 6da95e3: Calendar: Update all styles to use Tailwind instead of sx
• fbfa95e: Image: Update all styles to use Tailwind instead of sx
• ae1274e: Track:
  • Convert styles to tailwind instead of sx
  • Removed typography keys for verticalAlign prop
• b4ecff5: - Field: pass a variant (either 'standard' or 'subtle') to input components (replacing the need for GhostInput)
  • Add TextInputPrimitive which doesn't need context so can be used outside of a Field.
  • Deprecate GhostInput
  • Make isDisabled and isRequired props for FieldContext required
  • Remove useInputState in favour of useFieldContext
• edd6ba1: Tailwind:
  • Add new color-stop utilities: stop-color-current, stop-color-inherit and stop-color-transparent
  • Add new-currentand-inheritclasses for the following properties:
    • backgroundColor
    • borderColor
    • divideColor
    • fill
    • ringColor
    • stroke
    • textColor
• 8805a01: - Move composeId, mergeIds, useDebounce and useProvidedOrGeneratedId to utils entrypoint
  • Add use client directive to components that use hooks.
• 729d3f7: Dropdownmenu:
  • Created new @private MenuItem component for popover menu items
  • data-active-descendant changed to data-focused
• fbfa95e: Image: Deprecate objectFit prop
• 662f4a6: Add new SearchInput component
• 309754c: Update icons to build into core directory
• 0ab9199: Updated mergeprops-util to merge refs and functions call
• 03d269e: Updated TextInput, GhostInput, Textarea, and Select to use Tailwind CSS classes, replacing sx prop styling.
• edd6ba1: Button and IconButton
  • Give loading component a 'part' name so it can be styled
  • Switch to using a visually hidden span instead of a wrapper with an aria-label for the loading label.
• e74829d: Switch bundler to Preconstruct
• 22812ee: - Avatar: Show fallback when image fails to load
  • Icons: Add BrokenImageIcon
• 3185a17: Inline source for @adaptavant/timezone-search and remove dependency
• d083da6: Remove style engine
• bd63870: Add new icons entrypoint to DS
• 34a6c92: Avatar: Update all styles to use Tailwind instead of sx
• ccaeafb: Updated Field, FieldErrorMessage, Fieldset, and Label to use Tailwind CSS classes, replacing sx prop styling.
• 4d47f37: - Tooltip: Updated styles in high contrast mode
• 2697b42: Update Checkbox, Radio and Toggle to remove sx styles
• f4a911a: Update icon build script and clean up SVGs
• 792005a: Optimise icons and fix broken support-filled icon
• 7358f72: Add useClickAway to utils entrypoint
• 073d416: Ensure Tooltip is hidden when not visible
• e256714: Update core package to set sideEffects false and match Preconstruct output
• bede196: Tokens updateRemoved:Changed:Added:
  • background['input-pressed']
• d083da6: Remove Spacing and NegativeSpacing types
• background['critical-tertiary'] into background['critical-secondary']
• background['critical-tertiary-hover'] into background['critical-secondary-hover']
• background['critical-tertiary-pressed'] into background['critical-secondary-pressed']
• background['canvas-secondary']
• background['menu']
• background['positive']
• background['positive-hover']
• background['positive-pressed']
• background['positive-secondary']
• background['caution']
• background['caution-hover']
• background['caution-pressed']
• background['caution-secondary']
• background['avatar']
• background['avatar-secondary']
• background['calendar']
• background['calendar-disabled']
• text['inverse-caution']
• text['inverse-positive']
• text['inverse-critical']
• text['inverse-accent']
• text['critical-secondary']
• text['positive']
• text['positive-secondary']
• text['caution']
• text['caution-secondary']
• text['link']
• text['link-hover']
• text['link-pressed']
• icon['positive']
• icon['caution']
• border['calendar']
• border['status']
• status['icon']
• status['border']