@salt-ds/[email protected]

Minor Changes

• 9518800: Added MultilineInput component with fixed number of rows
• 27139c5: Realign Accordion to our design language.

This means that "Accordion" is the single panel and not the group. Due to this, we have renamed the Accordion components.

Accordion would now be AccordionGroup, AccordionSection would now be Accordion, AccordionSummary would now be AccordionHeader and AccordionDetails would now be AccordionPanel.

Before:

<Accordion expandedSectionIds={expanded} onChange={handleChange}>
  <AccordionSection id="accordion-0" key="AccordionSection0">
    <AccordionSummary>AccordionSummary0</AccordionSummary>
    <AccordionDetails>AccordionDetails0</AccordionDetails>
  </AccordionSection>
  <AccordionSection id="accordion-1" key="AccordionSection1">
    <AccordionSummary>AccordionSummary1</AccordionSummary>
    <AccordionDetails>AccordionDetails1</AccordionDetails>
  </AccordionSection>
</Accordion>

After:

<AccordionGroup>
  <Accordion
    expanded={expanded === "accordion-0"}
    value="accordion-0"
    onToggle={onChange}
  >
    <AccordionHeader>AccordionHeader0</AccordionHeader>
    <AccordionPanel>AccordionPanel0</AccordionPanel>
  </Accordion>
  <Accordion
    expanded={expanded === "accordion-1"}
    value="accordion-1"
    onToggle={onChange}
  >
    <AccordionHeader>AccordionHeader1</AccordionHeader>
    <AccordionPanel>AccordionPanel1</AccordionPanel>
  </Accordion>
</AccordionGroup>

Patch Changes

• 79e9f4b: MultilineInput is now compatible with FormField. FormFieldLabel can be styled as a question by using the new pronounced prop.
• 4329d8c: Update Button and Toggle Button to have a fixed gap between icons and text.
• 78ee0b8: Removed unnecessary transition in List Item Next

@salt-ds/[email protected]

Minor Changes

• 0a1c9d9: Refactored Checkbox to align styling.
  Add readOnly support to Checkbox.

  <CheckboxGroup>
    <Checkbox readOnly label="readonly checkbox" />
    <Checkbox readOnly indeterminate label="readonly indeterminate checkbox" />
    <Checkbox readOnly checked label="readonly checked checkbox" />
  </CheckboxGroup>

• 21a7657: Refactored Radio Button to align styling.
  Added readOnly support to Radio Button.

  <RadioButtonGroup readOnly>
    <RadioButton label="Readonly" value="Readonly" />
    <RadioButton label="Checked Readonly" value="Readonly-checked" checked />
  </RadioButtonGroup>

Patch Changes

• 4329d8c: Update Button and Toggle Button to have a fixed gap between icons and text.
• 0a1c9d9: Fix inputProps overwriting internal Checkbox props
• 21a7657: Fixed inputProps overwriting internal Radio Button props
• 9518800: Alignment of StatusAdornment has been fixed

@salt-ds/[email protected]

Minor Changes

• c998188: New token introduced in selectable characteristic, new palette tokens

  + --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);

  New value in light mode

  + --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);

  New value in dark mode

  + --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);

• 71fc747: Add new list components: ListNext, ListItemNext

  <ListNext>
    <ListItemNext value={Alaska}>
      {Alaska}
    </ListItemNext>
  </ListNext>
  
  

• b52cc74: Deprecated the following tokens: Use hex value as replacement if needed.

  - --salt-status-info-foreground-disabled: #2670A9B3
  - --salt-status-success-foreground-disabled: #24874BB3
  - --salt-status-warning-foreground-disabled: #EA7319B3
  - --salt-status-error-foreground-disabled: #E32B16B3
  - --salt-status-static-foreground-disabled: #61656E | #B4B7BE
  - --salt-status-negative-foreground-disabled: #FF5942B3 | #A6150BB3
  - --salt-status-positive-foreground-disabled: #3CAB60B3 | #0C5D2EB3
  - --salt-status-info-borderColor-disabled: #2670A966
  - --salt-status-success-borderColor-disabled: #24874B66
  - --salt-status-warning-borderColor-disabled: #EA731966
  - --salt-status-error-borderColor-disabled: #E32B1666
  - --salt-palette-error-border-disabled: #E32B1666
  - --salt-palette-warning-border-disabled: #EA731966
  - --salt-palette-success-border-disabled: #24874B66
  - --salt-palette-info-border-disabled: #2670A966
  - --salt-palette-error-foreground-disabled: #E32B16B3
  - --salt-palette-success-foreground-disabled: #24874BB3
  - --salt-palette-info-foreground-disabled: #2670A9B3

  Any components that have a validation state should not be able to simultaneously be disabled. Consider altering code if this is the case.

• 5227fd5: Added --salt-selectable-cursor-readonly token with not-allowed value

@salt-ds/[email protected]

Minor Changes

• de5ab33: Added onSelect to Dropdown. onSelect is called when any selection occurs and differs from onSelectionChange, which is only called when the selection changes.

• c2f3e7d: Add new tabs components: TabstripNext, TabNext

  <TabstripNext defaultSelected="Home">
    <TabNext value="home">Home</TabNext>
    <TabNext value="transactions">Transactions</TabNext>
    <TabNext value="loans">Loans</TabNext>
  </TabstripNext>

• 8ff0a97: Refactor ToggleButton to use a new API to simplify its usage.

  - <ToggleButtonGroup onChange={handleChange} selectedIndex={selectedIndex}>
  -  <ToggleButton aria-label="alert" tooltipText="Alert">
  -    <NotificationIcon /> Alert
  -  </ToggleButton>
  -  <ToggleButton aria-label="home" tooltipText="Home">
  -    <HomeIcon /> Home
  -  </ToggleButton>
  -  <ToggleButton aria-label="search" tooltipText="Search">
  -    <SearchIcon /> Search
  -  </ToggleButton>
  -  <ToggleButton aria-label="print" tooltipText="Print">
  -    <PrintIcon /> Print
  -  </ToggleButton>
  -</ToggleButtonGroup>
  +<ToggleButtonGroup onSelectionChange={handleChange} selected={selected}>
  +  <ToggleButton value="alert">
  +    <NotificationIcon aria-hidden /> Alert
  +  </ToggleButton>
  +  <ToggleButton value="home">
  +    <HomeIcon aria-hidden /> Home
  +  </ToggleButton>
  +  <ToggleButton value="search">
  +    <SearchIcon aria-hidden /> Search
  +  </ToggleButton>
  +  <ToggleButton value="print">
  +    <PrintIcon aria-hidden /> Print
  +  </ToggleButton>
  +</ToggleButtonGroup>
  ``
  

• 71fc747: Add new list components: ListNext, ListItemNext

  <ListNext>
    <ListItemNext value={Alaska}>
      {Alaska}
    </ListItemNext>
  </ListNext>
  
  

Patch Changes

• de5ab33: Dropdown will now close when the already selected item is selected.

• f699f26: Logo

  • Added LogoImage and LogoSeparator components
  • Removed LogoTitle component
  • Removed compact prop
  • Logo follows composition API

• 1fefbe7: Fixed issue where the Dialog heading overlapped when wrapped

@salt-ds/[email protected]

Minor Changes

• b636a99: Condition dropdown in data-grid to only render if the array of options is not empty

Patch Changes

• de5ab33: Dropdown will now close when the already selected item is selected.
• f3ebfa4: When using the DropdownCellEditor with the Data Grid, hovering a grid row then hovering over a Dropdown list no longer crashes the Data Grid.

@salt-ds/[email protected]

Major Changes

• 67199b0: Removed AdornmentButton. Replace usages with the Button component.

  - <Input
  -   defaultValue="Value"
  -   startAdornment={<AdornmentButton>Test</AdornmentButton>}
  -   data-testid="test-id-3"
  - />
  + <Input
  +   defaultValue="Value"
  +   startAdornment={<Button>Test</Button>}
  +   data-testid="test-id-3"
  + />

  - <Input
  -   disabled
  -   defaultValue="Value"
  -   startAdornment={<AdornmentButton>Test</AdornmentButton>}
  -   data-testid="test-id-3"
  - />
  + <Input
  +   disabled
  +   defaultValue="Value"
  +   startAdornment={<Button disabled>Test</Button>}
  +   data-testid="test-id-3"
  + />

  Note: You will need to pass disabled to the Button component if the Input is disabled.

Minor Changes

• 9668b50: Fixed invalid ARIA attribute console errors when using Input

• cdec98d: Added validationStatus prop to RadioButton and Checkbox allowing for error and warning status
  Deprecated error prop in RadioButton and Checkbox: Use validationStatus="error" instead

  Added validationStatus prop to RadioButtonGroupContext and CheckboxGroupContext allowing for error and warning status on the group as a whole

• 598be79: Added necessity prop to FormFieldLabel

• b3e511e: Add support for Checkbox/RadioButton used alone (not in group context) within a Form Field with status

  Disables Checkbox/RadioButton focus ring when parent Form Field is disabled

  AdornmentValidationStatus type exposed for status adornments. Type of validationStatus changed in Checkbox and RadioButton to AdornmentValidationStatus.

• feda406: Significant styling change

  Removed disabled error style variant from Checkbox. Error styling will now only show if component is not disabled.

• 3de30c3: Added stories to show Form Field Group as a pattern, with usage of Stack and Grid Layout components and shared props across Form Fields and controls

  Added "right" as an option to FormFieldLabelPlacement type used in FormField labelPlacement prop

• e851d2b: Removed the FormFieldControlWrapper component and useControlWrapper hook.
  To replace usages of the wrapper for Form Fields with multiple children, use the StackLayout component with a gap of 1 to get the recommended layout and set the role to "group" or as to "fieldset" for accessibility. The variant on each child should be set directly or with shared props.

• 52c2e1c: Fixed Form Field label incorrectly inheriting text alignment.

• 82b162d: Checkbox and RadioButton updated to use FormFieldContext
  When wrapped within a FormField component, values from Form Field now have precedence in these controls over any directly applied disabled and error validation status

• 3425ea9: Significant styling change

  Removed disabled error style variant from Radio Button. Error styling will now only show if component is not disabled.

Patch Changes

• 5b60aa7: Increased spacing between Checkbox/Radio Button and value, and spacing between each when horizontally grouped

• 7ca8c51: Design fix on Form Field

  • Left aligned label on wrapped text: Ensures label stays in line with Input text.
  • Success status adornment color corrected.
  • Spacing changes between adornments.

• 62bb0f8: - Sort breakpoints in useResponsiveProps so it can handle unordered props.

  • Fix flickering bug on breakpoint change when values passed to useResponsiveProps are the same.

@salt-ds/[email protected]

Minor Changes

• 287cb5f: Form Field supports helper text within a nested Tooltip

  Tooltip uses FormFieldContext which has precedence over any disabled and status given to Tooltip when wrapped within a FormField component

• 2da87f0: Added placeholder prop to Input: Placeholder can be used when no default value is given to promopt user input

• 49fa6ad: Added AdornmentButton component as an interactive adornment to be used within Input

• 8d5a8c9: Added startAdornment and endAdornment props to Input: Allows for custom adornments to be used within the Input component

Patch Changes

• c4df049: The default Card design has been changed to include a border to enhance visual accessibility.

@salt-ds/[email protected]

Patch Changes

• 4bd8771: Fix cell text not truncating in salt ag-grid-theme

@salt-ds/[email protected]

Minor Changes

• d78ff53: Added @salt-ds/styles and @salt-ds/window packages

  These packages are introduced to support uses of Salt in a desktop application where pop-out elements such as tooltips are rendered into separate windows with no previously added CSS.

  The insertion point where useComponentCssInjection inserts styles can be controlled via InsertionPointContext

@salt-ds/[email protected]

Patch Changes

• 813daa2: Fixed the duration foundation token values having invalid values