diff --git a/src/app/components/demo-components.service.ts b/src/app/components/demo-components.service.ts index 35e4a3bfa..1d2c99ff9 100644 --- a/src/app/components/demo-components.service.ts +++ b/src/app/components/demo-components.service.ts @@ -855,7 +855,7 @@ export class SkyDemoComponentsService { name: 'Sectioned form', icon: 'object-group', // tslint:disable-next-line - summary: `A sectioned form combines multiple forms while allowing users to target specific independent areas.`, + summary: `A sectioned form combines multiple forms and allows users to target specific, independent areas.`, url: '/components/sectioned-form', getCodeFiles: function () { return [ diff --git a/src/app/components/sectioned-form/demo-information-form.component.html b/src/app/components/sectioned-form/demo-information-form.component.html index 85ba9c4f4..dfdef693d 100644 --- a/src/app/components/sectioned-form/demo-information-form.component.html +++ b/src/app/components/sectioned-form/demo-information-form.component.html @@ -20,7 +20,7 @@ for="inputId" class="sky-control-label" > - Id + ID - Mark 'Name' required + Make 'Name' required diff --git a/src/app/components/sectioned-form/demo-phone-form.component.html b/src/app/components/sectioned-form/demo-phone-form.component.html index 4248ab8b4..b38609aec 100644 --- a/src/app/components/sectioned-form/demo-phone-form.component.html +++ b/src/app/components/sectioned-form/demo-phone-form.component.html @@ -1,11 +1,14 @@ -
-
- Home 303.997.3301 -
-
- Mobile 888.387.1211 -
-
- Work 303.997.2000 -
-
\ No newline at end of file +
+ +
+
303.997.3301
+ +
+ +
+
888.387.1211
+ +
+ +
+
303.997.2000
diff --git a/src/app/components/sectioned-form/index.html b/src/app/components/sectioned-form/index.html index 03c1f108e..3b514e85d 100644 --- a/src/app/components/sectioned-form/index.html +++ b/src/app/components/sectioned-form/index.html @@ -1,7 +1,7 @@ - +

- Sectioned forms are used when displaying a large amount of conceptually related information. + Sectioned forms combine multiple forms to display large amounts of conceptually related information.

@@ -10,20 +10,20 @@ propertyName="active" isOptional="true" > - A boolean value to indicate the active section. + Indicates whether the section is active when the form loads. - The display text used to identify the section. + Specifies the section header. - The number of items contained within a given section. + Indicates the number of items within the section and displays a counter alongside the section header. @@ -32,7 +32,7 @@ - Fires when the active tab changes. Emits the index of the active section. + Fires when the active tab changes and emits the index of the active section. The index is based on the section's position when the form loads. diff --git a/src/app/components/sectioned-form/sectioned-form-demo.component.html b/src/app/components/sectioned-form/sectioned-form-demo.component.html index bf67055ce..9f05ca2b1 100644 --- a/src/app/components/sectioned-form/sectioned-form-demo.component.html +++ b/src/app/components/sectioned-form/sectioned-form-demo.component.html @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/src/app/components/sectioned-form/sectioned-modal-form-demo.component.html b/src/app/components/sectioned-form/sectioned-modal-form-demo.component.html index 677f556f2..839f2c9c2 100644 --- a/src/app/components/sectioned-form/sectioned-modal-form-demo.component.html +++ b/src/app/components/sectioned-form/sectioned-modal-form-demo.component.html @@ -1,6 +1,6 @@ - Tab sectioned modal - Index: {{ activeIndexDisplay }} + Sectioned form — Index: {{ activeIndexDisplay }}