Skip to content

feat: Add button types #1540

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

Merged
merged 5 commits into from
Nov 1, 2018
Merged

feat: Add button types #1540

merged 5 commits into from
Nov 1, 2018

Conversation

iRoachie
Copy link
Collaborator

Implements #1525

Adds three button types to the Button component:

  • solid
  • clear
  • outline

Changes

  • Deprecates clear prop.
  • Adds new disabled color to colors

Examples

Normal state

normal

Raised state

raised

Disabled state

disabled

@iRoachie
Copy link
Collaborator Author

Still to add tests, and screen shots to docs.

@Monte9
Copy link
Collaborator

Monte9 commented Oct 31, 2018

Looks good. And I assume raised is a boolean prop.

Can you also share code snippets for those screenshots? would help to see what props you are using to achieve that.

@@ -32,6 +32,7 @@
"logo": "https://opencollective.com/react-native-elements/logo.txt"
},
"dependencies": {
"color": "^3.1.0",
Copy link
Collaborator

Choose a reason for hiding this comment

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

what does this packages provide us?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's a module to work with colors as strings and perform operations like lighten, darken that you'd normally have with sass etc.

Used it here https://github.com/react-native-training/react-native-elements/pull/1540/files#diff-a0a6368880417eca5ad26c484e9ded7aR215

Copy link
Collaborator

@Monte9 Monte9 left a comment

Choose a reason for hiding this comment

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

lgtm

@iRoachie
Copy link
Collaborator Author

Snippets are super simple. Used the theme provider.

const theme = {
  Button: {
    // disabled: true,
    // raised: true,
    buttonStyle: {
      width: 150,
    },
    containerStyle: {
      margin: 16,
    },
  },
};
<ThemeProvider theme={theme}>
  <Button title="Solid" />
  <Button type="clear" title="Clear" />
  <Button type="outline" title="Outline" />
</ThemeProvider>

@codecov
Copy link

codecov bot commented Nov 1, 2018

Codecov Report

Merging #1540 into next will increase coverage by 0.23%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##             next    #1540      +/-   ##
==========================================
+ Coverage   75.49%   75.72%   +0.23%     
==========================================
  Files          33       33              
  Lines         612      618       +6     
  Branches       85       86       +1     
==========================================
+ Hits          462      468       +6     
  Misses        129      129              
  Partials       21       21
Impacted Files Coverage Δ
src/buttons/Button.js 100% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5673323...0e70f3c. Read the comment docs.

Raised clear button looks the same as solid button
Add images show button type and states. Also cleanup prop descriptions
@iRoachie iRoachie merged commit 773131e into next Nov 1, 2018
@iRoachie iRoachie deleted the button-types branch November 1, 2018 04:13
nurdiansyah added a commit to deboxlibrary/react-native-elements that referenced this pull request Nov 6, 2018
* commit '0126436f5f0f37e0340b0c1da32bdea5605cb6df': (43 commits)
  feat(Card): Remove flexDirection prop
  feat(Card): Remove fontFamily prop
  test: Add tests for withTheme
  test: Fix searcbar error being logged to console
  fix: Hoist statics for withTheme hoc (react-native-elements#1554)
  fix: Use library for calculating statusBar height (react-native-elements#1553)
  ref: Badge component (react-native-elements#1545)
  Set default prop for type (react-native-elements#1546)
  docs: Fix paragraphs links in docs (react-native-elements#1536)
  docs(website): Make image preview section reusable
  feat: Add button types (react-native-elements#1540)
  fix: Rounded buttons on android now work correctly (react-native-elements#1538)
  ci: Run travis against node stable
  fix: Make button height consistent when using loading
  ci: Update husky and lint-staged
  feat: Add AntDesign to list of available icon sets (react-native-elements#1529)
  docs(website): Add central place to show supported icon sets (react-native-elements#1532)
  feat(Input): Allow label to be a React element (react-native-elements#1531)
  ci: Remove expo ci from PRs (react-native-elements#1528)
  fix(Button): Make the padding consistent (react-native-elements#1505)
  ...
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.

2 participants