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

Support height, width, padding, margin and borderStyle on Text #35

Closed
satya164 opened this issue Nov 2, 2017 · 0 comments
Closed

Support height, width, padding, margin and borderStyle on Text #35

satya164 opened this issue Nov 2, 2017 · 0 comments

Comments

@satya164
Copy link
Contributor

satya164 commented Nov 2, 2017

If width and/or height are specified, the lines are normalized by appending empty spaces and newlines respectively/removing characters to fit the dimensions.

If padding is specified, empty spaces and new lines are added on sides. padding is applied before applying height and width. padding can contain shorthand values or paddingLeft, paddingTop, paddingBottom and paddingRight can be specified to customize the padding on the sides.

If backgroundColor is specified it's applied before margin, but after height, width, padding and border.

If margin is specified, it acts similarly to padding, but is applied after applying height, width, padding and borderStyle.

If borderStyle is specified, text is added on all sides after normalizing the lines by appending empty spaces. The value of the borderStyle property could be a string (e.g. solid, double) or take a custom preset object for applying the borders. For example, a preset object might look like following:

const solid = {
  top: '─',
  bottom: '─',
  left: '│',
  right: '│',
  topLeft: '┌',
  topRight: '┐',
  bottomLeft: '└',
  bottomRight: '┘',
};

const  double = {
  top: '═',
  bottom: '═',
  left: '║',
  right: '║',
  topLeft: '╔',
  topRight: '╗',
  bottomLeft: '╚',
  bottomRight: '╝',
};

We probably also need to add display: 'block' | 'inline' and allow specifying these properties only on block elements. Because otherwise it'll be confusing how to handle these cases:

<Text height={5}>Hey</Text>Wow

Or maybe we just add a verticalAlign style to correctly position the Wow text next to Hey which has a height.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants