Attribute-date class for Design System objects

Official Content
This documentation is valid for:

Attribute-date is a class that inherits properties from the Attribute/Variable class, but applies specifically to those based on the Date data type / DateTime data type.

When generating the Work With pattern, this class allows those Attributes whose Data Type is Date or Date Time to be automatically assigned this specific class.

Sample

First, create an Attribute class in the Styles section of your Design System Object with the desired general style for the attributes:

        .Attribute {
             gx-label-class: attribute__label;
             border-style: solid;
             border-color: #8592A6;
             border-width: 1dip;
             border-radius: 4dip;
             margin-left: 16dip;
             margin-right: 16dip;
             margin-bottom: 8dip;
             background-color: $colors.surface;
             padding-left: 8dip;
             padding-right: 8dip;
             gx-show-edit-text-line: false;
             color: #3D4854;
             gx-invite-message-color: #8592A6;
             font-size: 16dip;
             font-family: $fonts.primary-regular;  
       }

Now, suppose that for the Attribute/Variable whose Control Type property = Radio Button, you want the borders not to be displayed and to have a lower margin, as shown below:

image5_20221115163458_1_png

The class to be defined is as follows:

 .attribute-date {
          @include Attribute;
          border-style: none;
          margin-bottom: 7dip;
 }

See Also

Design System Class