Rm uppercase (#75)

* removed uppercase style on grouped tabs * reconfigured heading sizes * fixed semantically wrong heading markup * reduce vertical space required by tabs * adjusted heading level in sample code * fixed heading hierarchy in markup * fine-tuned heading sizes * removed unneeded overrides
gentics · Oct 13, 2020 · 9cfe681 · 9cfe681
1 parent 1c8d01f
commit 9cfe681
Show file tree

Hide file tree

Showing 46 changed files with 157 additions and 127 deletions.
diff --git a/src/components/checkbox/checkbox.component.ts b/src/components/checkbox/checkbox.component.ts
@@ -28,7 +28,7 @@ const GTX_CHECKBOX_VALUE_ACCESSOR = {
  * <gtx-checkbox [(ngModel)]="checkStates.B" value="B" label="B"></gtx-checkbox>
  * ```
  *
- * ##### Stateless Mode
+ * ## Stateless Mode
  * By default, the Checkbox keeps track of its own internal checked state. This makes sense
  * for most use cases, such as when used in a form bound to NgControl.
  *

diff --git a/src/components/dropdown-list/dropdown-list.component.ts b/src/components/dropdown-list/dropdown-list.component.ts
@@ -51,7 +51,7 @@ export type DropdownWidth = 'contents' | 'trigger' | 'expand' | number;
  * </gtx-dropdown-list>
  * ```
  *
- * ##### Programmatic Use
+ * ## Programmatic Use
  * When used programmatically (e.g. by getting a reference to the component via `@ContentChild(DropdownList)`, the
  * following extended API is available:
  *

diff --git a/src/components/grouped-tabs/grouped-tabs.component.ts b/src/components/grouped-tabs/grouped-tabs.component.ts
@@ -12,7 +12,7 @@ let uniqueGroupedTabsId = 0;
  *
  * Pure tabs will only change the active tab when the `activeId` property is updated.
  *
- * ##### Tabs with simple labels
+ * ## Tabs with simple labels
  * ```html
  * <gtx-grouped-tabs>
  *      <gtx-tab-pane label="First without Group">Content 1</gtx-tab-pane>
@@ -27,7 +27,7 @@ let uniqueGroupedTabsId = 0;
  * </gtx-grouped-tabs>
  * ```
  *
- * ##### Tabs with template labels
+ * ## Tabs with template labels
  * ```html
  * <gtx-grouped-tabs>
  *      <gtx-tab-pane>
@@ -53,7 +53,7 @@ let uniqueGroupedTabsId = 0;
  * </gtx-grouped-tabs>
  * ```
  *
- * ##### Export components to use in templates
+ * ## Export components to use in templates
  * ```html
  * <gtx-grouped-tabs #groupedTabs="gtxGroupedTabs">
  *      <gtx-tab-pane label="First" #tab1>First content</gtx-tab-pane>

diff --git a/src/components/grouped-tabs/grouped-tabs.scss b/src/components/grouped-tabs/grouped-tabs.scss
@@ -20,7 +20,9 @@ $tab-readonly-icon: material-icons-content(map-get($material-icons-codepoints, '
     content: $tab-active-icon;
     position: absolute;
     left: -9px;
-    top: 13px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
     width: 16px;
     height: 13px;
     font-family: 'Material Icons';
@@ -56,7 +58,7 @@ gtx-grouped-tabs {
 
             & > li {
                 background: white;
-                text-transform: uppercase;
+                // text-transform: uppercase;
                 border-top: 1px solid $gtx-color-light-gray;
                 margin-bottom: 0;
                 position: relative;
@@ -66,12 +68,18 @@ gtx-grouped-tabs {
                     margin-bottom: 0;
                     border-bottom: 1px solid $gtx-color-light-gray;
                 }
+
+                icon[left] {
+                    float: left;
+                    margin-right: 8px;
+                    font-size: $gtx-font-size-regular;
+                }
             }
 
             .tab-link {
                 @include noselect;
                 cursor: pointer;
-                text-transform: uppercase;
+                // text-transform: uppercase;
                 color: $gtx-color-dark-gray;
                 transition: border-left 0.3s, color 0.2s;
                 border-right: 1px solid $gtx-color-light-gray;
@@ -80,6 +88,8 @@ gtx-grouped-tabs {
 
                 > a {
                     @include inline-ellipsis-text;
+                    display: flex;
+                    align-items: center;
 
                     &, &:link, &:visited {
                         color: inherit;
@@ -140,7 +150,7 @@ gtx-grouped-tabs {
             & > li.tab-link {
                 cursor: pointer;
                 line-height: 1.5;
-                padding: 0.5rem;
+                padding: 0.3rem;
                 padding-left: 1rem;
                 border-left: 2px solid $gtx-color-light-gray;
 
@@ -159,9 +169,10 @@ gtx-grouped-tabs {
 
                 .collapsible-header {
                     border: none;
-                    padding: 0.5rem 1rem;
+                    padding: 0.3rem 1rem;
                     color: $gtx-color-dark-gray;
                     border-right: 1px solid $gtx-color-light-gray;
+                    font-size: $gtx-font-size-small;
                     @include inline-ellipsis-text;
                     @include noselect;
 
@@ -182,7 +193,7 @@ gtx-grouped-tabs {
                     overflow: hidden;
 
                     & > ul > li {
-                        padding: 0.5rem 1rem;
+                        padding: 0.3rem 1rem;
                         padding-right: 0;
                         margin: 0;
                         margin-left: 1rem;
@@ -202,6 +213,11 @@ gtx-grouped-tabs {
                         &.is-active {
                             @include is-active;
                         }
+
+                        a span {
+                            display: flex;
+                            align-items: center;
+                        }
                     }
                 }
 

diff --git a/src/components/modal/modal.service.ts b/src/components/modal/modal.service.ts
@@ -18,7 +18,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda
  * A promise-based service for creating modal windows and dialogs.
  * Depends on the [`<gtx-overlay-host>`](#/overlay-host) being present in the app.
  *
- * ##### Return Values
+ * ## Return Values
  * All the public methods return the `IModalInstance` object:
  *
  * ```
@@ -31,7 +31,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda
  * Calling the `open()` method returns a promise which will be resolved when the modal is closed
  * or rejected when a button is set to `shouldReject` or the modal calls the passed error handler.
  *
- * ##### `.dialog()`
+ * ## `.dialog()`
  * To create a basic dialog modal, use the `.dialog()` method. This accepts an `IDialogConfig` object:
  *
  * ```TypeScript
@@ -65,7 +65,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda
  *   .catch(() => console.log('cancelled');
  * ```
  *
- * ##### `.fromComponent()`
+ * ## `.fromComponent()`
  * For more complex modals, a component can be passed to the `.fromComponent()` method which will then be
  * placed inside a modal window. The component must implement the IModalDialog interface, which allows the
  * ModalService to hook into a `closeFn` & `cancelFn` so it knows to close the modal and resolve the promise.
@@ -108,7 +108,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda
  *   .then(result => console.log(result));
  * ```
  *
- * ##### Modal Options
+ * ## Modal Options
  * All public methods take an optional options parameter to describe the behavior and appearance of the modal window
  * itself:
  * ```TypeScript

diff --git a/src/components/notification/notification.service.ts b/src/components/notification/notification.service.ts
@@ -49,7 +49,7 @@ interface IOpenToast {
  * dismiss();
  * ```
  *
- * ##### `INotificationOptions`
+ * ## `INotificationOptions`
  *
  * The `show()` method takes an `INotificationOptions` object as its argument:
  *

diff --git a/src/components/progress-bar/progress-bar.component.ts b/src/components/progress-bar/progress-bar.component.ts
@@ -27,7 +27,7 @@ function noop(): void {}
  * <gtx-progress-bar [for]="backgroundProgress$"></gtx-progress-bar>
  * ```
  *
- * ##### Using the progress bar with observables
+ * ## Using the progress bar with observables
  *
  * When an observable is assigned to the ProgressBar with "for", the observable should emit numbers
  * in the range [0..1] for a determinate progress bar or boolean values for indeterminate progress.
@@ -44,7 +44,7 @@ function noop(): void {}
  * }
  * ```
  *
- * ##### Using the progress bar programmatically inside another component
+ * ## Using the progress bar programmatically inside another component
  *
  * The ProgressBar instance exposes two public methods, `start()`, `complete()` which can be used
  * to manually control the progress bar visibility and progress in a parent component.

diff --git a/src/components/radio-button/radio-button.component.ts b/src/components/radio-button/radio-button.component.ts
@@ -109,7 +109,7 @@ export class RadioGroup implements ControlValueAccessor {
  * <gtx-radio-button [(ngModel)]="val" value="C" label="C"></gtx-radio-button>
  * ```
  *
- * ##### Stateless Mode
+ * ## Stateless Mode
  * By default, the RadioButton keeps track of its own internal checked state. This makes sense
  * for most use cases, such as when used in a form bound to ngModel.
  *

diff --git a/src/components/search-bar/search-bar.component.ts b/src/components/search-bar/search-bar.component.ts
@@ -18,7 +18,7 @@ const GTX_SEARCH_BAR_VALUE_ACCESSOR = {
  * </gtx-search-bar>
  * ```
  *
- * ##### Use With NgModel
+ * ## Use With NgModel
  * The search query can be bound with `NgModel`, which can be useful for implementing a reset function:
  *
  * ```html
@@ -27,7 +27,7 @@ const GTX_SEARCH_BAR_VALUE_ACCESSOR = {
  * </gtx-search-bar>
  * ```
  *
- * ##### Content Projection
+ * ## Content Projection
  * Content inside the `<gtx-search-bar>` tags will be projected inside the component, to the left of the
  * search bar. This can be used, for example, to display current filters being applied to the search.
  *
@@ -37,7 +37,7 @@ const GTX_SEARCH_BAR_VALUE_ACCESSOR = {
  * </gtx-search-bar>
  * ```
  *
- * ##### Custom Icons
+ * ## Custom Icons
  * Icons in the `<gtx-search-bar>` can be replaced with custom ones.
  *
  * ```html

diff --git a/src/components/sortable-list/sortable-list.component.ts b/src/components/sortable-list/sortable-list.component.ts
@@ -51,7 +51,7 @@ export type SortableGroup = string | ISortableGroupOptions;
  * }
  * ```
  *
- * ##### `ISortableEvent`
+ * ## `ISortableEvent`
  *
  * The `dragEnd` event emits an `ISortableEvent` object. For a full listing of its properties, see the source. Below
  * are the more important properties:
@@ -62,7 +62,7 @@ export type SortableGroup = string | ISortableGroupOptions;
  * | **newIndex**   | `number`     | The index in the list that the item was dropped |
  * | **sort()**     | `Function`   | A pre-configured sort function - see below |
  *
- * ##### `ISortableEvent.sort()`
+ * ## `ISortableEvent.sort()`
  *
  * When the `dragEnd` event is fired, the event object exposes a `sort(array, byReference)` method. This is a convenience method for
  * sorting an array, so that the consumer of this component does not have to re-implement array sorting

diff --git a/src/components/split-view-container/split-view-container.component.ts b/src/components/split-view-container/split-view-container.component.ts
@@ -44,7 +44,7 @@ export const CURSOR_STYLE_CLASS = 'gtx-split-view-container-resizing';
  * </gtx-split-view-container>
  * ```
  *
- * ##### Setting Scroll Positions
+ * ## Setting Scroll Positions
  *
  * The SplitViewContainer instance exposes two public methods which can be used to manually set the `scrollTop`
  * property of either the right or left panels: `.scrollLeftPanelTo()` and `.scrollRightPanelTo()`.

diff --git a/src/components/tabs/tabs.component.ts b/src/components/tabs/tabs.component.ts
@@ -9,7 +9,7 @@ import { Subscription } from 'rxjs';
  *
  * Pure tabs will only change the active tab when the `activeId` property is updated.
  *
- * ##### Stateful Tabs
+ * ## Stateful Tabs
  * ```html
  * <gtx-tabs (tabChange)="goToTab($event)">
  *     <gtx-tab title="Details">Optional content here.</gtx-tab>
@@ -18,7 +18,7 @@ import { Subscription } from 'rxjs';
  * </gtx-tabs>
  * ```
  *
- * ##### Pure Tabs
+ * ## Pure Tabs
  * ```html
  * <gtx-tabs pure [activeId]="activeTab">
  *     <gtx-tab title="Details" id="1" (select)="activeTab = $event"></gtx-tab>
@@ -27,7 +27,7 @@ import { Subscription } from 'rxjs';
  * </gtx-tabs>
  * ```
  *
- * ##### With `routerLink`
+ * ## With `routerLink`
  * A gtx-tab can take an optional `[routerLink]` binding which will set router links for the tabs.
  * ```html
  * <gtx-tabs pure [activeId]="activeTab">

diff --git a/src/docs/pages/breadcrumbs-demo/breadcrumbs-demo.tpl.html b/src/docs/pages/breadcrumbs-demo/breadcrumbs-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Breadcrumbs</h3>
+<h1>Breadcrumbs</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Simple breadcrumbs navigation">
     <div class="demo-result">

diff --git a/src/docs/pages/button-demo/button-demo.tpl.html b/src/docs/pages/button-demo/button-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Button</h3>
+<h1>Button</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 <gtx-demo-block demoTitle="Sizes">
     <div class="demo-result">
@@ -59,7 +59,7 @@ <h4>Demos</h4>
 
 <gtx-demo-block demoTitle="Icon Buttons">
     <div class="demo-result">
-        <h6>Small Icons Buttons</h6>
+        <h5>Small Icons Buttons</h5>
         <gtx-button icon type="secondary" size="small">
             <i class="material-icons">arrow_drop_down</i>
         </gtx-button>
@@ -70,12 +70,12 @@ <h6>Small Icons Buttons</h6>
             <i class="material-icons">not_interested</i>
         </gtx-button>
 
-        <h6>Regular (default) Icons Buttons</h6>
+        <h5>Regular (default) Icons Buttons</h5>
         <gtx-button icon type="secondary"><i class="material-icons">settings</i></gtx-button>
         <gtx-button icon type="success"><i class="material-icons">check_circle</i></gtx-button>
         <gtx-button icon type="warning"><i class="material-icons">delete</i></gtx-button>
 
-        <h6>Large Icon Buttons</h6>
+        <h5>Large Icon Buttons</h5>
         <gtx-button icon type="primary" size="large">
             <i class="material-icons">home</i>
         </gtx-button>
@@ -88,7 +88,7 @@ <h6>Large Icon Buttons</h6>
     </div>
     <div class="demo-code">
         <gtx-highlighted-code language="HTML" code='
-                 <h6>Small Icons Buttons</h6>
+                 <h5>Small Icons Buttons</h5>
                  <gtx-button icon type="secondary" size="small">
                      <i class="material-icons">arrow_drop_down</i>
                  </gtx-button>
@@ -99,12 +99,12 @@ <h6>Small Icons Buttons</h6>
                      <i class="material-icons">not_interested</i>
                  </gtx-button>
 
-                 <h6>Regular (default) Icons Buttons</h6>
+                 <h5>Regular (default) Icons Buttons</h5>
                  <gtx-button icon type="secondary"><i class="material-icons">settings</i></gtx-button>
                  <gtx-button icon type="success"><i class="material-icons">check_circle</i></gtx-button>
                  <gtx-button icon type="warning"><i class="material-icons">delete</i></gtx-button>
 
-                 <h6>Large Icon Buttons</h6>
+                 <h5>Large Icon Buttons</h5>
                  <gtx-button icon type="primary" size="large">
                      <i class="material-icons">home</i>
                  </gtx-button>

diff --git a/src/docs/pages/checkbox-demo/checkbox-demo.tpl.html b/src/docs/pages/checkbox-demo/checkbox-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Checkbox</h3>
+<h1>Checkbox</h1>
 
 <gtx-autodocs [source]="componentSource"></gtx-autodocs>
 
-<h4>Demos</h4>
+<h2>Demos</h2>
 
 
 <gtx-demo-block demoTitle="Simple Boolean Value">

diff --git a/src/docs/pages/colors-demo/colors-demo.tpl.html b/src/docs/pages/colors-demo/colors-demo.tpl.html
@@ -1,8 +1,8 @@
-<h3>Colors</h3>
+<h1>Colors</h1>
 
 The UI Core defines the following colors, which can be overridden as desired:
 
-<h4>States</h4>
+<h2>States</h2>
 <div class="color-palette row">
     <div class="well primary column small-12 medium-3">primary / <code>$gtx-color-primary</code></div>
     <div class="column small-12 medium-9">
@@ -40,7 +40,7 @@ <h4>States</h4>
     </div>
 </div>
 
-<h4>Grays</h4>
+<h2>Grays</h2>
 <div class="color-palette">
     <div class="well off-white">off-white / <code>$gtx-color-off-white</code></div>
     <div class="well very-light-gray">very-light-gray / <code>$gtx-color-very-light-gray</code></div>