Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Tabs] Add icon and text #3042

Merged
merged 1 commit into from
Jan 27, 2016
Merged

[Tabs] Add icon and text #3042

merged 1 commit into from
Jan 27, 2016

Conversation

pradel
Copy link
Contributor

@pradel pradel commented Jan 25, 2016

  • Added tab with icon
  • Added tab with icon and text
  • Added one example for each

Support FontIconand SvgIcon.

capture d ecran 2016-01-25 a 13 28 03

import FontIcon from 'material-ui/lib/font-icon';
import ActionFlightTakeoff from 'material-ui/lib/svg-icons/action/flight-takeoff';

const styles = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To remove

@oliviertassinari
Copy link
Member

Shouldn't we put the icon above the label?
capture d ecran 2016-01-25 a 13 39 37
(https://www.google.com/design/spec/components/tabs.html#tabs-usage)

@pradel
Copy link
Contributor Author

pradel commented Jan 25, 2016

Wow how can I miss that ? Fixed ;)

import FontIcon from 'material-ui/lib/font-icon';
import ActionFlightTakeoff from 'material-ui/lib/svg-icons/action/flight-takeoff';

const TabsExampleSimple = () => (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TabsExampleIcon?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

@mbrookes mbrookes changed the title Tabs: add icon and text [Tabs] Add icon and text Jan 26, 2016
@@ -19,13 +23,15 @@ const descriptions = {
swipeable: 'This example integrates the [react-swipeable-views]' +
'(https://github.com/oliviertassinari/react-swipeable-views) component with Tabs, animating the Tab transition, ' +
'and allowing tabs to be swiped on touch devices.',
icon: 'An example of tabs with icon',
iconText: 'An example of tabs with icon and text',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you put a full-stop at the end of each sentence?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@oliviertassinari
Copy link
Member

@pradel That looks good 👍. Do you want to try a squash down of the commits 😁? Thanks.

@pradel
Copy link
Contributor Author

pradel commented Jan 26, 2016

Okay squashed this time working :)

@oliviertassinari
Copy link
Member

@pradel Awesome. It's almost good. Can you add a bit of spacing between the label and the icon to follow more closely the specification? Like 2 or 4 pixels.

@pradel
Copy link
Contributor Author

pradel commented Jan 26, 2016

@oliviertassinari like that is better ?

@oliviertassinari
Copy link
Member

@pradel That's much better 👍! Thanks. Can you squash down again the commits 😬?

- Added tab with icon
- Added tab with icon and text
- Added one example for each

Support `FontIcon`and `SvgIcon`.

remove unused styles for eslint

inverse label and icon position

changed let to const

Fix const name example

Put Example to lowercase

Selected color to const

Add react.isValidElement check

Add full-stop

Added 4px between icon and text
@pradel
Copy link
Contributor Author

pradel commented Jan 26, 2016

Squashed :)

oliviertassinari added a commit that referenced this pull request Jan 27, 2016
@oliviertassinari oliviertassinari merged commit e70a3a1 into mui:master Jan 27, 2016
@oliviertassinari
Copy link
Member

@pradel Thanks!

@pradel pradel deleted the icon-tabs branch February 22, 2016 10:52
@zannager zannager added the component: tabs This is the name of the generic UI component, not the React module! label Mar 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tabs This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants