@salt-ds/[email protected]

Minor Changes

• ada5af3: Updates to InteractableCard:

  • Added accent prop for border positioning, deprecating accentPlacement.
  • Added selected prop for selected styling.
  • Added value prop for selectable use cases.

• ada5af3: Added InteractableCardGroup component to support selectable cards in a group. It allows users to select one or multiple values from a set of interactable cards.

  <InteractableCardGroup multiSelect>
    <InteractableCard value="one">One</InteractableCard>
    <InteractableCard value="two">Two</InteractableCard>
    <InteractableCard value="three">Three</InteractableCard>
  </InteractableCardGroup>

• 96c2ca6: Added SegmentedButtonGroup to core.
  SegmentedButtonGroup shows a list of actionable buttons, flush with separators between them.

  return (
    <SegmentedButtonGroup>
      <Button variant={variant}>Button</Button>
      <Button variant={variant}>Button</Button>
      <Button variant={variant}>Button</Button>
    </SegmentedButtonGroup>
  );

Patch Changes

• 3e4e819: Card, LinkCard and InteractableCard updated to only apply hover effects on non-touch devices.

• f620261: Visual updates to Navigation item's active indicator due to --salt-size-indicator being updated.

• 8ffdfae: Fixed Dialog children being unmounted twice unexpectedly when closing

• a726afc: Improved the accessibility of Switch by applying role="switch".

  Note: This might affect tests where you are targeting Switch by its role. For example, using React Testing Library-based selectors, tests will have to be updated like the following:

  - getByRole("checkbox")
  + getByRole("switch")

@salt-ds/[email protected]

Minor Changes

• 96c2ca6: Removed SegmentedButtonGroup from labs and promoted to core.

• 8ed621b: Removed the onClose prop from Overlay, onOpenChange is now called for events that open/close the overlay.

  export const ControlledOverlay = () => {
    const [open, setOpen] = useState(false);
    const onOpenChange = (newOpen: boolean) => setOpen(newOpen);
  
    return (
      <Overlay open={open} onOpenChange={onOpenChange}>
        <OverlayTrigger>
          <Button>Show Overlay</Button>
        </OverlayTrigger>
        <OverlayPanel>Overlay Content</OverlayPanel>
      </Overlay>
    );
  };

• ebe5917: Added OverlayPanelCloseButton and OverlayPanelContent components as children of OverlayPanel

  export const OverlayWithCloseButton = ({ onOpenChange }: OverlayProps) => {
    const [open, setOpen] = useState(false);
  
    const onChange = (newOpen: boolean) => {
      setOpen(newOpen);
    };
  
    const handleClose = () => setOpen(false);
  
    return (
      <Overlay open={open} onOpenChange={onChange}>
        <OverlayTrigger>
          <Button>Show Overlay</Button>
        </OverlayTrigger>
        <OverlayPanel>
          <OverlayPanelCloseButton onClick={handleClose} />
          <OverlayPanelContent>Overlay Content</OverlayPanelContent>
        </OverlayPanel>
      </Overlay>
    );
  };

Patch Changes

• f620261: Visual updates to Calendar's "today" indicator and Tab's active indicator due to --salt-size-indicator being updated.

@salt-ds/[email protected]

Minor Changes

• 04743a7: Text has a new variant: Code. See Text component for more information.

  <>
    <Code>Code text</Code>
    <Text as="code">Text styled as code</Text>
    <Text styleAs="code">Text styled as code</Text>
  </>

Patch Changes

• 871585a: Fixed DialogHeader not forwarding refs.
• 1b3e393: Fixed Drawer children being unmounted twice unexpectedly when closing

@salt-ds/[email protected]

Patch Changes

• 4adacc6: Fix SegmentedButtonGroup's display name.
  Fix SegmentedButtonGroup's ref being applied incorrectly.

@salt-ds/[email protected]

Patch Changes

• 4f925b4: Fix --salt-navigable-background-hover referencing deprecated value --salt-palette-navigate-primary-background-hover, change to reference correct value --salt-palette-navigate-background-hover

@salt-ds/[email protected]

Minor Changes

• 53a7f22: Added Dropdown, Option, OptionGroup and ComboBox.

  Note: These were DropdownNext and ComboBoxNext in lab.

  <Dropdown aria-label="Colors">
    <OptionGroup label="Primary">
      <Option value="Red" />
      <Option value="Blue" />
    </OptionGroup>
    <OptionGroup label="Other">
      <Option value="Pink" />
    </OptionGroup>
  </Dropdown>

  <ComboBox aria-label="Colors">
    <OptionGroup label="Primary">
      <Option value="Red" />
      <Option value="Blue" />
    </OptionGroup>
    <OptionGroup label="Other">
      <Option value="Pink" />
    </OptionGroup>
  </ComboBox>

• 9960fe8: Added bufferValue to linear and circular progress.
  Updated linear and circular progress track token to use --salt-size-bar in order to improve density scale.

Patch Changes

• d1e4f78: Added export for DialogHeaderProps

  import { DialogHeaderProps } from "@salt-ds/core";

• 53a7f22: Fix ComboBox and Dropdown's list appearing below other elements.

@salt-ds/[email protected]

Minor Changes

• e53138c: Updated column header active state to actionable secondary style, to better associate relevant column header with the open menu.
  Aligned menu to selected selectable border color and popout overlayable shadow.
  Fixed filter icon not aligned to secondary content color in the last update.
  Fixed sort indicator position to be next to the menu icon, and its spacing between filter and menu icon.

@salt-ds/[email protected]

Minor Changes

• 53a7f22: Removed DropdownNext, Option, OptionGroup and ComboBoxNext from labs and promoted to core.

• 6cdfe94: Add SegmentedButtonGroup to labs
  SegmentedButtonGroup should be used to display a list of actionable buttons, flush with separators

  const SegmentedButtonGroup = () => (
    <SegmentedButtonGroup>
      <Button> Button </Button>
      <Button> Button </Button>
      <Button> Button </Button>
    </SegmentedButtonGroup>
  );

Patch Changes

• 91074aa: - Fixed tabs container height to fit its contents and display as block so it can take 100% width without an extra wrapper.

@salt-ds/[email protected]

Minor Changes

• 7d9436e: Added pills to multi-select ComboBoxNext.
  Added truncate to ComboBoxNext which collapsing the ComboBoxNext to one line.

Patch Changes

• 7d9436e: Fixed DropdownNext and ComboBoxNext's list design.

@salt-ds/[email protected]

Minor Changes

• ff69de1: Add Dialog, DialogHeader, DialogContent, DialogActions, and DialogCloseButton to core

  export const Dialog = (): ReactElement => {
    const [open, setOpen] = useState(false);
    const id = useId();
  
    const handleRequestOpen = () => {
      setOpen(true);
    };
  
    const onOpenChange = (value: boolean) => {
      setOpen(value);
    };
  
    const handleClose = () => {
      setOpen(false);
    };
  
    return (
      <>
        <Button data-testid="dialog-button" onClick={handleRequestOpen}>
          Open default dialog
        </Button>
        <Dialog open={open} onOpenChange={onOpenChange} id={id}>
          <DialogHeader header="Terms and conditions" />
          <DialogContent>Dialog Content</DialogContent>
          <DialogActions>
            <Button onClick={handleClose}>Cancel</Button>
            <Button variant="cta" onClick={handleClose}>
              Accept
            </Button>
          </DialogActions>
          <DialogCloseButton onClick={handleClose} />
        </Dialog>
      </>
    );
  };

Patch Changes

• 6c414ea: Allowed Tooltip to flip to any axis when space is limited. Previously, it was limited to flipping horizontally.

• 2d3fb09: Add box-sizing: border-box to:

  • Multiline input
  • Navigation item
  • Panel