Create common Button component #712

New issue

Closed

opened 2017-11-03 07:19:22 +01:00 by neb-b · 6 comments

neb-b commented

2017-11-03 07:19:22 +01:00

(Migrated from github.com)

Create common React components for basic ui elements (input, button)

There should be a common ui component library for basic components. This will make future dev easier if we choose to change common styling. Currently, we are just using classes which is okay for simple components but can become over-complicated if you want anything slightly different from what is already in the css files.

## Create common React components for basic ui elements (input, button) There should be a common ui component library for basic components. This will make future dev easier if we choose to change common styling. Currently, we are just using classes which is okay for simple components but can become over-complicated if you want anything slightly different from what is already in the css files.

👍 1

neb-b commented

2017-11-03 07:23:28 +01:00

(Migrated from github.com)

I'll start on this with the shapeshift component after I finish up on the PR https://github.com/lbryio/lbry-app/pull/652

That should be a pretty easy update, and I can setup the file structure. Then we can make another PR moving other common ui elements to these shared components.

I'll start on this with the shapeshift component after I finish up on the PR https://github.com/lbryio/lbry-app/pull/652 That should be a pretty easy update, and I can setup the file structure. Then we can make another PR moving other common ui elements to these shared components.

kauffj commented

2017-11-07 15:23:57 +01:00

(Migrated from github.com)

@seanyesmunt would you propose the standard that if you're using a class name, it should probably (always?) be a component?

neb-b commented

2017-11-07 20:04:18 +01:00

(Migrated from github.com)

Not always. For attributes that are used across components I think I makes sense to use classes (ex. font-weight), but yes for classes specific to a component (ex. Button background color).

I’ll try and get some sort of rough draft for a proposal tonight.

Not always. For attributes that are used across components I think I makes sense to use classes (ex. font-weight), but yes for classes specific to a component (ex. Button background color). I’ll try and get some sort of rough draft for a proposal tonight.

neb-b commented

2017-11-08 06:37:53 +01:00

(Migrated from github.com)

My idea for a `Button` component (I know class names/colors are not accurate)

<Button primary>Button text</Button>
applies .btn .btn-primary
default to this, main button

<Button secondary>...</Button>
applies .btn .btn-secondary, grey button

<Button fakelink>...</Button>
applies .btn-link
this looks like a link, but handles clicks like a button

Shared components should always take a className prop which will be the last class added so consumers of the button can override any styles we add

<Button primary className="font-semibold">Hello</Button>

Or they could just style the inside text

<Button><span className="font-bold">Bold</span><Icon /></Button>

Shared components should be unopinionated and customizable as much as anyone wants. Always allow consumers to override any style (although if it is a change that will be used in more than 1 place it should just be added to the component based on a prop)

I think a Button component would be a good place to start, move all button uses to this shared component and determine what works for us and what doesn't. Then make those changes and use the same pattern with future shared components. (input would probably be a good second one to move)

#### My idea for a `Button` component (I know class names/colors are not accurate) `<Button primary>Button text</Button>` applies `.btn .btn-primary` default to this, main button `<Button secondary>...</Button>` applies `.btn .btn-secondary`, grey button `<Button fakelink>...</Button>` applies `.btn-link` this looks like a link, but handles clicks like a button Shared components should always take a `className` prop which will be the last class added so consumers of the button can override any styles we add `<Button primary className="font-semibold">Hello</Button>` Or they could just style the inside text `<Button><span className="font-bold">Bold</span><Icon /></Button>` Shared components should be unopinionated and customizable as much as anyone wants. Always allow consumers to override any style (although if it is a change that will be used in more than 1 place it should just be added to the component based on a prop) I think a `Button` component would be a good place to start, move all button uses to this shared component and determine what works for us and what doesn't. Then make those changes and use the same pattern with future shared components. (input would probably be a good second one to move)

neb-b commented

2017-11-08 06:40:29 +01:00

(Migrated from github.com)

https://www.npmjs.com/package/classnames is a great package that makes adding classes based on logic easy