Changed border styling of data grid view

[vinothvino42]

Fixes: #494 #512
In this PR, I changed the border styling of grid view it's because of an issue in the borderRadius of TableBorder default constructor. Now it's changed it TableBorder.all named constructors with color, width and borderRadius only.

Sample YAML

DataGrid:
  border:
    borderRadius: 30
    color: red
    width: 4

[kmahmood74]

please remember to update the kitchen sink example. Also I will assign you a task to add json schema for DataGrid. It doesn't exist today

[vusters]

everywhere else we use borderRadius/borderWidth/borderColor. Can we make this consistent with that? borderRadius is commonly used but not borderWidth/borderColor, so put it in side another map is not ideal. Also nested style does not support binding currently.

[vusters]

make sure you use Utils's classes. Don't parse common properties yourself.

[vinothvino42]

everywhere else we use borderRadius/borderWidth/borderColor. Can we make this consistent with that? borderRadius is commonly used but not borderWidth/borderColor, so put it in side another map is not ideal. Also nested style does not support binding currently.

Okay sure, I'll update it

[vinothvino42]

@vusters I changed it like below. Can you recheck the changes and let me know if you need any changes?

DataGrid:
  borderRadius: 10
  borderColor: red
  borderWidth: 10

[vinothvino42]

@vusters Is this the correct json schema for DataGrid?

{
  "DataGrid-payload": {
    "type": "object",
    "allOf": [
      {
        "$ref": "#/$defs/DataRow-Templated-payload"
      },
      {
        "properties": {
          "children": {
              "$ref": "#/$defs/DataRow"
          },
          "styles": {
            "allOf": [
              {
                "$ref": "#/$defs/baseStyles"
              },
              {
                "$ref": "#/$defs/boxLayoutStyles"
              }
            ]
          },
          "headingTextStyle": {
            "type": "object",
            "description": "Set the text style for the heading text",
            "$ref": "#/$defs/TextStyle"
          },
          "dataTextStyle": {
            "type": "object",
            "description": "Set the text style for the data item text",
            "$ref": "#/$defs/TextStyle"
          },
          "horizontalMargin": {
            "type": "integer",
            "description": "The leading and trailing gap for the DataGrid view.",
            "minimum": 0
          },
          "dataRowHeight": {
            "type": "integer",
            "description": "Set the height of the data row item.",
            "minimum": 0
          },
          "headingRowHeight": {
            "type": "integer",
            "description": "Set the height of the heading row item.",
            "minimum": 0
          },
          "columnSpacing": {
            "type": "number",
            "description": "Set the padding for the column.",
            "minimum": 0
          },
          "borderRadius": {
            "type": "integer",
            "minimum": 0,
            "description": "The border radius for this DataGrid. This property can be defined in the theme to apply to all Input widgets."
          },
          "borderWidth": {
            "type": "integer",
            "minimum": 0,
            "description": "The border width for this DataGrid. This property can be defined in the theme to apply to all Input widgets."
          },
          "borderColor": {
            "$ref": "#/$defs/typeColors",
            "description": "Set the color of the border."
          }
        }
      }
    ]
  },
  "DataRow-Templated-payload": {
    "type": "object",
    "properties": {
      "item-template": {
        "type": "object",
        "properties": {
          "data": {
            "type": "string",
            "description": "Bind to an array of data from an API response or a variable"
          },
          "name": {
            "type": "string",
            "description": "Set the name to reference as you iterate through the array of data"
          },
          "template": {
            "$ref": "#/$defs/DataRow",
            "description": "The data row widget to render for each item"
          }
        }
      }
    }
  },
  "DataRow": {
    "type": "array",
    "description": "List of widgets",
    "items": {
      "$ref": "#/$defs/Widget"
    }
  }
}

[vusters]

All the styles should go inside styles. Also call them headingText and dataText. borderRadius/borderColor/borderWidth are already included since you added boxLayoutStyles (followed the included styles to see why).

[vinothvino42]

@vusters I updated the styles of DataGrid and the JSON schema. Can you review it?
Also, can you see this comment - #494 (comment). Now I changed the headingText and dataText inside the styles. So it'll affect, right?

DataGrid:
  styles: { 
    borderRadius: 30, 
    borderColor: green, 
    borderWidth: 2,
    headingText: {
      fontWeight: bold,
      color: green,
      fontSize: 24,
      lineHeight: 20,
      font: "heading"
    },
    dataText: {
      fontWeight: bold,
      color: pink,
      fontSize: 20,
      lineHeight: 100,
      textStyle: italic,
      font: "subtitle"
    }
  }

[vusters]

use Utils.getBorderRadius(). Border can have radius at any of the 4 corners.

[vusters]

If you use Utils's, this will be of type EBorderRadius

[vusters]

this goes into styles also.