react-tabs - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0

CHANGELOG.md

 # 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)

package.json

 {
   "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": {

README.md

@@ -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.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

227917

increased by1.36%

Number of low quality alerts

1

decreased by-50%

No dependency changes