ZupIT/beagle

[Epic] CornerRadius should accept single corner values

Closed this issue · 3 comments

josenetozup commented

Use case

Style atributte cornerRadius, accept values to change corner radius (left, top, right, bottom)

Proposal

Change container with the differente corner radius.
Exemple of usage:

Container()
.setStyle {
    cornerRadius = CornerRadius
  (
	topLeft = 0, 
	topRight = 8, 
	bottomLeft = 0, 
	bottomRight = 8
   )
}
Tiagoperes commented

This makes sense. We'll transform this to an epic and add this to our next planning.

Enhance the corner radius styling

The cornerRadius option, in the style, must accept corner specific values. The new interface should be modified as the following:

interface CornerRadius {
  radius?: number,
  topLeft?: number,
  topRight?: number,
  bottomLeft?: number,
  bottomRight?: number,
}

When deciding which value of corner radius to use, first check the specific value (topLeft, topRight, bottomLeft and bottomRight). If the specific corner wasn't specified, use radius.

Example: to create the corners in the image posted by @josenetozup, one could use:

"style": {
  "cornerRadius": {
    "radius": 8,
    "topLeft": 0,
    "bottomLeft": 0,
  }
}

OR

"style": {
  "cornerRadius": {
    "radius": 0,
    "topRight": 8,
    "bottomRight": 8,
  }
}

OR

"style": {
  "cornerRadius": {
    "topRight": 8,
    "bottomRight": 8,
    "topLeft": 0,
    "bottomLeft": 0,
  }
}

Whenever cornerRadius is empty, i.e. no internal property is set, the corner radius of the component shouldn't be modified. It should act as if cornerRadius hasn't been specified.

  • Implement in Android
  • Implement in iOS
  • Implement in Web
  • Update documentation
  • Implement in Flutter (optional)
  • Implement in React Native (optional)
josenetozup commented

Thank you, this is very nic

  • 🎉1