diff --git a/components/font_icon/FontIcon.js b/components/font_icon/FontIcon.js index 29fa06f2..08183ea8 100644 --- a/components/font_icon/FontIcon.js +++ b/components/font_icon/FontIcon.js @@ -1,18 +1,19 @@ import React, { PropTypes } from 'react'; import classnames from 'classnames'; -const FontIcon = ({ children, className, value, ...other}) => ( +const FontIcon = ({ alt, children, className, value, ...other}) => ( - {value} - {children} + ); FontIcon.propTypes = { + alt: PropTypes.string, children: PropTypes.any, className: PropTypes.string, value: PropTypes.oneOfType([ @@ -22,6 +23,7 @@ FontIcon.propTypes = { }; FontIcon.defaultProps = { + alt: '', className: '' }; diff --git a/components/font_icon/readme.md b/components/font_icon/readme.md index 3ceb3ea1..4b0fee55 100644 --- a/components/font_icon/readme.md +++ b/components/font_icon/readme.md @@ -20,6 +20,6 @@ const FontIcons = () => ( | Name | Type | Default | Description| |:-----|:-----|:-----|:-----| -| `children` | `String` | | The key string for the icon you want to be displayed.| +| `alt` | `String` | `''` | The text used to set the `aria-label` attribute. | `className` | `String` | `''` | The class name to give custom styles such as sizing.| | `value` | `String` or `Element` | | The key string for the icon you want be displayed.| diff --git a/components/list/List.js b/components/list/List.js index f7b46517..9067d0c2 100644 --- a/components/list/List.js +++ b/components/list/List.js @@ -30,7 +30,9 @@ const factory = (ListItem) => { renderItems () { return React.Children.map(this.props.children, (item) => { - if (item.type === ListItem) { + if (item === null || item === undefined) { + return item; + } else if (item.type === ListItem) { const selectable = mergeProp('selectable', item.props, this.props); const ripple = mergeProp('ripple', item.props, this.props); return React.cloneElement(item, { selectable, ripple }); diff --git a/components/tabs/Tabs.js b/components/tabs/Tabs.js index 0172b2da..1653aa16 100644 --- a/components/tabs/Tabs.js +++ b/components/tabs/Tabs.js @@ -86,14 +86,20 @@ const factory = (Tab, TabContent, FontIcon) => { } updateArrows = () => { - const nav = this.navigationNode; - this.setState({ - arrows: { - left: nav.scrollLeft > 0, - right: nav.scrollWidth > nav.clientWidth - && (nav.scrollLeft + nav.clientWidth) < nav.scrollWidth - } - }); + const idx = this.navigationNode.children.length - 2; + + if (idx >= 0) { + const scrollLeft = this.navigationNode.scrollLeft; + const nav = this.navigationNode.getBoundingClientRect(); + const lastLabel = this.navigationNode.children[idx].getBoundingClientRect(); + + this.setState({ + arrows: { + left: scrollLeft > 0, + right: nav.right < (lastLabel.right - 5) + } + }); + } } scrollNavigation = (factor) => { diff --git a/spec/components/font_icon.js b/spec/components/font_icon.js index 49dc010e..1226e4d8 100644 --- a/spec/components/font_icon.js +++ b/spec/components/font_icon.js @@ -6,11 +6,11 @@ const FontIconTest = () => (
Font Icons

lorem ipsum...

- - - - - input + + + + + input ); diff --git a/spec/components/github_icon.js b/spec/components/github_icon.js index 1dfd508e..30daf8df 100644 --- a/spec/components/github_icon.js +++ b/spec/components/github_icon.js @@ -1,7 +1,8 @@ import React from 'react'; const GithubIcon = () => ( - + + GitHub Icon );