import Layout from "../../../components/layout";
import { Table } from "baseui/table";
import { BlogImage, Demo, Meta } from "../../../components/blog";
import metadata from "./metadata.json";
export default Layout;
# Changes in Base Web@v7
## Required React version
To enable the use of [hooks](https://reactjs.org/docs/hooks-intro.html), please update your React version to 16.8 or higher.
## Styletron update to v5
We've updated Styletron to version 5, and edited style types. Previously to this change, `styled` calls were not
type checked. This change also removes usage of `$ref` now that Styletron has support for `ref` forwarding.
See the example below for how this change will affect your code. Type definitions of props passed to
components created with `styled` will be moved out of the style function, and to between `styled` and
arguments. View information of Flow Generics [here](https://flow.org/en/docs/types/generics/#toc-syntax-of-generics).
Theme no longer needs to be explicitly typed in props. The `styled` function provides that.
### Props type pass as generic rather than to callback function
```diff
import {styled} from 'baseui';
- type PropsT = {$active: boolean, $theme: ThemeT};
- const MyStyledComponent = styled('div', (props: PropsT) => {
- return {
- backgroundColor: props.$active ? props.$theme.colors.primary400 : props.$theme.colors.negative400,
- };
- });
+ type PropsT = {$active: boolean};
+ const MyStyledComponent = styled('div', props => {
+ return {
+ backgroundColor: props.$active ? props.$theme.colors.primary400 : props.$theme.colors.negative400,
+ };
+ });
```
### Custom theme
If your application has a custom theme, to properly type check in styled functions, you'll need to pass
your theme type as a generic.
```diff
import {styled} from 'baseui';
type PropsT = {$active: boolean};
- const MyStyledComponent = styled('div', props => {
+ const MyStyledComponent = styled('div', props => {
return {
backgroundColor: props.$active ? props.$theme.colors.myBlue : props.$theme.colors.myRed,
};
});
```
### Better type checks
```javascript
type PropsT = { $active: boolean };
const MyStyledComponent =
styled <
PropsT >
('div',
(props) => {
console.log(props.$notReal); // is now a flow error
return {
backgroundColor: props.$active
? props.$theme.colors.primary400
: props.$theme.colors.negative400,
notACSSProperty: ':)', // flow will type check for valid css properties as well as values
};
});
```
We understand that adding type checks to your code all of a sudden may introduce a substantial
migration effort. Because of this, you can run a codemod to add `// $FlowFixMe` comment above all
uses of baseui's `styled` function. Doing so will leave your code in the same state as before, no
type security, with the benefit of migrating type checks at your leisure. Either update the types
along with the baseui version update or run the codemod to save the changes for later. Follow the
instructions below to run the codemod locally.
```bash
npx @uber-web-ui/baseui-codemods --mod=v8Types --dir=
```
Use the -d option for a dry-run and use -p to print the output for comparison.
### \$ref -> ref
All usage of `$ref` has been removed. You'll want to move from `$ref` to `ref` and you will see a
warning in the console describing the change. This change follows styletron's support of forwardRef
in its latest release.
```diff
import {styled} from 'baseui';
const MyStyledComponent = styled('div', {color: 'red'});
-
+
```
### styled -> withStyle
Baseui previously checked if the first argument to its `styled` function was a styletron-component or not.
If it was, the function would call `withStyle` from `styletron-react` automatically. Support for this was
removed in v7. Separating this functionality out will reduce the amount of complexity in baseui's `styled`
function and now clearly maps one to one with `styled` functionality from `styletron-react`. The only
difference now is that `$theme` is injected. See an example below for how you may need to update your
code. It's a contrived example, but should illustrate how some styletron-components can 'extend' others.
```diff
import {styled} from 'baseui';
+import {withStyle} from 'styletron-react';
const InitialComponent = styled('div', props => {
return {
backgroundColor: props.$theme.colors.positive400,
color: 'pink',
};
});
-const ExtendedComponent = styled(InitialComponent, {
+const ExtendedComponent = withStyle(InitialComponent, {
backgroundColor: 'blue',
});
```
### Accordion type changes
- `SharedStylePropsT` type is removed. It duplicates the `SharedStylePropsArgT` type. Use
that instead.
### Breadcrumbs type changes
- `StyledIcon` component is removed. It was only wrapping an arrow icon. This logic was moved to the
component itself.
- `StyledRootPropsT` and `StyledSeparatorT` types are removed. There are no style props passed to these
components. Use an empty object type if they were imported in your code.
### Button Group type changes
- `StylePropsT` type is removed. There are no style props passed. Use an empty object type if they
were imported in your code.
### Checkbox type changes
- `$theme` prop is removed from `PropsT` type. The `$theme` is provided by the baseui `styled` function.
There is no need to be concerned with it in consuming code.
### Datepicker type changes
- `calculateBorderRadius` function is no longer exported. It is a utility function not meant to be used.
### HeaderNavigation type changes
- `align` prop on `NavigationList` is renamed to `$align` since it is a component built with styletron.
### Icon type changes
- `StyledComponentParamsT` type is removed. Use `StyledComponentArgsT` instead.
- `SharedStylePropsT` and `StyledComponentPropT` types are removed. Use `SharedStylePropsArgT` instead.
### Popover type changes
- `SharedStylePropsT` type is removed. Use `StyledStyledPropsArgT` instead.
### Progress Steps type changes
- `StyledProgressStepsPropsT`, `StyledNumberIconPropsT`, `StyledNumberContentTailPropsT`, `StyledNumberStepPropsT`,
`StyledStepPropsT` types are removed. Use `StylePropsT` instead.
### Select type changes
- `SharedStylePropsT` type is removed. Use `SharedStylePropsArgT` instead.
### Table type changes
- `SharedStylePropsT` type is removed. There are no style props passed. Use an empty object type if it
was imported in your code
### Tabs type changes
- `SharedStylePropsT` type is removed. Use `SharedStylePropsArgT` instead.
### Tag type changes
- `SharedPropsT` type is removed. Use `SharedPropsArgT` instead.
### Toast type changes
- `SharedStylePropsT` type is removed. Use `SharedStylePropsArgT` instead.
- `ToasterSharedStylePropsT` type is removed. Use `ToasterSharedStylePropsArgT` instead.
## Theme changes
We are removing deprecated properties from the theme object. It only affects you if you've used your own theme
with the `Tag`, `Tooltip` or `Input` components.
To update your theme, please take a look at the update shape of the theme object [here](https://baseweb.design/guides/theming/#theme-properties).
## Pagination
The Pagination component was refactored to reuse the `Select` component for its dropdown element. The change only effects you if you used overrides.
### Migrating the `Pagination` component
- `StyledDropdownMenu` export was removed
- `StyledDropdownButton` export was removed
- `overrides` prop changes:
- `DropdownButton` override was removed
- `DropdownMenu` override was removed
- `Select` override was added. Please note that `Select` identifier in the pagination overrides object is for a component and not a styled element. Refer to the API of the [`Select` component](https://baseweb.design/components/select/) for the full list of its props.
```diff
- import {StyledDropdownMenu} from 'baseui/select';
- import {StyledDropdownButton} from 'baseui/select';
```
## Side Navigation
The purpose of this change is to rename the Side Navigation item prop `subnav` to `subNav` for consistency with the camel-cased styled component.
Also, as the `renderItem` prop is not necessary since it's identical to `overrides.NavLink.component`, we've removed it.
### Migrating the `Side Navigation` component
Update `subnav` item prop to `subNav`:
```diff
const nav = [
{
title: 'Colors',
itemId: '#level1.1',
- subnav: [
+ subNav: [
{
title: 'Primary',
itemId: '#level1.1.1',
},
{
title: 'Shades',
itemId: '#level1.1.2',
- subnav: [
+ subNav: [
{
title: 'Dark',
itemId: '#level1.1.2.1',
},
{
title: 'Light',
itemId: '#level1.1.2.2',
},
],
},
],
},
{
title: 'Sizing',
itemId: '#level1.2',
},
{
title: 'Typography',
itemId: '#level1.3',
},
];
export default () => {
const [location, setLocation] = useState('#level1.1.1');
return (
setLocation(item.itemId)}
/>
);
};
```
Update from `renderItem` to overrides:
```diff
-
+
```
## Button
Button designs were updated to have uniform padding on all sides.
This change made the `square` shape redundant so it has been removed.
### Migrating the `Button` component
The main use case for the `square` shape was to create square buttons with an icon inside of them.
This use case is supported by default now.
You can simply remove the `shape="square"` property.
```diff
-