docs(text-field): Add density() mixin examples (#2202)

closes #2177
trimox · Apr 15, 2020 · 751dab5 · 751dab5
1 parent b153372
commit 751dab5
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 16 deletions.
diff --git a/demos/src/app/components/text-field/examples.html b/demos/src/app/components/text-field/examples.html
@@ -239,6 +239,22 @@ <h3 class="demo-content__headline">Svg Icon</h3>
   <example-viewer [example]="exampleSvgIcon"></example-viewer>
 </div>
 
+<div class="demo-content">
+  <h3 class="demo-content__headline">Density</h3>
+  <div class="demo-container">
+    <mdc-text-field class="demo-density-text-field" label="Density"></mdc-text-field>
+  </div>
+  <div class="demo-container">
+    <mdc-text-field class="demo-density-outlined-text-field" outlined label="Density"></mdc-text-field>
+  </div>
+  <div class="demo-container">
+    <mdc-text-field class="demo-density-outlined-text-field-with-leading-icon" outlined label="Event date">
+      <mdc-icon mdcTextFieldIcon leading>event</mdc-icon>
+    </mdc-text-field>
+  </div>
+  <example-viewer [example]="exampleDensity"></example-viewer>
+</div>
+
 <div class="demo-content">
   <h3 class="demo-content__headline">Shape</h3>
   <div class="demo-container">
@@ -287,23 +303,20 @@ <h3 class="demo-content__headline">RTL</h3>
 
 <div class="demo-content">
   <h3 class="demo-content__headline">Date / Time / Color / Password</h3>
-  <div class="demo-layout__row">
-    <div class="demo-container">
-      <mdc-text-field type="date" label="Birthday" outlined></mdc-text-field>
-    </div>
-    <div class="demo-container">
-      <mdc-text-field type="time" label="Time" outlined></mdc-text-field>
-    </div>
-    <div class="demo-container">
-      <mdc-text-field type="password" label="Password" required outlined>
-      </mdc-text-field>
-    </div>
-    <div class="demo-container">
-      <mdc-text-field type="color" label="Color" style="width: 6rem" outlined>
-      </mdc-text-field>
-    </div>
+  <div class="demo-container">
+    <mdc-text-field type="date" label="Birthday" outlined></mdc-text-field>
+  </div>
+  <div class="demo-container">
+    <mdc-text-field type="time" label="Time" outlined></mdc-text-field>
+  </div>
+  <div class="demo-container">
+    <mdc-text-field type="password" label="Password" required outlined>
+    </mdc-text-field>
+  </div>
+  <div class="demo-container">
+    <mdc-text-field type="color" label="Color" style="width: 6rem" outlined>
+    </mdc-text-field>
   </div>
-
   <example-viewer [example]="exampleDateTime"></example-viewer>
 </div>
 

diff --git a/demos/src/app/components/text-field/text-field.ts b/demos/src/app/components/text-field/text-field.ts
@@ -249,6 +249,15 @@ resetForm(formDirective: FormGroupDirective) {
     ts: `demoInputValue: string;`
   };
 
+  exampleDensity = {
+    html: `<mdc-text-field class="demo-density-text-field" label="Density"></mdc-text-field>
+<mdc-text-field class="demo-density-outlined-text-field" outlined label="Density"></mdc-text-field>
+<mdc-text-field class="demo-density-outlined-text-field-with-leading-icon" outlined label="Event date">
+  <mdc-icon mdcTextFieldIcon leading>event</mdc-icon>
+</mdc-text-field>`,
+    sass: `https://raw.githubusercontent.com/trimox/angular-mdc-web/master/demos/src/styles/_text-field.scss`
+  };
+
   exampleIcons = {
     html: `<mdc-text-field autocomplete="tel" type="tel" label="Phone number">
   <mdc-icon mdcTextFieldIcon leading>phone</mdc-icon>

diff --git a/demos/src/styles/_text-field.scss b/demos/src/styles/_text-field.scss
@@ -81,6 +81,22 @@
   @include textfield.outline-shape-radius(50%);
 }
 
+//
+// Density
+//
+
+.demo-density-text-field {
+  @include textfield.density(-1);
+}
+
+.demo-density-outlined-text-field {
+  @include textfield.outlined-density(-3);
+}
+
+.demo-density-outlined-text-field-with-leading-icon {
+  @include textfield.outlined-with-leading-icon-density(-3);
+}
+
 //
 // Form spacing
 //