plotly · valentijnnieman · Jul 26, 2018 · Jun 20, 2018 · Jun 20, 2018 · Jun 20, 2018
@@ -1,3 +1,6 @@
 {
-    "extends": "./node_modules/dash-components-archetype/config/babel/babelrc"
+    "extends": "./node_modules/dash-components-archetype/config/babel/babelrc",
+    "plugins": [
+        "styled-jsx/babel"
+      ]
 }
@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.26.0]
+### Added
+- New Tabs and Tab components! [#213](https://github.com/plotly/dash-core-components/pull/213#pullrequestreview-135893345)
+
 ## [0.25.1]
 ### Fixed
 - `__init__` version formatting for unpkg.

@@ -1 +1 @@
-__version__ = '0.25.1'
+__version__ = '0.26.0'
@@ -1,22 +1,26 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css"/>
-        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/xq-light.min.css"/>
-        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/react-select.css"/>
-        <link rel="stylesheet" href="https://cdn.rawgit.com/chriddyp/abcbc02565dd495b676c3269240e09ca/raw/816de7d5c5d5626e3f3cac8e967070aa15da77e2/rc-slider.css"/>
-    </head>
 
-    <body>
-        <div id="react-demo-entry-point"></div>
-    </body>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css" />
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/xq-light.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/react-select.css" />
+    <link rel="stylesheet" href="https://cdn.rawgit.com/chriddyp/abcbc02565dd495b676c3269240e09ca/raw/816de7d5c5d5626e3f3cac8e967070aa15da77e2/rc-slider.css"
+    />
+</head>
 
-    <footer>
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>
-        <script type="text/javascript" src="https://unpkg.com/react@15/dist/react.js"></script>
-        <script type="text/javascript" src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
-        <script type="text/javascript" src="/lib/bundle.js"></script>
-    </footer>
-</html>
+<body>
+    <div id="react-demo-entry-point"></div>
+</body>
+
+<footer>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.js"></script>
+    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/react@15/dist/react.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
+    <script type="text/javascript" src="/lib/bundle.js"></script>
+</footer>
+
+</html>
@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",
@@ -40,7 +40,8 @@
     "react-select": "^1.0.0-rc.10",
     "react-select-fast-filter-options": "^0.2.2",
     "react-syntax-highlighter": "^5.0.0",
-    "react-virtualized-select": "^3.1.0"
+    "react-virtualized-select": "^3.1.0",
+    "styled-jsx": "^2.2.6"
   },
   "devDependencies": {
     "component-playground": "^2.0.0",

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Tab = ({ children }) => <div>{children}</div>;
+
+/**
+ * Part of dcc.Tabs - this is the child Tab component used to render a tabbed page.
+ * Its children will be set as the content of that tab, which if clicked will become visible.
+ */
+Tab.propTypes = {
+  /**
+   * The ID of this component, used to identify dash components
+   * in callbacks. The ID needs to be unique across all of the
+   * components in an app.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The tab's label
+   */
+  label: PropTypes.children,
+
+  /**
+   * The content of the tab - will only be displayed if this tab is selected
+   */
+  children: PropTypes.node,
+
+  /**
+   * Value for determining which Tab is currently selected
+   */
+  value: PropTypes.string,
+
+  /**
+   * Determines if tab is disabled or not - defaults to false
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Overrides the default (inline) styles when disabled 
+   */
+  disabled_style: PropTypes.object,
+
+  /**
+   * Appends a class to the Tab component when it is disabled.
+   */
+  disabled_className: PropTypes.string,
+
+  /**
+   * Appends a class to the Tab component.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Appends a class to the Tab component when it is selected.
+   */
+  selected_className: PropTypes.string,
+
+  /**
+   * Overrides the default (inline) styles for the Tab component.
+   */
+  style: PropTypes.object,
+
+  /**
+   * Overrides the default (inline) styles for the Tab component when it is selected.
+   */
+  selected_style: PropTypes.object
+};
+
+Tab.defaultProps = {
+  disabled: false,
+  disabled_style: {
+    color: '#d6d6d6'
+  }
+}
+
+export default Tab;