react-tabs
Advanced tools
Comparing version 1.0.0-alpha.2 to 1.0.0
# Changelog | ||
### Next Major | ||
### 1.0.0 (May 10, 2017) | ||
#### Breaking Changes | ||
- `activeTabClassName` was renamed to `selectedTabClassName` | ||
- `selectedTabClassName` and `disabledTabClassName` moved from `<TabList />` to `<Tabs />` | ||
- Peer dependency for react requires now `^0.14.9` or `^15.3.0` | ||
- `activeTabClassName` moved from `<TabList />` to `<Tabs />` and renamed to `selectedTabClassName` | ||
- `disabledTabClassName` moved from `<TabList />` to `<Tabs />` | ||
- `className` property on all components now overwrites the default classes instead of adding a second class name | ||
@@ -21,26 +22,91 @@ | ||
// Same effect in 1.0 | ||
<Tabs className={['tabs', 'ReactTabs']}> | ||
<TabList className={['list', 'ReactTabs__TabList']}> | ||
<Tab className={['tab', 'ReactTabs__Tab']} /> | ||
<Tabs className={['tabs', 'react-tabs']}> | ||
<TabList className={['list', 'react-tabs__tab-list']}> | ||
<Tab className={['tab', 'react-tabs__tab']} /> | ||
</TabList> | ||
<TabPanel className={['panel', 'ReactTabs__TabPanel']} /> | ||
<TabPanel className={['panel', 'react-tabs__tab-panel']} /> | ||
</Tabs> | ||
``` | ||
- `selectedIndex` now enables controlled mode, which disables internal management of the active tab. If you were using `selectedIndex` to set the initial displayed tab use `defaultIndex` | ||
- No styles do get added by default anymore. If you want to use the default styles you need to add them yourself. See README. | ||
- `selectedIndex` now enables controlled mode, which disables internal management of the active tab. If you were using `selectedIndex` before to set the initial displayed tab use `defaultIndex` now. | ||
- Support for bower package manager was removed. | ||
- Removed deprecated default export of tabs: | ||
```js | ||
// 0.8 | ||
import ReactTabs from 'react-tabs'; | ||
<ReactTabs.Tabs></ReactTabs.Tabs> | ||
// in 1.0 | ||
import { Tabs } from 'react-tabs'; | ||
<Tabs></Tabs> | ||
``` | ||
- Removed jsstylesheet dependency and removed default style from javascript. If you want to use the default styles you can use one of the supported methods (see [README.md](https://github.com/reactjs/react-tabs#styling)) | ||
- The default class names were all lowercased and separated by hyphen, but still follow BEM methodology. E.g. `ReactTabs` -> `react-tabs`, `ReactTabs__TabPanel--selected` -> `react-tabs__tab-panel--selected` | ||
- `<TabPanel />` components do not set the inline style `display: none` anymore. Hidding and showing a tab panel is now completely done via css and classnames. If you have your own style for the tabs make sure to add the following rules: | ||
```css | ||
.react-tabs__tab-panel { | ||
display: none; | ||
} | ||
.react-tabs__tab-panel--selected { | ||
display: block; | ||
} | ||
/* If you use custom class names obviously use the class names you set for the tab panels and selected tab panels */ | ||
``` | ||
#### New Features | ||
- `selectedTabPanelClassName` was added to add `<Tabs />` to change the class name of the current selected TabPanel | ||
- `defaultIndex` was added to set the initial displayed tab | ||
- New static method to reset the id counter for isomorphic apps. Call this before rendering your application on the server. (#129) (Neehar Venugopal) | ||
#### Bug Fixes | ||
```js | ||
import { resetIdCounter } from 'react-tabs'; | ||
- | ||
resetIdCounter(); | ||
``` | ||
- Allows arbitrary components anywhere inside `<TabList>` (#139) (Alexander Wallin) | ||
- Allow random order of `<TabList />`, `<TabPanel />` and other arbitrary components. The `<TabPanel />` components are matched to the `<Tab />` components in order from top to bottom. | ||
```js | ||
<Tabs> | ||
<TabPanel /> | ||
<div /> | ||
<TabList> | ||
<Tab /> | ||
<Tab /> | ||
</TabList> | ||
<span /> | ||
<TabPanel /> | ||
</Tabs> | ||
``` | ||
- Introduce controlled and uncontrolled mode. This two modes allow either to control the tabs from your component from the outside or leave the control to the tabs within react-tabs components. (see [README.md](https://github.com/reactjs/react-tabs#controlled-vs-uncontrolled-mode) for more information) | ||
- New prop `selectedTabPanelClassName` on `<Tabs />` to change the class name of the current selected tab panel. | ||
- New prop `defaultIndex` on `<Tabs />` to allow setting the initial displayed tab. | ||
- New prop `forceRender` on `<TabPanel />` to allow force rendering of individual tab panels. | ||
- New prop `selectedClassName` on `<TabPanel />` to allow changing selected class name of individual tab panels. | ||
- New prop `selectedClassName` on `<Tab />` to allow changing selected class name of individual tabs. | ||
- New prop `disabledClassName` on `<Tab />` to allow changing disabled class name of individual tabs. | ||
- Property `className` on all components can now officially take an array as argument. | ||
- PropTypes are now wrapped in `if(process.env.NODE_ENV === 'production') Component.propTypes = { ... }` in order to allow removing of proptypes in production builds. | ||
#### Documentation | ||
- Rewrite README.md | ||
- Change ReactDOM.render to render (#163) (Gerard Banasig) | ||
- Add NPM package badge (#164) (Hum4n01d) | ||
#### Internal | ||
- Refactor components to use native classes | ||
- Refactor to not use react-dom | ||
- Refactor components to use native classes (#134) (LeoAJ) | ||
- Refactor to not use react-dom and remove dependency on it | ||
- Update dependencies | ||
- Rename main.js to index.js | ||
- Update travis versions | ||
- Use prettier (#169) | ||
@@ -47,0 +113,0 @@ ### 0.8.3 (Apr 19, 2017) |
{ | ||
"name": "react-tabs", | ||
"version": "1.0.0-alpha.2", | ||
"version": "1.0.0", | ||
"description": "React tabs component", | ||
@@ -16,3 +16,3 @@ "main": "lib/index.js", | ||
"precommit": "lint-staged", | ||
"preversion": "npm run lint && npm test && npm run build && npm run bundle && git add dist/ && git commit -m 'publish: Distribution'", | ||
"preversion": "npm run lint && npm test && npm run build && npm run bundle && git add dist/ && git diff --quiet --exit-code --cached || git commit -n -m 'publish: Distribution'", | ||
"prepublish": "npm run build", | ||
@@ -44,3 +44,3 @@ "test": "jest", | ||
"peerDependencies": { | ||
"react": "^0.14.0 || ^15.0.0" | ||
"react": "^0.14.9 || ^15.3.0" | ||
}, | ||
@@ -47,0 +47,0 @@ "devDependencies": { |
@@ -67,3 +67,3 @@ # react-tabs [![Build Status](https://travis-ci.org/reactjs/react-tabs.svg?branch=master)](https://travis-ci.org/reactjs/react-tabs) [![npm version](https://img.shields.io/npm/v/react-tabs.svg)](https://www.npmjs.com/package/react-tabs) | ||
> default: `"PropTypes"` | ||
> default: `"react-tabs"` | ||
@@ -90,3 +90,3 @@ Provide a custom class name for the outer `<div />` of the tabs. | ||
> default: `"ReactTabs__Tab--disabled"` | ||
> default: `"react-tabs__tab--disabled"` | ||
@@ -127,3 +127,3 @@ Provide a custom class name for disabled tabs. | ||
> default: `"ReactTabs__Tab--selected"` | ||
> default: `"react-tabs__tab--selected"` | ||
@@ -136,3 +136,3 @@ Provide a custom class name for the active tab. | ||
> default: `"ReactTabs__TabPanel--selected"` | ||
> default: `"react-tabs__tab-panel--selected"` | ||
@@ -149,3 +149,3 @@ Provide a custom class name for the active tab panel. | ||
> default: `"PropTypes__TabList"` | ||
> default: `"react-tabs__tab-list"` | ||
@@ -162,3 +162,3 @@ Provide a custom class name for the `<ul />`. | ||
> default: `"ReactTabs__Tab--disabled"` | ||
> default: `"react-tabs__tab--disabled"` | ||
@@ -169,3 +169,3 @@ Provide a custom class name for disabled tabs. | ||
> default: `"PropTypes__Tab"` | ||
> default: `"react-tabs__tab"` | ||
@@ -178,3 +178,3 @@ Provide a custom class name for the `<li />`. | ||
> default: `"ReactTabs__Tab--selected"` | ||
> default: `"react-tabs__tab--selected"` | ||
@@ -189,3 +189,3 @@ Provide a custom class name for the active tab. | ||
> default: `"PropTypes__TabPanel"` | ||
> default: `"react-tabs__tab-panel"` | ||
@@ -206,3 +206,3 @@ Provide a custom class name for the `<div />` containing the tab content. | ||
> default: `"ReactTabs__TabPanel--selected"` | ||
> default: `"react-tabs__tab-panel--selected"` | ||
@@ -209,0 +209,0 @@ Provide a custom class name for the active tab panel. |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
227917
1