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

docs(button): expose tertiary button and restrict icon button variants #5201

Merged
merged 10 commits into from
Feb 1, 2020

Conversation

emyarod
Copy link
Member

@emyarod emyarod commented Jan 28, 2020

Closes #5199

This PR exposes the tertiary buttons in the React storybook and removes incorrect icon button variants from the React and vanilla docs

Testing / Reviewing

Ensure that only the correct button knobs and variants are exposed in the docs

@netlify
Copy link

netlify bot commented Jan 28, 2020

Deploy preview for the-carbon-components ready!

Built with commit 95f7ba3

https://deploy-preview-5201--the-carbon-components.netlify.com

@netlify
Copy link

netlify bot commented Jan 28, 2020

Deploy preview for carbon-elements ready!

Built with commit 95f7ba3

https://deploy-preview-5201--carbon-elements.netlify.com

@netlify
Copy link

netlify bot commented Jan 28, 2020

Deploy preview for carbon-components-react failed.

Built with commit 95f7ba3

https://app.netlify.com/sites/carbon-components-react/deploys/5e34c596995e7600070a0072

Copy link
Collaborator

@tw15egan tw15egan left a comment

Choose a reason for hiding this comment

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

👍 ✅

Copy link
Member

@laurenmrice laurenmrice left a comment

Choose a reason for hiding this comment

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

React
For Default tertiary buttons:
-The active state color should be active-tertiary color token

@emyarod emyarod requested a review from laurenmrice January 29, 2020 16:40
Copy link
Member

@laurenmrice laurenmrice left a comment

Choose a reason for hiding this comment

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

Vanilla:

  • The active state is blocking out the text in the button. the icon only button is correct though.
    Jan-29-2020 11-47-48

React:

  • The active state does not change the background of the container and it is making the text turn black. It should only be changing the background color to the active-tertiary color token. The icon only button is correct though.
    Jan-29-2020 11-46-16

  • Also I noticed when switching the default buttons from primary to secondary to tertiary, the tertiary buttons jump a bit in size horizontally. the tertiary buttons should remain the same size as they are in primary and secondary.

@emyarod emyarod force-pushed the 5199-tertiary-button-docs branch from 6051304 to 160d79b Compare January 30, 2020 15:32
@emyarod
Copy link
Member Author

emyarod commented Jan 30, 2020

vanilla should be correct now

the react issues are mainly because the base elements of the examples you tested are not actually buttons (we're showing some examples of other elements being styled like buttons). mainly we want to check if the element labeled "Button" is correct, since using a different base element can change how active and focus states are applied

the change in width is due to the border width changing from 3px in the other variants to 1px in the tertiary and ghost variants. does that mean the padding needs to change for the 1px border button variants?

@emyarod emyarod requested a review from laurenmrice January 30, 2020 15:59
Copy link
Member

@laurenmrice laurenmrice left a comment

Choose a reason for hiding this comment

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

Okay thanks @emyarod that makes sense ! All of the changes you made look good.

  • The tertiary icon button is getting a weird double focus outline in react and vanilla.
    Screen Shot 2020-01-30 at 10 36 17 AM

  • In dark themes, the active state is getting a white border around the active background color, there shouldn't be a visible border.
    Jan-30-2020 10-50-50

@emyarod
Copy link
Member Author

emyarod commented Jan 30, 2020

tertiary button width should be the same as the other button variants now

fixed the double focus outline ref #4867

for the dark theme active state border, what should the token be there? it looks like it's just inheriting $interactive-03. also it's worth noting that this behavior differs based on browser

@emyarod emyarod requested a review from laurenmrice January 30, 2020 20:12
@laurenmrice
Copy link
Member

the token is right for the border, its just that that border should not be showing up on active state, it should be a solid background. Could the active background overlap that border somehow? Its not happening in the light themes.

@asudoh
Copy link
Contributor

asudoh commented Jan 30, 2020

@emyarod Is this PR ready for re-review? Thanks!

@emyarod
Copy link
Member Author

emyarod commented Jan 30, 2020

@asudoh yes it is ready for review

Copy link
Member

@laurenmrice laurenmrice left a comment

Choose a reason for hiding this comment

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

looks great, thank you !👍🏻

@asudoh
Copy link
Contributor

asudoh commented Jan 31, 2020

Got a green light from @emyarod to move this to "ready to merge" state.

@asudoh asudoh merged commit c1c1cfd into carbon-design-system:master Feb 1, 2020
@emyarod emyarod deleted the 5199-tertiary-button-docs branch February 4, 2020 17:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Documentation is missing tertiary button examples
5 participants