As a user, I want the vars & props for the Button component documented on the site

[blazebarsamian]

Scenario: Vars Table

• Create a new folder in /docs-src/src/pages/components called ButtonTables
• Create a new file in that folder called ButtonVars.js
• Table details:
  • Table Headers: Variable Name, Default Value, Description
  • On small screens, there should be a Table.HeadStacked that says Button Vars
  • The Table Data should include <Table.HeaderInline>[Column Header]</Table.HeaderInline> before the table data so that the headers shows on small screens when the table stacks.
  • Make sure to check the settings file for any vars that were not listed at the top of the components stylesheet.
• Import the ButtonVars file into the main example page: /docs-src/src/pages/components/Button.js
• After the ExampleSection include <h3>Variables:</h3>
• Then call in the table: <ButtonVars />

Scenario: Props Table

• Create a new file in the ButtonTables folder called ButtonProps.js
• Table details:
  • Table Headers: Name, Type, Default, Description
  • On small screens, there should be a Table.HeadStacked that says Button Props
  • The Table Data should include <Table.HeaderInline>[Column Header]</Table.HeaderInline> before the table data so that the header shows on small screens when the table stacks. Example:

  •  <Table.Data>
        <Table.HeaderInline>Name:</Table.HeaderInline> <code>shrink</code>
     </Table.Data>
    

  • Include all possible props (make sure to also check the components file to make sure you didnt miss any props that were not listed on the site.
• Import the ButtonProps file into the main example page: /docs-src/src/pages/components/Button.js
• After the Variables section include <h3>Properties:</h3>
• Then call in the table: <ButtonProps />

[blazebarsamian]

I've pushed up what I have for this ticket to my branch 264-button-tables.

Props Table:
Ready for someone to take over:

• Need to double check that I have included all the possible props.
• Need to double check that the type column has the correct types for each prop.
• Check that descriptions are accurate + finish filling in the ones that are incomplete

[revelry-stalebot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[revelry-stalebot]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[blazebarsamian]

Props:

• looks like theres something for button icons (rev-Button-icon) but not entirely sure how to make this work. Might just be because we dont have Icons that work in Harmonium?
• ButtonGroup has props that add classes but no styles for those classes. I started fixes this but not going to commit those changes on this PR. I created a new ticket Add other ButtonGroup examples + add styles for different ButtonGroup variations #392 to handle ButtonGroup styles.
• ButtonGroup has a stackedForSmall prop but theres no styles for that anywhere

Research:

Is it better to have the code rendered out like this:

rev-Button.rev-Button--success, .rev-ButtonGroup--success .rev-Button {
    background: #00A67F;
}

or should I create mixins and include them in 2 different spots so that the code renders out like:

rev-Button.rev-Button--success {
    background: #00A67F;
}

or

.rev-ButtonGroup--success .rev-Button {
    background: #00A67F;
}

[blazebarsamian]

Update:

Today I got all of the props in for both buttons and ButtonGroups. I need to probably double check everything next week before I push up and create a PR.

• I need to also look into rev-Button-icon because that seems like something that should be added to the example page as well as in the props table.

[blazebarsamian]

Button icons will be handled in #391