This repository was archived by the owner on Aug 29, 2025. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 143
Improved Tabs component #213
Merged
Merged
Changes from all commits
Commits
Show all changes
55 commits
Select commit
Hold shift + click to select a range
0b099e2
Setup new Tabs component
valentijnnieman b4a6588
Define Tabs component API for Dash
valentijnnieman b4362f3
Added styled-jsx to package
valentijnnieman 15aa4d8
Added selection logic with EnhancedTab 's
valentijnnieman d03411d
Better selection logic & style set-up
valentijnnieman 13be608
Added meta tag in Demo/index for mobile viewers
valentijnnieman ea684ec
Pass class and style props to component
valentijnnieman b8a8a20
Added usage.py for now, which describes how to use Tabs
valentijnnieman e3fdb79
Better styling and className passing
valentijnnieman ab8d0ce
Better vertical support and responsiveness
valentijnnieman 3644be6
Remove usage.py again
valentijnnieman 531efd9
Cleanup and better interface descriptions
valentijnnieman abbaa43
Added Tabs component to test_gallery integration test
valentijnnieman b4825e1
Added build and changed version to 0.24.0
valentijnnieman 5ca1fb4
Merge branch 'master' into improved_tabs
valentijnnieman f31aa82
Changed version to 0.24.0
valentijnnieman c2779ef
Merged with origin
valentijnnieman 7de3794
Support for value props
valentijnnieman e2b4f3d
Remove console.logs
valentijnnieman b7c77e4
Handle props for Dash and Demo.react.js
valentijnnieman 9fc48cb
Integration test for Tabs without children
valentijnnieman 69e0eef
Better styling for Tab components
valentijnnieman 3354f65
mobile_breakpoint prop
valentijnnieman 94f7ffa
Better mobile styles, mobile_breakpoint fix
valentijnnieman 22a6ff5
Styling fixes
valentijnnieman 1b03748
Fixed bug that occus when there's only one Tab
valentijnnieman d95af71
Favor snake_case prop names over camelCase
valentijnnieman 091f264
Added id prop to Tab component
valentijnnieman 7c6eb3f
Fixed failing test
valentijnnieman fdda9bc
Added comment/annotation to Tab components
valentijnnieman 0b0311a
Update for prerelease version
valentijnnieman ead8139
Updated package.json for prerelease
valentijnnieman c97a380
Changed version to npm version
valentijnnieman 0d55b21
Update to prerelease rc2
valentijnnieman bd2b142
Better default styles
valentijnnieman a07d99b
Changed defaultProps and fixed typo
valentijnnieman 8743130
Props for settings colors used
valentijnnieman d132ce2
Updated test with snapshot
valentijnnieman 9507f9f
'disabled' prop on Tab component, with styles and className support
valentijnnieman cda07d6
Add snapshot to tabs_without_children test loop
valentijnnieman 3893b5b
Fixed bug where Tab classes weren't overwriting
valentijnnieman 957cd87
Changed version to prerelease 0.24.0rc4
valentijnnieman 85d38e4
Fixed small className error
valentijnnieman 392336e
Fixed small selected_className bug
valentijnnieman 2aa8ba5
Refactored Tabs selection logic
valentijnnieman a0676cc
Updated integration tests for Tabs
valentijnnieman 6200d49
Updated CSS for seleced Tabs
valentijnnieman 8583ec6
Changed label propType from string to children
valentijnnieman 85d88bd
Render label correctly if it has children
valentijnnieman 61003ee
Fix selection when not specifying value
valentijnnieman 919da14
Fixed broken Tabs test
valentijnnieman 9f39caa
Fixed styles copying over
valentijnnieman 3645254
Added flexbox to default container style
valentijnnieman b71875b
Update prerelease versioning
valentijnnieman a50ba4d
Fixed merge conflicts & updated version
valentijnnieman File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| ] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| __version__ = '0.25.1' | ||
| __version__ = '0.26.0' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/react-select@1.0.0-rc.3/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/react-select@1.0.0-rc.3/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> |
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.