@salt-ds/[email protected]

Minor Changes

• ff69de1: Remove Dialog, DialogHeader, DialogContent, DialogActions, and DialogCloseButton from labs and promote to core

Patch Changes

• 517ce28: Optional prop id is no longer passed down from Overlay to aria-labelledby in OverlayPanel
  aria-labelledBy should be passed down directly to the OverlayPanel via and id attached to the title element

  export const Default = (): ReactElement => {
    const id = useId();
    return (
      <Overlay>
        <OverlayTrigger>
          <Button>Show Overlay</Button>
        </OverlayTrigger>
        <OverlayPanel aria-labelledby={id}>
          <h3 className={styles.contentHeading} id={id}>
            Title
          </h3>
          <div>
            Content of Overlay
            <Tooltip content={"im a tooltip"}>
              <Button>hover me</Button>
            </Tooltip>
          </div>
        </OverlayPanel>
      </Overlay>
    );
  };

• 0c4d186: Fix tabstrip not collapsing when sharing parent with other items

• 54b8e1a: Fixed Tab being deleted whilst editing Tab label and pressing backspace or delete

@salt-ds/[email protected]

Minor Changes

• f27ecfa: Added theme-next.css which includes experimental theme implementation. Refer to documentation for more information.

@salt-ds/[email protected]

Minor Changes

• f27ecfa: Added UNSTABLE_SaltProviderNext for early adopters to test incoming theme next features. Refer to documentation for more information.
  Implemented corner radius for relevant components when used with theme next.

• cbe6c52: Added LinkCard to core.

  Use a Link card when the entire card should be clickable and navigate the user.

  <LinkCard href="https://www.saltdesignsystem.com" target="_blank" />

• 8610999: Add Drawer and DrawerCloseButton to core
  Drawer is an expandable panel that displays content and controls over the application content. It provides temporary access to additional or related content without navigating away from the current screen.

  export const Default = (): ReactElement => {
    const [openPrimary, setOpenPrimary] = useState(false);
  
    return (
      <>
        <Button onClick={() => setOpenPrimary(true)}>
          Open Primary Drawer
        </Button>
        <Drawer
          open={openPrimary}
          onOpenChange={(newOpen) => setOpenPrimary(newOpen)}
          style={{ width: 200 }}
        >
          Drawer Content
          <DrawerCloseButton onClick={() => setOpenPrimary(false)} />
        </Drawer>
      </>
    );
  };

Patch Changes

• 7635193: Fixed the external icon shown in Links with target="_blank" sometimes being misaligned.

@salt-ds/[email protected]

Patch Changes

• 7bbbab9: Fixed header text color not using correct color token: --salt-content-secondary-foreground
• 09080b2: Fixed columns not displaying correctly with wrapText and autoHeight turned on.

@salt-ds/[email protected]

Minor Changes

• f27ecfa: Implemented corner radius for relevant components when used with theme next. Refer to documentation for more information.

• cba9f9b: - Rename DialogTitle to DialogHeader

  • Change DialogHeader optional props title and subtitle to header and preheader

• 245301a: Added LinkCard to lab.

  Use a Link card when the entire card should be clickable and navigate the user.

  <LinkCard href="https://www.saltdesignsystem.com" target="_blank"></LinkCard>

• 8610999: Remove Drawer and DrawerCloseButton from labs and promote to core

• cbe6c52: Removed LinkCard from lab and promoted to core.

• df15ac9: - Added valueToString to DropdownNext and ComboBoxNext. This replaces the textValue prop on Options. This is needed when the value is different to the display value, or the value is not a string.

  • Removed defaultValue from DropdownNext.
  • Mousing over options will now set them to active.
  • Clearing the input will clear the list of active items.
  • Option will now use the value or the result from valueToString as its default children.

Patch Changes

• 543c9ff: Updates to calendar

  • Removed animations.
  • Visual updates to the component.
  • Updated the delay time for day tooltips.
  • Added highlighted days - characterized by a triangle in the top right corner that attributes an event to that day.
  • Added disabled days and made unselectable days focusable.

@salt-ds/[email protected]

Patch Changes

• 9d23fdc: Removed box-sizing: border-box from global.css. This was causing issues in applications that were built using box-sizing: content-box.

@salt-ds/[email protected]

Patch Changes

• 9d23fdc: Added box-sizing: border-box to:

  • Badge
  • Card
  • Checkbox
  • FileDropZone
  • FlexLayout
  • Input
  • CircularProgress
  • LinearProgress
  • RadioButton
  • Switch

@salt-ds/[email protected]

Patch Changes

• 9d23fdc: Added box-sizing: border-box to:

  • Dialog
  • DialogTitle
  • Drawer
  • FormLabel
  • InputLegacy
  • LayerLayout
  • List
  • Option
  • OptionList
  • TabNext
  • TabstripNext
  • TokenizedInputNext
  • TokenizedInput

@salt-ds/[email protected]

Minor Changes

• a374c20: Added --salt-color-gray-50-fade-border.

  + --salt-color-gray-50-fade-border: rgba(206, 210, 217, var(--salt-palette-opacity-disabled));

  Updated the values of --salt-palette-neutral-primary-border, --salt-palette-neutral-primary-border-disabled, --salt-palette-neutral-secondary-border and --salt-palette-neutral-secondary-border-disabled.

  This will affect the border color of Card, InteractableCard, FileDropZone, ToggleButtonGroup, Overlay, CircularProgress, LinearProgress and SteppedTracker.

  New values in light mode:

  - --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
  - --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
  + --salt-palette-neutral-primary-border: var(--salt-color-gray-50);
  + --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-50-fade-border);

  - --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
  - --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
  + --salt-palette-neutral-secondary-border: var(--salt-color-gray-50);
  + --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-50-fade-border);

  New values in dark mode:

  - --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
  - --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
  + --salt-palette-neutral-secondary-border: var(--salt-color-gray-300);
  + --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-300-fade-border);

@salt-ds/[email protected]

Minor Changes

• fb4a0ce: Updates default padding for Card to --salt-spacing-200.

  Added accent and hoverable props to Card.

  accent prop enables positioning of an optional accent.
  hoverable prop enables hover styling.

  <Card accent="top" hoverable>
    {children}
  </Card>

Patch Changes

• 5574930: Fixed multiline input not collapsing when the input value resets.

• 511a921: Fix false positive error when a Salt Provider tries to stop multiple providers being root providers in different windows

• 92d5eba: Removed auto scrolIntoView from Toast which caused issues for some users.

  If this is a feature you need, pass a ref to Toast like below

    const toastRef = useRef<HTMLDivElement>();
  
    useLayoutEffect(() => {
      toastRef.current?.scrollIntoView();
    }, []);
  
    return (
      <Toast ref={toastRef}>
      // ...
    )
  

• b769f3e: Added CSS API variable --saltFormField-label-width, replacing deprecated --formField-label-width

  Usage should be changed:

  - style={{ "--formField-label-width": "100px" } as CSSProperties}
  + style={{ "--saltFormField-label-width": "100px" } as CSSProperties}