Fieldset (v1)

Functional component variations

Default state – all required fields at minimal values

id (minimal value)

id (maximal value)

ishidden = true

ishidden = false

isdisabled = true

isdisabled = false

All dialog fields populated with minimal values

accessibilityLabel (minimal value, inherited)

accessibilityLabel (maximal value, inherited)

roleAttribute (minimal value, inherited)

roleAttribute (maximal value, inherited)

collapsed = true (inherited)

collapsed = false (inherited)

Style variations

Style: Type > Center content

Style: Background > Concrete

Style: Background > White

Style: Background > AG Green 1

Style: Background > AG Green 2

Style: Background > AG Green 3

Style: Background > AG Green 4

Style: Background > AG Green 5

Style: Background > AG Blue 1

Style: Background > AG Blue 2

Style: Background > AG Blue 3

Style: Background > AG Blue 4

Style: Background > AG Blue 5

Style: Border > Green Border

Style: Border > Full Gray

Style: Border > Left Gray

Style: Border > Right Gray

Style: Shadow > Shadow

Style: Padding top > 15px

Style: Padding top > 20px

Style: Padding top > 30px

Style: Padding top > 40px

Style: Padding top > 60px

Style: Padding bottom > 15px

Style: Padding bottom > 20px

Style: Padding bottom > 30px

Style: Padding bottom > 40px

Style: Padding bottom > 60px

Style: Padding left > 15px

Style: Padding left > 20px

Style: Padding left > 30px

Style: Padding left > 40px

Style: Padding left > 60px

Style: Padding right > 15px

Style: Padding right > 20px

Style: Padding right > 30px

Style: Padding right > 40px

Style: Padding right > 60px

Style: Mobile Padding Top > 20px

Style: Mobile Padding Top > 40px

Style: Mobile Padding Bottom > 20px

Style: Mobile Padding Bottom > 40px

Style: Mobile Padding Around > Around

Style: Mobile Padding Around > Left & Right

Default style (no explicit style applied)

Style combo 1: Type>Center content + Background>Concrete + Border>Green Border + Shadow>Shadow + Padding top>15px + Padding bottom>15px + Padding left>15px + Padding right>15px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around

Style combo 2: Type>Center content + Background>White + Border>Full Gray + Shadow>Shadow + Padding top>20px + Padding bottom>20px + Padding left>20px + Padding right>20px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & Right

Style combo 3: Type>Center content + Background>AG Green 1 + Border>Left Gray + Shadow>Shadow + Padding top>30px + Padding bottom>30px + Padding left>30px + Padding right>30px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around

Style combo 4: Type>Center content + Background>AG Green 2 + Border>Right Gray + Shadow>Shadow + Padding top>40px + Padding bottom>40px + Padding left>40px + Padding right>40px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & Right

Style combo 5: Type>Center content + Background>AG Green 3 + Border>Green Border + Shadow>Shadow + Padding top>60px + Padding bottom>60px + Padding left>60px + Padding right>60px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around

Style combo 6: Type>Center content + Background>AG Green 4 + Border>Full Gray + Shadow>Shadow + Padding top>15px + Padding bottom>15px + Padding left>15px + Padding right>15px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & Right

Style combo 7: Type>Center content + Background>AG Green 5 + Border>Left Gray + Shadow>Shadow + Padding top>20px + Padding bottom>20px + Padding left>20px + Padding right>20px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around

Style combo 8: Type>Center content + Background>AG Blue 1 + Border>Right Gray + Shadow>Shadow + Padding top>30px + Padding bottom>30px + Padding left>30px + Padding right>30px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & Right

Style combo 9: Type>Center content + Background>AG Blue 2 + Border>Green Border + Shadow>Shadow + Padding top>40px + Padding bottom>40px + Padding left>40px + Padding right>40px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around

Style combo 10: Type>Center content + Background>AG Blue 3 + Border>Full Gray + Shadow>Shadow + Padding top>60px + Padding bottom>60px + Padding left>60px + Padding right>60px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & Right

Style combo 11: Type>Center content + Background>AG Blue 4 + Border>Left Gray + Shadow>Shadow + Padding top>15px + Padding bottom>15px + Padding left>15px + Padding right>15px + Mobile Padding Top>20px + Mobile Padding Bottom>20px + Mobile Padding Around>Around

Style combo 12: Type>Center content + Background>AG Blue 5 + Border>Right Gray + Shadow>Shadow + Padding top>20px + Padding bottom>20px + Padding left>20px + Padding right>20px + Mobile Padding Top>40px + Mobile Padding Bottom>40px + Mobile Padding Around>Left & Right

Critical integration: required dialog fields combined with primary style