@intility/bifrost-react/CHANGELOG.md

React library for Intility's design system, Bifrost.

# @intility/bifrost-react

## 5.0.4

### Patch Changes

- Updated dependencies [391862a]
  - @intility/bifrost-css@5.0.3

## 5.0.3

### Patch Changes

- c12aaed: Fix: `<CheckboxCard>` (and `<SwitchCard>` and `<RadioCard>`) `label` should not
  have `margin-bottom` when there's no content (`children`) below it.
  [#59](https://github.com/intility/bifrost/issues/59)
- 08849e2: Fix: support string for `logo` prop on `<Nav.Side>` and `<Nav.Top>` (adds fallback graphic, like the `logo` prop on `<Nav>`)

## 5.0.2

### Patch Changes

- 6d67f5f: Fix: Explicitly set `font-family` to "Open Sans" to prevent inheriting wrong
  font from parent for components that may likely be nested inside a heading. #86
  - `<Badge>`
  - `<Tag>`
  - `<Button>`
  - `<Checkbox>`
  - `<Drawer>`
  - `<Modal>`
- Updated dependencies [e136063]
- Updated dependencies [6d67f5f]
- Updated dependencies [4b313b9]
  - @intility/bifrost-css@5.0.2

## 5.0.1

### Patch Changes

- Updated dependencies [b1a6a7f]
  - @intility/bifrost-css@5.0.1

## 5.0.0

### Major Changes

- Added support for React 19
- 582d87e: `<SlideDown>` no longers renders its `children` while `open` is `false` (unless mid-transition).
  - This change also affects components that use `<SlideDown>` internally:
    - `<Accordion.Item>`
    - `<Nav.Group>` when used in sidebar (non-collapsed)
    - `<Message expandable>` expandable message
    - `<Table.Row content>` expandable table row
- 65c4ebd: - New prop `theme` for `<Box>` component, applies a color theme to itself and descendant elements. Supports values:
  - `"inherit"` (default), same as not passing a `theme` prop.
  - `"teal"` default theme color (equivalent to "brand", useful if the parent theme isn't default).
  - `"purple"` purple theme color (equivalent to "chill").
- ac7ff14: Rewritten `<Tooltip>` and `<Dropdown>` components from scratch.
  - Removed `@tippyjs/react` dependency since it's no longer maintained and does not support React 19
    - All props previously forwarded to `<Tippy>` are no longer supported, but we have re-implemented the ones most used. See [upgrade guide](https://bifrost.intility.com/react/install/upgradeTo5) for migration tips.
  - Added `@floating-ui/react` dependency
  - They are no longer stacked using `z-index` but uses the browser top layer via [Popover Web API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) instead.
  - `disabled` prop not only disables the `<Dropdown>` or `<Tooltip>`, but no longer renders the `content` in the DOM tree.
  - Clicking on the hovered element no longer hides the `<Tooltip>`.
  - The `<Tooltip>` DOM node is no longer attached to the `document.body` default, but is placed as a sibling to the `children` of the `<Tooltip>`.
  - `onClickOutside` prop is removed, use `onHide` instead (triggers on `click` outside, and `ESC` kepress, and on `focusin` event on other elements).
  - `placement` no longer supports `"auto"` (default is now `"top"` for `<Tooltip>` and `"bottom-start"` for `<Dropdown>`). Valid values are:
    - `"top"`
    - `"right"`
    - `"bottom"`
    - `"left"`
    - `"top-start"`
    - `"top-end"`
    - `"right-start"`
    - `"right-end"`
    - `"bottom-start"`
    - `"bottom-end"`
    - `"left-start"`
    - `"left-end"`
- 8943b49: Refactored `<FloatingMessage>` to use [Popover Web API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API).
  - Fixes issue where floating messages would always appear behind an open `<Modal>` #738
  - Removed the extra `<div>` wrapper with `position: relative` and a `z-index`.
    - This includes forwarded props like `ref`, `className` and `style` (all documented props remain unchanged).

#### Removed

- 11e52eb: Removed `<Spinner>` component. Use `<Icon.Spinner>` instead:

```jsx
<Icon.Spinner size={64} /> // equivalent to `<Spinner />`
<Icon.Spinner /> // equivalent to `<Spinner size="1em" />`
```

- `theme` prop on `<Bifrost>` component removed (deprecated in 4.0)
  - to use light or dark mode, apply `.bf-darkmode` or `.bf-lightmode` to `<html>` element.
- `useTheme()` hook removed (deprecated in 4.0)
- 11e52eb: Removed `icon` and `iconRight` props from `<Button>` (deprecated since 4.7). Place `<Icon>` as child element instead:

```jsx
<Button>
  <Icon marginRight icon={faHome} />
  Click me
</Button>
```

- 11e52eb: Removed `"outline"` value for `<Button variant>` prop (deprecated since 4.7)
- 11e52eb: Removed `variant` prop from `<Dropdown>` (only has a single variant since 4.5)
- 11e52eb: Removed `hideCircle` prop from `<Nav.Item>` (deprecated since 4.2)
- 11e52eb: Removed `appName`, `collapsedAppName`, `logoHref` and `logoOnClick` from `<Nav>` - use `logo` instead. Same goes for `<Nav.Side>` and `<Nav.Top>` as well.
  `useFloatingMessage` hook no longer exported from FloatingMessage file - use `import useFloatingMessage from "@intility/bifrost-react/hooks/useFloatingMessage"`
- 285f893: Removed `dateFormat()` and `timeFormat()` functions (deprecated since 4.0) - use the `useDateTimeFormatter()` hook instead.

#### Renamed

- `useApplyTheme(theme: Theme)` hook renamed to `useApplyColorMode(mode: ColorMode)`. Still functions the same way.

#### TypeScript

- `Theme` type (`"light" | "dark" | "system"`) renamed to `ColorMode`

#### Dependencies

- 4e54726: Bump `focus-trap-react` dependency (used internally by Nav and Drawer) from `10.2.3` to `11.0.3`
- 526d727: Refactor: removed `date-fns` dependency from `@intility/bifrost-react` and added it to `@intility/bifrost-react-datepicker` and bumped from `3.6.0` to `4.1.0`

### Minor Changes

- a40486b: - New `<Badge state>` prop value `"brand"`
  - New `<Message state>` prop values `"brand"`, `"attn"`, and `"chill"`
  - `<Box background>` prop updated to match css background classes (some removed and some added, see bifrost-css changelog)
- c5b07ac: Added new `<Dropdown.Group>` component, styles a button for nested dropdown menu hierarchy, meant to use inside `content` of `<Dropdown>`.

  - `name` prop for labelling the button
  - Optional `icon` prop, styled equivalent to `<Dropdown.Item icon>`
  - `children` content will be placed inside a toggleable sub-dropdown

  Useful for dropdown menus with multiple levels, example:

  ```tsx
  <Dropdown
    content={
      <Dropdown.Group name="Group">
        <Dropdown.Item>Item 1</Dropdown.Item>
        <Dropdown.Item>Item 2</Dropdown.Item>
      </Dropdown.Group>
    }
  >
    <Button>Two levels</Button>
  </Dropdown>
  ```

  Can be nested inside eachother:

  ```tsx
  <Dropdown
    content={
      <Dropdown.Group name="Group">
        <Dropdown.Group name="Nested Group A">
          <Dropdown.Item>Item A1</Dropdown.Item>
          <Dropdown.Item>Item A2</Dropdown.Item>
        </Dropdown.Group>
        <Dropdown.Group name="Nested Group B">
          <Dropdown.Item>Item B1</Dropdown.Item>
          <Dropdown.Item>Item B2</Dropdown.Item>
        </Dropdown.Group>
      </Dropdown.Group>
    }
  >
    <Button>Three levels</Button>
  </Dropdown>
  ```

- bd4e754: Add new `usePrefersColorMode()` hook:
  - Uses CSS media query to find the users `prefers-color-scheme`.
  - Returns `"light"` or `"dark"` when running client-side. (which is the case for single-page-apps)
  - Falls back to `undefined` when server-side-rendering. (like preloading a next.js page, or statically generated)

### Patch Changes

- a26abe7: Deprecated `<Banner>` component. It's been removed from figma components for a while, no current designs should be using it.
- Updated dependencies [fef5acd]
- Updated dependencies [a40486b]
- Updated dependencies [11e52eb]
- Updated dependencies [3e16543]
  - @intility/bifrost-css@5.0.0

## 4.19.1 - 2025-02-26

### Patch Changes

- 1e2116f: update package metadata
- Updated dependencies [1e2116f]
  - @intility/bifrost-css@4.18.3

## 4.19.0 - 2025-02-19

### Minor Changes

- d40b0c3: feat: add noTooltip prop to FormatDate

## 4.18.2 - 2025-02-14

### Patch Changes

- Updated dependencies [66a9741]
- Updated dependencies [8bc2846]
  - @intility/bifrost-css@4.18.2

## 4.18.1 - 2025-01-29

### Patch Changes

- 53e3e7b: fix: `<Ellipsis>` and `.bf-ellipsis` should now work for single-word content,
  and also not break on hyphens for single line (will take all available width)
- Updated dependencies [53e3e7b]
  - @intility/bifrost-css@4.18.1

## 4.18.0 - 2025-01-13

### Minor Changes

- 96071ef: - New `<Menu>` component suitable for nesting inside other wrappers like `<Section>`, `<Accordion>`, or `<Box>`

  - Simple flex container with `8px` gap (no background or other styling)
  - Optional `horizontal` boolean prop for laying out menu items inline.
  - New `<Menu.Item>` sub-component with some padding and hover bg, suitable for nesting inside a `<Link>`, `<a>`, or `<button>`.
    - Marked as active when nested inside a link or button with `.active` css class.
  - New `<Icon.Step>` component, suitable for creating a flexible "step-bar"
    - `variant` prop to choose which icon to display:
      - `"default"` - a faded dot, use for unvisited (future) step
      - `"active"` - right-arrow in a faded circle, use for current step
      - `"completed"` - checkmark in a solid circle, use for steps that are done
      - `"incomplete"` - unfinished progress-pie, use for steps that are visited but not done

  ```jsx
  <Menu>
    <a href="/step1">
      <Menu.Item>
        <Icon.Step variant="completed" marginRight />
        Step 1
      </Menu.Item>
    </a>
    <a href="/step2" class="active">
      <Menu.Item>
        <Icon.Step variant="active" marginRight />
        Step 1
      </Menu.Item>
    </a>
    [more steps...]
  </Menu>
  ```

### Patch Changes

- 548d6e7: Don't close modal on overlay click if click started on a different element
- Updated dependencies [49c20c4]
- Updated dependencies [96071ef]
- Updated dependencies [1716d20]
  - @intility/bifrost-css@4.18.0

## 4.17.0 - 2024-12-13

### Minor Changes

- 10509f3: - Introduced `padded` parameter to `<Ellipsis>` component to prevent clipping of focus outline
  - Added `bf-ellipsis-padded` css class

### Patch Changes

- 958b541: Fix: Only apply padding for `<Input clearable>` when the icon is rendered
- Updated dependencies [eb3b1cc]
- Updated dependencies [97de3fe]
- Updated dependencies [174f259]
- Updated dependencies [10509f3]
  - @intility/bifrost-css@4.17.0

## 4.16.1 - 2024-11-29

### Patch Changes

- a9d985b: Fix: `<Icon.Spinner size>` prop type should now properly accept `number` and `string`.

## 4.16.0 - 2024-11-28

### Minor Changes

- 17060a3: Add new `<Icon.Spinner />` sub-component as an alias for:

  ```jsx
  <Icon
    icon={faSpinnerThird}
    className="bf-icon-spinner bfc-theme"
    style={{ fontSize: /* size prop */ }}
  />
  ```

- b9c82ea: Add `transparent` prop to `<Modal>` to allow better control for custom styling

### Patch Changes

- Updated dependencies [b9c82ea]
  - @intility/bifrost-css@4.16.0

## 4.15.0 - 2024-11-26

### Minor Changes

- 91f354b: New `<Ellipsis>` component, cuts off overflowing text and adds an ellipsis (…)
  - Renders a tooltip on hover when text is overflowing.
  - Configure allowed lines with `lines` prop (default `1`)

### Patch Changes

- bbb8a57: Deprecate `<Spinner>` component in favor of using the more flexible `<Icon>` directly. Example:

  ```jsx
  <Icon icon={faSpinnerThird} className="bf-icon-spinner bfc-theme" />
  ```

- Updated dependencies [bbb8a57]
- Updated dependencies [91f354b]
- Updated dependencies [bae3a2f]
  - @intility/bifrost-css@4.15.0

## 4.14.1 - 2024-11-06

### Patch Changes

- 7668263: Fix scaling issue with nav branding
- 9ac0d65: allow react 17 as a peer dep
- 908fd54: - Fixed `disabled` styling for pagination next/prev buttons
  - Fixed `:focus` styling for link-styled buttons
- Updated dependencies [7668263]
- Updated dependencies [908fd54]
  - @intility/bifrost-css@4.14.1

## 4.14.0 - 2024-10-21

### Minor Changes

- d090112: `<Drawer>` design update
  - Removed left border from right-positioned drawer
  - New drop shadow (while open)
  - Changed background from `bfc-base-2` to `bfc-base-3`
  - Changed right-positioned drawer width to `550px` for all screen widths wider than small
- c8990f1: Color change in light mode: `bfc-theme-*` variables and classes are now teal colored instead of blue.

### Patch Changes

- fe1d4fc: Add convenience aliases for some components:
  - `<RadioCard>` is the same as `<CheckboxCard type="radio">`
  - `<SwitchCard>` is the same as `<CheckboxCard type="switch">`
- Updated dependencies [7915aaf]
- Updated dependencies [d090112]
- Updated dependencies [a486693]
- Updated dependencies [c8990f1]
- Updated dependencies [cb6baa6]
  - @intility/bifrost-css@4.14.0

## 4.13.0 - 2024-10-15

### Minor Changes

- 2703b98: Add support for `small` variants for most form field inputs, to match existing `small` button styling.

  - `<Input>`
  - `<DatePicker>`
  - `<FieldGroup.Item>`
  - `<Select>`

### Patch Changes

- 1fbff6b: Fix: Section.Header and Section.Content now has `border-radius` (useful when designers put separate custom background colors on them)
- c2dfb58: Added translation text for select loading state
- Updated dependencies [1fa1483]
- Updated dependencies [1fbff6b]
- Updated dependencies [2703b98]
  - @intility/bifrost-css@4.13.0

## 4.12.1 - 2024-10-01

### Patch Changes

- 553fe3b: Set a (14px) font-size for `<Section>` component (previously inherited from parent)
- d303cff: TypeScript: Add missing values for `<Box background>` prop

## 4.12.0 - 2024-09-16

### Minor Changes

- eac9a11: New `<Dropdown.Item>` sub-component for styling buttons and links in a dropdown. #774
  - Padding for `<Dropdown>` reduced from `12` to `8` px.

### Patch Changes

- Updated dependencies [de00f8f]
- Updated dependencies [e7d617e]
- Updated dependencies [eac9a11]
- Updated dependencies [4fd0770]
  - @intility/bifrost-css@4.12.0

## 4.11.0 - 2024-09-03

### Minor Changes

- df8ce99: `<Tabs>` component restyled and made a bit more flexible
  - Neutralised active tab underline color for default `variant`
  - Added shadow on styled tab selected and hover
  - Added border bottom for basic tab on hover
  - Changed paddings
  - New props for `<Tabs>`:
    - `noBakground` (boolean) makes the tab bar transparent
    - `noPadding` (boolean) removes padding from the tab bar
    - `contentProps` (object) props forwarded to the content area `<div>` element (if any)
    - `contentBackground` (string) sets background-color for content area and active tab for `variant="styled"`. Possible values:
      - `"base"` (default),
      - `"base-2"`
      - `"base-3"`
      - `"transparent"` (not supported by `variant="styled"`)
    - `radius` (string | boolean) adds a border-radius to top of tab bar, and bottom of content area (if any). Possible values:
      - `false` or `undefined` (default) = no border radius
      - `"xs"` = `4px`
      - `"s"` = `8px`
      - `true` or `"m"` = `12px`
      - `"l"` = `16px`
      - `"xl"` = `24px`
  - `radiusTop` same values as `radius`, but only applied to top of tab bar
  - `radiusBottom` same values as `radius`, but only applied to bottom of content area (if any)

### Patch Changes

- c54884f: Fix: `useBreakpoint()` (used by `<Nav>` and `<Drawer>`) should no longer cause [hydration](https://react.dev/reference/react-dom/client/hydrateRoot) errors.
- 3bcdf74: Removed some old CSS that was mis-styling the input background color based on parent context. This was needed before inputs got their current outline styling, and removing it should fix several small issues, including:
  - Nesting form elements like `<Input>`, `<Select>`, and `<TextArea>`, inside `.bfc-base-3-bg` should no longer result in wrong background colors.
  - Nesting a `<Select>` that is `disabled` inside a `<Section>` should now look as expected.
  - `<Input>` should look the same inside a `<Table>` as it does outside.
- ea682a9: Fix: Render `<Tabs>` overflow arrows based on container size as opposed to window size. #776
- 8fb3f6c: Changed typescript definitions for union props to make them more readable in props docs table and on hover in IDE !693
- Updated dependencies [cfc369e]
- Updated dependencies [3bcdf74]
- Updated dependencies [3a5ae26]
- Updated dependencies [df8ce99]
  - @intility/bifrost-css@4.11.0

## 4.10.1 - 2024-08-27

### Patch Changes

- 6ef5ced: Fix: Use pointer cursor when hovering hidden native `<input>` for checkbox, radio, switch, and checkboxcard. #777
- Updated dependencies [6ef5ced]
  - @intility/bifrost-css@4.10.1

## 4.10.0 - 2024-08-22

### Minor Changes

- 810663f: Added some new color classes: `.bfc-base-c-attention-bg` and `.bfc-base-c-chill-bg`
  Recolored some badges to use base-3 as text color (attn, chill)
  Fixed link color for background class names
- f1be5f4: Add `external` prop to `<Box.Arrow>` component, for an arrow poiting up and to the right, suitable for use with external links.

### Patch Changes

- 46d07a6: Fix: "skip to content" button (from `<Nav>`) should no longer be part of printed content.
- 8cbbf46: fix: `<Button.Group active>` focus and hover styling fixes
- bb6765e: fix: increase native (hidden) checkbox input element size to make it more compatible with how tippy works (Dropdown and Tooltip components) #525
- Updated dependencies [810663f]
- Updated dependencies [46d07a6]
- Updated dependencies [8cbbf46]
- Updated dependencies [bb6765e]
- Updated dependencies [f1be5f4]
  - @intility/bifrost-css@4.10.0

## 4.9.0 - 2024-08-14

### Minor Changes

- a727d33: Based on feedback we've changed the default `<Button>` color back to `theme`. We're preparing components to be compatible with a theming system we're currently working on. Hopefully we don't create too many issues :)
  - Same goes for `<Input iconButton>`, `<Button.Group>` and `<Tag active>`
  - Add new `state="neutral"` to `<Button>` (`.bf-button-neutral` CSS class)

### Patch Changes

- e3da5e5: Fix: `<Modal>` should no longer close itself when nested elements trigger a `cancel` event.
- 8685fcf: Removed theme color from table header and border left
- e8faca6: Fixed bug where clicking the outer edges of wide buttons doesn't register clicks (because it was scaled down, placing the cursor outside button)
- Updated dependencies [8685fcf]
- Updated dependencies [e8faca6]
- Updated dependencies [fe7ec62]
- Updated dependencies [a727d33]
  - @intility/bifrost-css@4.9.0

## 4.8.0 - 2024-08-07

### Minor Changes

- 77c67b4: Updated checkbox styling
  - Removed theme color
  - Increased size of checkbox, radio and switch
  - Now supports custom browser font size
  - New active state for switch
  - New hover state for checkbox, radio and switch
  - Neutralized select checkboxes

### Patch Changes

- 9326af8: add locale for the word "of"
- Updated dependencies [77c67b4]
  - @intility/bifrost-css@4.8.0

## 4.7.5 - 2024-08-07

### Patch Changes

- Updated dependencies [fd3acaa]
  - @intility/bifrost-css@4.7.2

## 4.7.4 - 2024-08-06

### Patch Changes

- 633e7b2: chore: avoid internal barrel file imports
- Updated dependencies [899927b]
- Updated dependencies [2cbf99a]
  - @intility/bifrost-css@4.7.1

## 4.7.3 - 2024-08-02

### Patch Changes

- 1755cfb: fix: autoFocus not working in `<Modal />` when initial `isOpen` is true

## 4.7.2 - 2024-08-02

### Patch Changes

- Updated dependencies [3ccc958]
- Updated dependencies [6dfd55d]
- Updated dependencies [14c207d]
  - @intility/bifrost-css@4.7.0

## 4.7.1 - 2024-07-31

### Patch Changes

- Updated dependencies [9ae0e80]
  - @intility/bifrost-css@4.6.1

## 4.7.0 - 2024-07-30

### Minor Changes

- daa6eee: New breadcrumbs styling
  - Added CSS to allow buttons inside `.bf-breadcrumbs` container (to allow forward/back buttons)
  - Use `/` instead of `>` icon to separate path segments
    - `.bf-breadcrumb-angle` renamed to `.bf-breadcrumb-separator`
- 365100c: Changed color values for:

  - `--bfc-base-dimmed`
  - `--bfc-base-c-alert`
  - `--bfc-base-c-wcag`
  - `--bfc-base-c-dimmed` (alias for `--bfc-base-dimmed`)
  - `--bfc-base-c-inverted-1`
  - `--bfc-base-c-inverted-2`
  - `--bfc-alert`
  - `--bfc-alert-c` (big change, from almost black to white)
  - `--bfc-alert-fade`
  - `--bfc-alert-fade-c`
  - `--bfc-alert-fade-1` (alias for `--bfc-alert-fade`)
  - `--bfc-alert-fade-1-c` (alias for `--bfc-alert-fade-c`)

  Added new colors:

  - `--bfc-base-c-inverted-3`
  - `--bfc-base-dimmed-1` (alias for existing `--bfc-base-dimmed`)
  - `--bfc-base-dimmed-2`
  - `--bfc-base-dimmed-3`
  - `--bfc-alert-2`

  Added new class names:

  - `.bfc-base-c-bg`
  - `.bfc-base-c-2-bg`

  New `<Button>` styling:

  - Increased `border-radius` (from xs to s)
  - New outline styling on keyboard focus
  - Removed theme color from `variant="filled"`
  - Added `variant="flat"`, no background or outline
  - Added `state="inverted"`, for contrasting background
  - Deprecated `variant="outline"` since default `variant` has outline
  - `state="alert"` now supported by every `variant`
  - New `<Button.Group>` styling
    - Removed theme color from `active` button
  - Fixed outline overlapping on `:focus-visible` with `z-index: 1`

  Update `<Checkbox button>`, `<CheckboxCard>`, `<Tag>` and `<Drawer>` (close button) styling to match new bifrost Button.

  Update `border` styling for `<Input>`, `<Textarea>` and `<FieldGroup>` to match new bifrost Button.

  New `<Badge>` styling: updated `font-weight` and `padding`. Background changed for `inverted` `state="neutral"` variant.

  Increased `marginRight` and `marginLeft` for `<Icon>` from `4px` to `8px`.

### Patch Changes

- ac738a9: Fix: Remove "." placeholder from `<Skeleton.Text>` and pray browsers support `lh` CSS unit.
- 7b2eacc: Fix: Apparently, Chrome has changed its `<input autocomplete>` behaviour and now appears to only respect `autoComplete="off"`, so lets try that and pray to the browser gods that this will satisfy all of them for the forseeable future. #758
- 49761c2: support `autoFocus` on elements inside `<Modal />`
- Updated dependencies [ac738a9]
- Updated dependencies [4df5421]
- Updated dependencies [841993b]
- Updated dependencies [daa6eee]
- Updated dependencies [a23cc4f]
- Updated dependencies [365100c]
  - @intility/bifrost-css@4.6.0

## 4.6.0 - 2024-06-21

### Minor Changes

- 43dc6cf9: New `removeFloatingMessage()` function exposed from `useFloatingMessage()` hook when called from a component nested inside a floating message. #708

### Patch Changes

- 426d9481: Fix: Floating messages should now transition properly regardless of message box height, and respect users `prefers-reduced-motion` setting.
- Updated dependencies [a2ec3e53]
- Updated dependencies [23ff3593]
  - @intility/bifrost-css@4.5.1

## 4.5.1 - 2024-06-13

### Patch Changes

- fd392752: Fix: Drawer `inert` prop should now support react 19
- 6a6a8cd5: import tippy with a fallback to avoid failing in some build systems
- Updated dependencies [833a15e4]
  - @intility/bifrost-css@4.5.0

## 4.5.0 - 2024-06-06

### Minor Changes

- 0b24673c: Feat: New styling for dropdowns, now always renders with both a shadow and border. Deprecated the `<Dropdown variant>` prop and removed `.bf-dropdown-border` since there's only one variant now.

### Patch Changes

- 13a6a698: Fix: `<Tooltip>` should no longer be overlapped by `<Nav>` #744
- Updated dependencies [0b24673c]
- Updated dependencies [e6ead541]
  - @intility/bifrost-css@4.4.0

## 4.4.0 - 2024-06-05

### Minor Changes

- c0206816: Added new `<Section>` component

### Patch Changes

- c20e24ae: Fix Nav.Search styling when used in top bar
- 409b9e4d: Fix: allow deep import of `useBreakpoint` hook, e.g. `import useBreakpoint from "@intility/bifrost-react/hooks/useBreakpoint";`
- Updated dependencies [c20e24ae]
- Updated dependencies [5de6a97c]
  - @intility/bifrost-css@4.3.1

## 4.3.0 - 2024-05-31

### Minor Changes

- 069614ed: Slight tweaks to .bf-input, .bf-datepicker and .bf-textarea on hover and focus #740
- 9b7cead3: Fix: Font-size variables are now defined in `rem` in order to respect user agent font settings. #742
- fd90da94: Feat: add scrollbar styling
  - Default `scrollbar-color` set on root element, `.bf-scrollbar`, and `.bf-scrollbar-small`
  - `.bf-scrollbar-small` now applies `scrollbar-width: thin`

### Patch Changes

- 503ffd86: Performance tweaks for `useDateTimeFormatter()` #725
- 9749173c: Fixed positioning for nav top bar #746
- Updated dependencies [069614ed]
- Updated dependencies [9b7cead3]
- Updated dependencies [fd90da94]
- Updated dependencies [9749173c]
  - @intility/bifrost-css@4.3.0

## 4.2.7 - 2024-05-29

### Patch Changes

- Updated dependencies [d2bb0be5]
  - @intility/bifrost-css@4.2.7

## 4.2.6 - 2024-05-29

### Patch Changes

- Updated dependencies [4c0b4e5e]
  - @intility/bifrost-css@4.2.6

## 4.2.5 - 2024-05-27

### Patch Changes

- c00455e8: bump focus-trap-react dep
- Updated dependencies [af52c2d7]
  - @intility/bifrost-css@4.2.5

## 4.2.4 - 2024-05-22

### Patch Changes

- 92cc2649: Fixed error assigning sub-components to a client component
- bf863902: New custom icon for Nav sidebar collapse button
- 751340b2: fix intility logo asset import in Nav.Logo and internal Branding component
- Updated dependencies [366de21e]
- Updated dependencies [bf863902]
- Updated dependencies [917825cb]
  - @intility/bifrost-css@4.2.4

## 4.2.3 - 2024-05-16

### Patch Changes

- Updated dependencies [9c1de768]
  - @intility/bifrost-css@4.2.3

## 4.2.2 - 2024-05-16

### Patch Changes

- Updated dependencies [08583204]
  - @intility/bifrost-css@4.2.2

## 4.2.1 - 2024-05-15

### Patch Changes

- 99fc0cdc: Change nav side collapse icon from pro to free bundle
- 33a242ff: Fix text-align in top nav for some scenarios
- Updated dependencies [33a242ff]
  - @intility/bifrost-css@4.2.1

## 4.2.0 - 2024-05-15

### Minor Changes

- 74dc6d6f: - `<Nav>` component redesigned:
  - A lot of styling changes, including removal of top-left Intility logo. See [bifrost-css changelog](https://gitlab.intility.com/DeveloperServices/portal2/bifrost/-/blob/master/packages/bifrost-css/CHANGELOG.md).
  - Added "an intility service" branding to bottom of sidebar (and mobile nav).
    - New prop `hideBranding` can disable it.
    - Changes to an "it" graphic for collapsed sidebar.
  - New prop `logo`, which accepts an app name as string, or JSX content.
  - Deprecated props `appName`, `collapsedAppName`, `logoHref`, and `logoOnClick` (all you need is `logo`)
  - New helper component `<Nav.Logo>` for topbar logo layout (custom graphic + text). See updated [Nav component docs](https://bifrost.intility.com/react/nav#logo-graphic) for examples.
- dfb6fbfb: - New `<Box>` component to make bifrost styling more easily accessible in JSX.
  - Unstyled by default, use props to add styling:
  - `shadow` - `boolean`
  - `border` (plus `borderTop`, `borderRight`, `borderBottom`, `borderLeft`) - `boolean`
  - `padding` (plus `paddingInline`, `paddingBlock`) - `boolean` | `number`
  - `background` - `boolean` | `"base"` | `"base-2"` | `"base-3"` | `"dimmed"` | `"dimmed-c"` | `"inverted"` | `"inverted-2"` | `"theme"` | `"theme-fade"` | `"success"` | `"success-fade"` | `"warning"` | `"warning-fade"` | `"alert"` | `"alert-fade"` | `"alert-fade-2"` | `"attn"` | `"attn-c"` | `"chill"` | `"chill-c"`
  - `radius` (plus `radiusTopLeft`, `radiusTopRight`, `radiusBottomRight`, `radiusBottomLeft`)
    - `"xs"` = `4px`
    - `"s"` = `8px`
    - `true` or `"m"` = `12px`
    - `"l"` = `16px`
    - `"xl"` = `24px`
    - `"full"` = `9999px`
    - `false` or `undefined` (default) = no border radius
  - New `<Box.Arrow>` component, renders an arrow-right icon with a transition on hover when nested inside a link.
    - E.g. `<a href="/path">link with arrow <Box.Arrow /></a>`

### Patch Changes

- Updated dependencies [2207b865]
- Updated dependencies [f3eae438]
  - @intility/bifrost-css@4.2.0

## 4.1.2 - 2024-05-15

### Patch Changes

- 924c0b5f: Bump datepicker and date-fns versions !557

## 4.1.1 - 2024-04-24

### Patch Changes

- Updated dependencies [31205e8d]
  - @intility/bifrost-css@4.1.1

## 4.1.0 - 2024-04-23

### Minor Changes

- f39613ed: Changes to `<Drawer>` and `.bf-drawer`
  - Use `margin` instead of `transform` to show/hide drawer. Fixes #736
  - Use `inert` html attribute for closed drawer instead of `display: none;` and `aria-hidden`

### Patch Changes

- 1efa0916: Fix: Avoid double border for `<Table.Row content>` #731
- 660407c2: fix: Disable autofocus on initial item when opening mobile Nav
- Updated dependencies [f39613ed]
- Updated dependencies [29572cca]
  - @intility/bifrost-css@4.1.0

## 4.0.2 - 2024-04-10

### Patch Changes

- 79b9ab5d: Fix deep import paths for `useNav` and `useFloatingMessage`

## 4.0.1 - 2024-04-05

### Patch Changes

- 611f82ca: Removed unnecessary files from npm package output.
- Updated dependencies [bb9e438b]
- Updated dependencies [611f82ca]
  - @intility/bifrost-css@4.0.1

## 4.0.0 - 2024-04-03

### Major Changes

- Removed dependencies `react-modal`, `react-animate-height`, `react-select`,
  `react-datepicker`, and `prop-types` from `@intility/bifrost-react`
  - Removed components `<Select>` and `<DatePicker>` from
    `@intility/bifrost-react`
  - 5c7ba5a4: New packages `@intility/bifrost-react-select` and
    `@intility/bifrost-react-datepicker`
- Removed `setTheme` method from deprecated `useTheme()` hook.
- 3f3af703: `<Button type>` prop now defaults to `"button"` (previously
  `"submit"`)
  - If you're using a bifrost `<Button>` inside a `<form>` (listening to the
    `onSubmit` event), and want it to submit the form, you now need to explicitly
    set `<Button type="submit">`
- `<Breakpoint>` rewritten from scratch.
  - No longer relies on `matchMedia` browser API (making it server-side
    friendly)
  - Will now always render its child content to the DOM, and show/hide it with
    [breakpoint CSS classes](/css/breakpoints)
  - Introduces a `<div>` wrapper.
  - We still recommend using [breakpoint CSS classes](/css/breakpoints) instead
- `<Modal>` rewritten from scratch, using brower native `<dialog>` element.
  - 81af701b: `fromBottom` prop removed, use `<Drawer position='bottom'>`
    instead.
    - Drawer with `position="buttom"` should not disable main scroll.
  - ae6a87d3: Refactor `<Modal>` component close props:
    - `noCloseButton` prevents rendering an "X" close button
    - `noCloseOnOverlayClick` prevents closing on overlay click (previously
      `shouldCloseOnOverlayClick`)
    - `noCloseOnEsc` prevents closing on ESC keypress (previously
      `shouldCloseOnEsc`)
    - removed `noClose` prop from previous beta prerelease
- `<SlideDown>` rewritten from scratch
  - Will now always render its child content to the DOM, and hide/transition
    with CSS classes [`.bf-expand` and `.bf-expand-closed`](/css/expand).
  - Uses a
    [css trick](https://css-tricks.com/css-grid-can-do-auto-height-transitions)
    that does not allow `padding` on the container. Create a child element with
    `padding` if needed.
  - Used internally by `<Message expandable>`, `<Accordion.Item>`,
    `<Table.Row content>` and `<Nav.Group>`
- 19500ce7: Removed all internal `localStorage` usage, `<Bifrost>` component is
  now strictly authorative
- 81af701b: New `position="bottom"` prop for `<Drawer>`
- 6b355639: New styling for inputs, now always outlined. Removed `variant` prop
  from `<Input>`.
- 3785f8d6: New `package.json` definitions, updated import paths
  - Allows deep imports (incl. TypeScript definitions)  
    ex: `import Accordion from '@intility/bifrost-react/Accordion'`
  - Support for React Server Components (RSC) and Server-Side Rendering (SSR or
    SSG)
  - Dropped support for CJS (only shipped in ES Module format, meaning
    `require('@intility/bifrost-react')` will not work, only `import` or
    `import()`)
  - 165904af: Hooks can be imported from `/hooks/*`
- Removed margins from block level typograpy classes
  - `.bf-h1`
  - `.bf-h2`
  - `.bf-h3`
  - `.bf-h4`
  - `.bf-h5`
  - `.bf-h6`
  - `.bf-p`
  - `.bf-ul`
  - `.bf-ol`
  - `.bf-li`
- Removed all `propTypes` in favor of TypeScript with JSDoc comments

### Minor Changes

- Deprecated ~~`icon`~~ and ~~`rightIcon`~~ props for `<Button>` (Use nested
  `<Icon>` instead: `<Button><Icon /> Click me</Button>`)
- Deprecated the (potentially confusing) `l` in `bfl-*` for:
  - `.bf-border` and `--bf-border`
  - `.bf-padding` and `--bf-box-padding`
  - `.bf-page-padding` and `--bf-page-padding`
  - `.bf-autocol`, `--bf-autocol-width`, and `--bf-autocol-gap`
  - The old names (like `.bfl-border`) are aliased and should still work, but
    might get removed in a future release.
- Deprecated ~~`theme`~~ prop from `<Bifrost>` component.
  - Apply theme class names `.bf-darkmode` and `.bf-lightmode` on root element
    (`<html>`) instead.
- New `useApplyTheme()` helper hook for applying a theme class to the root.
  - Only use in a single-page app, for SSR/RSC/SSG (like Next.js) you may have
    direct control over the root `<html>` element.
  - `useApplyTheme("dark")` applies `.bf-darkmode` class to `<html>`
  - `useApplyTheme("light")` applies `.bf-lightmode` class to `<html>`
  - `useApplyTheme("system")` does not apply any class (bifrost will follow
    device setting)
- `<Message>` components uses new (solid) default icons, you may prefer to
  pass in font awesome pro icons to the `icon` prop instead.
- `<Drawer>` with `overlay` (or fullscreen mobile) should disable scroll on root
  element instead of `<body>`, like the mobile `<Nav>` menu does.
  - Drawer content padding should now match `.bf-page-padding`.
- `<Accordion>` HTML structure and styling
  - Angle icon moved left for styled variant
  - No text-decoration on hover
- `<Message>` styling changes, angle icon moved left + minor tweaks. #719
- All form fields (`<Input>`, `<TextArea>`, `<Select>`, `<DatePicker>`, and
  `<FieldGroup>`) now have an `1px` outline instead of a `2px` underline
- Top nav logo color changed to neutral `base-c` and given a proper keyboard
  focus state.
- Slight tweaks to `base` and `attn` color values. #711 & #723
- New `position="bottom"` prop for `<Drawer>`
- b9a6353b: New classes for single edge bifrost default border:
  - `.bf-border-top`
  - `.bf-border-right`
  - `.bf-border-bottom`
  - `.bf-border-left`
- New CSS classes for rendering content for _either_ dark or light mode
  _exclusively_:
  - `.bf-dark-only` will be hidden (`display: none`) when in light mode
  - `.bf-light-only` will be hidden in dark mode
- New `.bf-elements` CSS class to apply typography CSS without margins
  (`.bf-content` does the same, but _with margins_)
- New standard values for `border-radius`
  - CSS Variables
    - `--bf-radius-none` = 0px
    - `--bf-radius-xs` = 4px
    - `--bf-radius-s` = 8px
    - `--bf-radius` or `--bf-radius-m` = 12px
    - `--bf-radius-l` = 16px
    - `--bf-radius-xl` = 24px
    - `--bf-radius-full` = 9999px
  - Corresponding CSS helper classes
    - `.bf-radius-xs` applies 4px `border-radius`
    - `.bf-radius-s` applies 8px `border-radius`
    - `.bf-radius` or `.bf-radius-m` applies 12px `border-radius`
    - `.bf-radius-l` applies 16px `border-radius`
    - `.bf-radius-xl` applies 24px `border-radius`
    - `.bf-radius-full` applies 9999px `border-radius`
  - Deprecated old border radius classes and variable
    - ~~`--bfl-border-radius`~~ use `--bf-radius-xs` instead.
    - ~~`.bfl-border-radius`~~ and ~~`.bf-border-radius`~~, use `.bf-radius-xs`
      instead.
  - All `border-radius` values updated to use new `--bf-radius-*` variables.
- New [`<Inline>`](/react/inline) component for inline layouts
  - Places its child elements on same line with a `8px` gap default
  - Uses `.bf-inline` CSS class
  - Use `<Inline.Separator />` as a child to push its siblings away
    - Alternatively use `.bf-inline-separator` CSS class
  - Use `<Inline.Stretch>` to stretch its own nested child element.
    - `<Inline.Stretch><Button>Stretched button</Button></Inline.Stretch>`
    - Alternatively use `.bf-inline-stretch` CSS class
      - `<Button className="bf-inline-stretch">Stretched button</Button>`
- 7f1969b7: New `fullTooltip` prop for `<FormatDate>` displays full date and
  time in tooltip even if `show` is set to `date` or `time`
- 6edfa7a4: Improve accessibility and keyboard navigation for `<Nav>` component
  #441
  - New "Skip to content" button for keyboard users
  - Trap focus inside mobile nav menu when open, with a close button for
    keyboard users
  - Added missing `aria` attributes
- cc16df41: `<Tooltip>` DOM node is now appended to `parentNode` by default, in
  order to work correctly when used inside a `<Modal>`. #722  
  [Read more about appendTo at tippyjs docs](https://atomiks.github.io/tippyjs/v6/all-props/#appendto).
- 6b355639: New `<Accordion>` styling and DOM structure
  - New `buttonProps` prop for `<Accordion.Item>`, allows customizing the
    underlying `<button>` element
- 9814ef52: New `useDateTimeFormatter()` hook for formatting date and/or time.
  - Follows the locale passed to `<Bifrost locale>`
  - Replaces `dateFormat()` and `timeFormat()` (now marked as deprecated)
  - Returns a function that accepts an object parameter with same API as
    `<FormatDate>`:
    - `show`: either "date" (default), "time", or "datetime"
    - `date`: an ISO formatted date string, or a `Date` objet
    - `locale`: (optional) override the default
      [`Intl.Locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)
    - `options` (optional) override the default
      [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
- 62b02461: Include JSDoc comments in TypeScript Definition output
- 50b76941: Fix: Mobile landscape font size iOS #721
- 3849abc3: Optional padding (`noPadding` prop) and close button
  (`onRequestClose` no longer required) for `<Drawer>`
- be0a4fcf: `<Checkbox>` and `<CheckboxCard>` internal rewrite. Input wrapped
  in label, removes need for generated `id`. Props and usage unchanged.
- 56d60bd8: Add convenience aliases for some components:
  - `<SubmitButton>` is the same as `<Button type="submit" variant="filled">`
  - `<Radio>` is the same as `<Checkbox type="radio">`
  - `<Switch>` is the same as `<Checkbox type="switch">`
- ec250594: `<Drawer>` content padding should now match `.bf-page-padding`.
- 710afa88: New `<Message>` component styling #719

### Patch Changes

- `<Breadcrumbs.Item>` separator angle color and spacing changed to more closely
  match Figma component.
- Fixed bug that allowed users to focus elements inside a closed `<Drawer>` when
  using the `footer` prop.
- Updated mobile landscape font size for IOS. #721
- Disable main scroll while scrolling inside `.bf-drawer` or `.bf-modal` with
  `overscroll-behavior: contain` #678
- Add `safe-area` (mobile device screen "notch" or "dynamic island") padding for
  `.bf-drawer` #734
- Use `dvh` instead of `vh` for supporting browsers #733
- 5e25cfc0: Fix: `index.d.ts` files in package output should no longer strip out
  JSDoc comments for component props. Hovering over a prop in vscode should now
  properly display a description.
- 82b1a248: Fix: Allow clicks outside focus-trapped mobile `<Nav>`
- 18c2b063: Allow `<SlideDown>` overflow when expanded
- 82ab21b5: Update `border-radius` values to use bifrost css variables
- 5504294e: Fix `<Drawer>` spacing when no close button
- 14a9b64b: Fix: `<Grid.Span cols>` prop should now properly default to `1`
- 1076f2cb: Fix: internal `<button>`s are now `type="button"` and should no
  longer trigger a submit if wrapped in `<form>`
- 8263586d: Fix: allow `dist/*` css import
- 7db473c6: Fixed bug that allowed focus inside a closed `<Drawer>` when using
  `footer` prop

## [3.12.0] - 2023-09-28

### Added

- Added support for swedish `svSE` locale and date format.

### Fixed

- `useUniqueId` should no longer cause warnings when attempting to build projects using pre-18 react

## [3.11.0] - 2023-08-24

### Changed

- [`<Nav>`](#/Components/Navigation/Nav) styling changed, mobile and tablet menu items are now styled same as desktop sidebar.

### Fixed

- [`<Table.Row>`](#/Components/Interactive/Table) with `content` will now correctly span all available columns. !446
- [`<Checkbox>`](#/Components/Inputs/Checkbox) and [`<CheckboxCard>`](#/Components/Inputs/CheckboxCard) should now render correct state even without `checked` prop (useful if used inside a `<form>`, for instance). !450
- Ids generated under the hood by Bifrost components will now use `useId` when on React 18, giving better SSR support
- Open Sans and Satoshi font family names are now read from variables (`--font-open-sans` and `--font-satoshi`), allowing usage of NextJS font system
- Mobile nav menu should now correctly prevent main browser scroll while open (even for first toggle).
- [`<FloatingArea>`](#/Components/Utility/FloatingArea) should be positioned correctly even if `body` has `overflow: scroll` styling (don't do this)

## [3.10.0] - 2023-06-07

### Changed

- Cleaned up a lot of potential CSS issues (with help from [`stylelint`](https://stylelint.io/)). #684
- [`<Select>`](#/Components/Inputs/Select) now displays current selection (for single value) in input field while opened.
- Added screen reader accessible label for [`<Modal>`](#/Components/Interactive/Modal) and [`<Drawer>`](#/Components/Interactive/Drawer) close button. !443

### Fixed

- Icon files in `/es/assets` directory of the package output should now correctly be ES module format. #688
- Updated [`react-datepicker`](https://reactdatepicker.com/) dependency to version [`^4.12.0`](https://github.com/Hacker0x01/react-datepicker/releases/tag/v4.12.0) which should fix timepicker issue. #620
- [`<Select>`](#/Components/Inputs/Select) and other scrollable elements should no longer get extra padding when used inside [`<Drawer>`](#/Components/Interactive/Drawer). #690

## [3.9.0] - 2023-05-05

### Added

- New prop `footer` for [`<Drawer>`](#/Components/Interactive/Drawer) provides a fixed (non-scrollable) area at the bottom of the drawer. #606

### Fixed

- Using [`<Select>`](#/Components/Inputs/Select) with grouped options should no longer produce an error about ":first-child" CSS. #682
- `<Tabs.Item content>` prop type should now work properly, even with latest react types. Refactored all component prop types to avoid potential conflicts with any global `@types/react` HTML attributes. #683

## [3.8.3] - 2023-04-25

### Fixed

- Downgraded [`react-datepicker`](https://reactdatepicker.com/) dependency to version `4.8.0` since it's [currently the latest version with a working timepicker](https://github.com/Hacker0x01/react-datepicker/issues/3952) (hopefully temporarily). #679

## [3.8.2] - 2023-04-21

### Fixed

- [`<Dropdown>`](#/Components/Interactive/Dropdown) padding moved inside its scrollable area. #671
- Close button for [`<Modal>`](#/Components/Interactive/Modal) and [`<Drawer>`](#/Components/Interactive/Drawer) should now render correctly for iOS Safari. #677

## [3.8.1] - 2023-04-11

### Fixed

- `appName` for [`<Nav>`](#/Components/Navigation/Nav) changed font to Open Sans. #529
- The following components now support JSX in `label` prop. #551
  - [`<TextArea>`](#/Components/Inputs/TextArea)
  - [`<CheckboxCard>`](#/Components/Inputs/CheckboxCard)
  - [`<FieldGroup>`](#/Components/Inputs/FieldGroup)
  - [`<DatePicker>`](#/Components/Inputs/DatePicker)
  - [`<Select>`](#/Components/Inputs/Select)
  - [`<Spinner>`](#/Components/Visual/Spinner)

## [3.8.0] - 2023-03-17

### Fixed

- [`<Modal>`](#/Components/Interactive/Modal) close button z-index issue when content surpasses screen height on mobile devices. #658
- [`<Table.Row>`](#/Components/Interactive/Table) click event for expanding `content` should no longer propagate/bubble. #646
- Firefox should no longer render [`<Nav.Group>`](#/Components/Navigation/Nav) taller than [`<Nav.Item>`](#/Components/Navigation/Nav) #668

### Added

- New prop `pill` for [`<Badge>`](#/Components/Visual/Badge), applies rounded corners. #661

## [3.7.0] - 2023-03-01

### Changed

- TypeScript definitions have been reworked.
- [`<Card>`](#/Components/Visual/Card) styling tweaks, default font (Open Sans) for title, and default text color (`base-c`) for content. #596
- [`FormatDate`](#/Components/Utility/FormatDate) now displays a shorter numeric date format. #517
  - New tooltip displays full month name for dates, and timezone info for times.
  - Added [`options`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) and [`locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#locales) props for customizability

### Fixed

- [`<Input>`](#/Components/Inputs/Input) component, added TypeScript support for JSX in `label` prop. #551
- Locked `react-datepicker` dependency to version `4.10.0` (previously `^4.3.0`) since they introduced breaking api changes inside same major version. #620
- [`<DatePicker>`](#/Components/Inputs/DatePicker) format and placeholders should now follow current bifrost locale. #517
  - Added placeholders for month/year and year-only mode.
  - Better highlighting of todays date (underlined) #621
- Passing `components` prop to [`<Select>`](#/Components/Inputs/Select) is now merged with Bifrost Select's components, instead of overriding.

## [3.6.0] - 2023-02-02

### Added

- [`<Button.Expand>`](#/Components/Inputs/Button) component, a bifrost-standardised toggle button useful alongside [`<SlideDown>`](#/Components/Utility/SlideDown). #450
- [`<Select>`](#/Components/Inputs/Select) now supports a `loading` prop (alias for `isLoading` from `react-select`), which displays a loading spinner in a similar fashion to [`<Input loading>`](#/Components/Inputs/Input). #540
- More link style css classes and a new style guide page for [styling links and buttons](#/Welcome%20to%20Bifrost/Visual%20style/Links%20and%20buttons). #610
  - Links with `.bf-button` can now be combined with `.bf-button-pill`, `.bf-button-small`, `.bf-tag` (previously only `.bf-button-filled` and `.bf-button-outline`)
  - Allows styling `<a>` as a small button, pill button, any combination (including filled and outline), or a [`<Tag>`](#/Components/Interactive/Tag)

### Changed

- Slightly increased padding on [`<Button small pill>`](#/Components/Inputs/Button) from `8px` to `12px`.

### Fixed

- Warning/alert icon size for [`<TextArea>`](#/Components/Inputs/TextArea). #612
- Updated our [`<DatePicker>`](#/Components/Inputs/DatePicker) since certain versions of `react-datepicker` appears to pass a Date object to `formatWeekDay` prop instead of a string. #614

## [3.5.1] - 2023-01-25

### Fixed

- [`<Accordion.Item onClick>`](#/Components/Interactive/Accordion) is now usable with internal state (previously required you to control `active` state explicitly)

## [3.5.0] - 2023-01-11

### Fixed

- [`<Checkbox>`](#/Components/Inputs/Checkbox) with `hideLabel` should better match the size and alignment of other checkboxes. #575
- [`<Drawer>`](#/Components/Interactive/Drawer) heading `font-weight` updated to match figma spec. #581

### Added

- [`<SlideDown>`](#/Components/Utility/SlideDown) accepts a `closedHeight` prop
- [`<Select>`](#/Components/Inputs/Select) now forwards the `ref` to the internal `react-select` component

### Changed (potentially breaking)

- CSS variables `--bf-nav-top-height` and `--bf-nav-side-width` should now be `0px` for parent elements of [`<Nav>`](#/Components/Navigation/Nav), and for child elements when there is no [`<Nav>`](#/Components/Navigation/Nav) top or side, respectively. fixes #576 but we may revert this change if there are unintended side effects.

## [3.4.3] - 2022-12-01

### Fixed

- [`<Drawer>`](#/Components/Interactive/Drawer) no longer erroneously disables scrolling on body in certain circumstances. (For up to large (1280px) screens it renders with an overlay and disables scrolling on body, which would stick if users zoomed out or resized window.) #572
- [`<Checkbox>`](#/Components/Inputs/Checkbox) wrapper now has `position: relative` to contain its hidden internal `<input>`, fixes strange scrollbar/overflow issues in Firefox.

## [3.4.2] - 2022-11-18

### Fixed

- Prevent [`<Nav>`](#/Components/Navigation/Nav) top bar from obscuring top section of the element being scrolled to (when using a url hash) by adding `scroll-padding-top` to `<html>`.

## [3.4.1] - 2022-11-16

### Fixed

- Minor overflow issue when using [`<Checkbox>`](#/Components/Inputs/Checkbox) inside [`<Nav.Group>`](#/Components/Navigation/Nav) in top bar.
- [`<Drawer>`](#/Components/Interactive/Drawer) close button should no longer overlap header. #564

## [3.4.0] - 2022-11-16

### Added

- `contentProps` prop for [`<Tabs.Item>`](#/Components/Interactive/Tabs) forwards props to internal `<div>` (allows putting custom css class on content wrapper, for instance).
- `noCloseButton` for [`<Modal>`](#/Components/Interactive/Modal), allows developers to customize close button while still using `onRequestClose` for closing on overlay click and ESC keypress.
- [Color conversion table](#/Welcome%20to%20Bifrost/Visual%20style/Colors), converts all bifrost CSS variable colors to hsl, rgb, or rgb-hex syntax.

### Changed

- Minor styling tweaks for [`<Checkbox>`](#/Components/Inputs/Checkbox), should behave better when used as a CSS grid item.
- [`.bf-scrollbar`](#/Welcome%20to%20Bifrost/Examples/Scrollbar) (and `.bf-scrollbar-small`) now also applies `scroll-behavior: smooth` for users without `prefers-reduced-motion`
- Use small scrollbar for [`<Select>`](#/Components/Inputs/Select) and [`<Sticky>`](#/Components/Utility/Sticky) #440
- More CSS bundles in package output, allows more options for fine-grained usage (bifrost css without font imports, for example). [CSS files overview in Contributing.md file in gitlab](https://gitlab.intilit