Tabs are used to organize content by grouping similar information on the same page.
yarn add @atlaskit/tabs#117363
10a0f7f6c2027 -
This package's peerDependencies have been adjusted for react and/or react-dom to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
b50c5d5d65ae2 -
Bump to the latest version of @compiled/react4660ec858a305 -
Update React from v16 to v1872f5b10de1847 -
Migrated from primitives components to primitives/compiled components#168353
cbd859b752028 -
Migrated from @emotion/react to @compiled/react in order to improve performance, align with
the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
Please note, in order to use this version of @atlaskit/tabs, you will need to ensure that your
bundler is configured to handle .css imports correctly. Most bundlers come with built-in support
for .css imports, so you may not need to do anything. If you are using a different bundler,
please refer to the documentation for that bundler to understand how to handle .css imports.
For more information on the migration, please refer to RFC-73 Migrating our components to Compiled CSS-in-JS.
57f451bda8919 -
Adds side-effect config to support Compiled css extraction in third-party apps#127511
db30e29344013 -
Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of react@18.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
d131599730792 -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.e229d87eecd0 - -
[ux] Removed horizontal padding from Tab container to ensure Tab labels and panel content align
with other elements on the page. Tab label hit-boxes remain the same.
ed8b6957789 - Removes
any usage of deprecated legacy theming APIs. These have been superseeded by design tokens.07aa588c8a4 - Reverts
the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.0cd2364f0ec - This
package is now onboarded onto the product push model.e7f99a81404 - Update
to use xcss where possible. There should be no difference in behaviour.56b444b56a8 - Fix a
bug where text descenders were cut off at high zoom levels on Windows599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.56507598609 - Skip
minor dependency bumpeadbf13d8c0 - Updated
usages of Text, Box, Stack, and Inline primitives to reflect their updated APIs. There are
no visual or behaviour changes.b0f6dd0bc35 - Updated
to use typography tokens. There is no expected behaviour or visual change.0637c50e226 - Updated
Tabs compnent to prefer to use focus-visible over focus css selectors.e35fc41dc33 - Internal
change to use updated primtive spacing prop values. No expected behaviour change.9827dcb82b8 - No-op
change to introduce spacing tokens to design system components.0d42cd1c926 - Internal
changes to the way styles are applied. There should be no noticeable changes to consumers.7ec1c1a023f - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.62edf20ab1e - Migrates
all usage of brand tokens to either selected or information tokens. This change is purely for
semantic reasons, there are no visual or behavioural changes.19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.#13302
cc54bf994d6 -
Instrumented Tabs with the new theming package, @atlaskit/tokens.
New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
af4bca32ad4 - Internal
changes to supress eslint rules.ecbf4a3267f - [ux] Fix
tabs focus ring in the windows high contrast moded6f7ff383cf - Updates
to development dependency storybook-addon-performance4f40ecb4471 - [ux]
Added Home and End keys handlers for tablist. Changed arrow keys handlers to make tabs cycled.
Now when you press the left arrow key on the first tab the last tab will be selected and when you
press right arrow key on the last tab the first tab will be selected#9756
c17fe6144f8 - ###
Major Changes
In this version, Tabs has had a pretty substantial rewrite. As well as now being dramatically
faster and more lightweight, it has a brand new flexible composable API and a bunch of
accessibility improvements.
The old version of Tabs had a tabs prop that would map to TabItem's and TabContent's.
import Tabs from '@atlaskit/tabs';
const ComponentUsingTabs = () => (
<Tabs tabs={
{ label: 'Tab 1', content: 'One' },
{ label: 'Tab 2', content: 'Two' },
{ label: 'Tab 3', content: 'Three' },
]} />
);
We've changed the language to match the W3 spec so a TabItem is now a Tab and a TabContent
is a TabPanel. We now export these components as well as a TabList so consumers use a
composable API that matches the DOM structure.
import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
const ComponentUsingTabs = () => (
<Tabs
id="component-using-tabs"
>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</TabList>
<TabPanel>
One
</TabPanel>
<TabPanel>
Two
</TabPanel>
<TabPanel>
Three
</TabPanel>
</Tabs>
);
This allows you to easily customise your usage, for example if you want to add a tooltip.
import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
import Tooltip from '@atlaskit/tooltip';
const TooltipTab = ({ label, tooltip }: { label: string; tooltip: string }) => (
<Tooltip content={tooltip}>
<Tab>{label}</Tab>
</Tooltip>
);
const ComponentUsingTabs = () => (
<Tabs
id="component-using-tabs"
>
<TabList>
<TooltipTab label="Tab 1" tooltip="Tooltip for tab 1" />
<TooltipTab label="Tab 2" tooltip="Tooltip for tab 2" />
<TooltipTab label="Tab 3" tooltip="Tooltip for tab 3" />
</TabList>
<TabPanel>
One
</TabPanel>
<TabPanel>
Two
</TabPanel>
<TabPanel>
Three
</TabPanel>
</Tabs>
);
The component prop allowed you to customise the Tab and TabPanel. This approach seemed
counter-intuitive and had a performance impact regardless of whether you were using it. Instead
with composability we have have added two hooks, useTab and useTabPanel.
To create a custom Tab, call useTab and spread those attributes onto the custom tab. From
there you can use it in place of a Tab. For example if you want to change the font size you
would do so like this.
import { useTab } from '@atlaskit/tabs';
const CustomTab = ({ label }: { label: string }) => {
const tabAttributes = useTab();
return (
<div
css={css`
font-size: 16px;
`}
{...tabAttributes}
>
{label}
</div>
);
};
Likewise, to create a custom TabPanel, call useTabPanel and spread those attributes onto the
custom tab panel.
import { useTabPanel } from '@atlaskit/tabs';
const CustomTabPanel = ({ body }: { body: string }) => {
const tabPanelAttributes = useTabPanel();
return (
<div
css={css`
margin: 12px;
`}
{...tabPanelAttributes}
>
{body}
</div>
);
};
The onSelect prop has been renamed to onChange to be consistent with other design system
components. Internal state has now changed to keep track of the selected index. Previously the
object in the tabs prop array of type TabData was passed as well as the index. If you were
using this object you will have to change to use the index.
The type has changed from
(selected: TabData, selectedIndex: number, analyticsEvent: UIAnalyticsEvent) => void; to
(index: number, analyticsEvent: UIAnalyticsEvent) => void;
This also means if you are using the selected prop you will have to ensure you are using the
index of the selected tab instead of the object of type TabData.
Previously you could provide the prop isSelectedTest to Tabs and it would determine what tab
is selected by seeing what tab returns true when isSelectedTest is called. This is a messy API
that effectively means there were two ways of making Tabs controlled. If you are using
isSelectedTest you should swap to using the selected prop to indicate that a tab is selected.
According to the w3 spec each tab should be linked to its corresponding tab panel. We have added
the aria-controls attribute to tabs and the aria-labelledby attribute to tab panels. In order
to do this we needed to generate a unique id for each tab and tab panel. To ensure these id's are
unique if there are multiple Tabs components on the same page there is now a required id prop.
There was previously a prop isContentPersisted which defaults to false. When true it would
render all tab panels. The new default behaviour of Tabs is to leave each tab panel mounted on
the page after it has been selected. This means that tab panels will only mount if selected and
will not unmount and remount when changing tabs. In light of this change, isContentPersisted has
been removed and shouldUnmountTabPanelOnChange has been introduced. It defaults to false and if
it is set to true it will unmount a TabPanel when it is not selected. Effectively
shouldUnmountTabPanelOnChange is the inverse of isContentPersisted.
TabItem and TabContent export.TabItemElementProps, TabItemComponentProvided,
TabContentComponentProvided, TabItemType, TabContentType, SelectedProp,
IsSelectedTestFunction, OnSelectCallback, TabsState, TabsNavigationProps and Mode.4a969d5c40f - Fix a
bug where the active element is blurred instead of the current element when clicked.1adf9a493f5 - Fix
codemod issue79c23df6340 - Use
injected package name and version for analytics instead of version.json.e795d0a849 - The Tabs
component now uses emotion instead of styled-components for it's internal styling.98c957d889 - [ux]
Content of tabs will be preserved on the DOM while switching between tabs5f58283e1f - Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript to
devDependencies to denote version that the package was built with.#3885
6c525a8229 - Upgraded
to TypeScript 3.9.6 and tslib to 2.0.0
Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.
954cc87b62 - The readme
and package information has been updated to point to the new design system website.87f4720f27 - Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/3953454a9514fcf - Build and
supporting files will no longer be published to npm[patch]b41c0887cd:
Change imports to comply with Atlassian conventions- Updated dependencies 3940bd71f1:
Updated dependencies fd41d77c29:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]4a223473c5:
Removes babel/runtime from dependencies. Users should see a smaller bundlesize as a result- Updated dependencies 82747f2922:
Updated dependencies 4a223473c5:
[patch]d222c2b987:
Theme has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided.
** getTokens props changes ** When defining the value function passed into a ThemeProvider, the
getTokens parameter cannot be called without props; if no props are provided an empty object {}
must be passed in:
<CustomTheme.Provider
value={t => ({ ...t(), backgroundColor: '#333'})}
>
becomes:
<CustomTheme.Provider
value={t => ({ ...t({}), backgroundColor: '#333'})}
>
** Color palette changes ** Color palettes have been moved into their own file. Users will need to update imports from this:
import { colors } from '@atlaskit/theme';
colors.colorPalette('8');
to this:
import { colorPalette } from '@atlaskit/theme';
colorPalette.colorPalette('8');
or for multi entry-point users:
import * as colors from '@atlaskit/theme/colors';
colors.colorPalette('8');
to this:
import * as colorPalettes from '@atlaskit/theme/color-palette';
colorPalettes.colorPalette('8');
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[minor]99957d4a20:
Adding an optional prop testId that will set the attribute value data-testid. It will help
products to write better integration and end to end tests.
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[minor]c6efb2f5b6:
Prefix the legacy lifecycle methods with UNSAFE_* to avoid warning in React 16.9+
More information about the deprecation of lifecycles methods can be found here: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]926b43142b:
Analytics-next has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No behavioural changes.
Breaking changes
withAnalyticsForSumTypeProps alias has been removed, please use withAnalyticsEventsAnalyticsContextWrappedComp alias has been removed, please use withAnalyticsContextBreaking changes to TypeScript annotations
withAnalyticsEvents now infers proptypes automatically, consumers no longer need to provide
props as a generic type.withAnalyticsContext now infers proptypes automatically, consumers no longer need to provide
props as a generic type.WithAnalyticsEventProps has been renamed to WithAnalyticsEventsProps to match source
codeCreateUIAnalyticsEventSignature has been renamed to CreateUIAnalyticsEvent to match
source codeUIAnalyticsEventHandlerSignature has been renamed to UIAnalyticsEventHandler to match
source codeAnalyticsEventsPayload has been renamed to AnalyticsEventPayloadObjectType has been removed, please use Record<string, any> or [key: string]: anyUIAnalyticsEventInterface has been removed, please use UIAnalyticsEventAnalyticsEventInterface has been removed, please use AnalyticsEventCreateAndFireEventFunction removed and should now be inferred by TypeScriptAnalyticsEventUpdater removed and should now be inferred by TypeScript[patch]3342f64d5e:
Removed unused dependencies from package.json for tabs: keycode was unused.
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]d0db01b410:
TypeScript users of withAnalyticsEvents and withAnalyticsContext are now required to provide props as a generic type. This is so that TypeScript can correctly calculate the props and defaultProps of the returned component.
Before:
withAnalyticsEvents()(Button) as ComponentClass<Props>;
After:
withAnalyticsEvents<Props>()(Button);
[major]61a919319a:
@atlaskit/tabs has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes. tabIndex now only accepts type number.
[patch]b0ef06c685:
[major]7c17b35107:
[major]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import and export declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.