Merge branch '#198-controls-improvements' into #199-checkbox-group

MaibornWolff · Jul 21, 2023 · 765d934 · 765d934
2 parents 1031523 + 64abbb6
commit 765d934
Show file tree

Hide file tree

Showing 28 changed files with 3,959 additions and 3,876 deletions.
diff --git a/mwui-stencil/docs.json b/mwui-stencil/docs.json
@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-07-11T13:49:45",
+  "timestamp": "2023-07-21T12:33:10",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",
@@ -430,7 +430,7 @@
       "filePath": "./src/components/mw-avatar/mw-avatar.tsx",
       "encapsulation": "shadow",
       "tag": "mw-avatar",
-      "readme": "# mw-avatar\n\n\n",
+      "readme": "# mw-avatar\r\n\r\n\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -602,7 +602,7 @@
       }
     },
     {
-      "filePath": "./src/components/mw-button/mw-button.component.tsx",
+      "filePath": "./src/components/mw-button/mw-button.tsx",
       "encapsulation": "shadow",
       "tag": "mw-button",
       "readme": "# mw-button\n",
@@ -876,7 +876,7 @@
       "filePath": "./src/components/mw-card-body/mw-card-body.tsx",
       "encapsulation": "shadow",
       "tag": "mw-card-body",
-      "readme": "# mw-card-body\n\n\n",
+      "readme": "# mw-card-body\r\n\r\n\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -895,7 +895,7 @@
       "filePath": "./src/components/mw-card-footer/mw-card-footer.tsx",
       "encapsulation": "shadow",
       "tag": "mw-card-footer",
-      "readme": "# mw-card-footer\n\n\n",
+      "readme": "# mw-card-footer\r\n\r\n\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -1834,7 +1834,7 @@
       "filePath": "./src/components/mw-divider/mw-divider.tsx",
       "encapsulation": "shadow",
       "tag": "mw-divider",
-      "readme": "# mw-divider\n\n\n",
+      "readme": "# mw-divider\r\n\r\n\r\n\r",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -2408,7 +2408,7 @@
           "mutable": false,
           "attr": "srcset",
           "reflectToAttr": false,
-          "docs": "Different resolutions for different viewport sizes can be passed\ne.g. \"img/vasen-420.webp 420w,\n      img/vasen-980.webp 980w,\n      img/vasen-1680.webp 1680w,\n      img/vasen-2400.webp 2400w\"",
+          "docs": "Different resolutions for different viewport sizes can be passed\r\ne.g. \"img/vasen-420.webp 420w,\r\n      img/vasen-980.webp 980w,\r\n      img/vasen-1680.webp 1680w,\r\n      img/vasen-2400.webp 2400w\"",
           "docsTags": [],
           "values": [
             {

diff --git a/mwui-stencil/src/components.d.ts b/mwui-stencil/src/components.d.ts
@@ -11,26 +11,28 @@ import { Size } from "./shared/models/enums/size.enum";
 import { ButtonVariant } from "./components/mw-button/models/enums/button-variant.enum";
 import { ButtonSize } from "./components/mw-button/models/enums/button-size.enum";
 import { Target } from "./components/mw-button/models/enums/button-target.enum";
-import { Position } from "./shared/models/enums/position.enum";
+import { PositionEnum } from "./shared/models/enums/position.enum";
 import { SrcSetItem } from "./components/mw-img/mw-img";
 import { LoginLayout } from "./components/mw-login/models/enums/login-layout.enum";
 import { LoginFormData } from "./components/mw-login/models/interfaces/login-form-data";
 import { PopoverPlacement } from "./components/mw-popover/mw-popover";
 import { ModalSize } from "./components/mw-modal/models/enums/modal-size.enum";
 import { PopoverPlacement as PopoverPlacement1 } from "./components/mw-popover/mw-popover";
+import { LayoutDirectionEnum } from "./shared/models/enums/layout-direction.enum";
 export { AriaRolesEnum } from "./shared/models/enums/aria-roles.enum";
 export { AppBarPosition } from "./components/mw-app-bar/mw-app-bar";
 export { Size } from "./shared/models/enums/size.enum";
 export { ButtonVariant } from "./components/mw-button/models/enums/button-variant.enum";
 export { ButtonSize } from "./components/mw-button/models/enums/button-size.enum";
 export { Target } from "./components/mw-button/models/enums/button-target.enum";
-export { Position } from "./shared/models/enums/position.enum";
+export { PositionEnum } from "./shared/models/enums/position.enum";
 export { SrcSetItem } from "./components/mw-img/mw-img";
 export { LoginLayout } from "./components/mw-login/models/enums/login-layout.enum";
 export { LoginFormData } from "./components/mw-login/models/interfaces/login-form-data";
 export { PopoverPlacement } from "./components/mw-popover/mw-popover";
 export { ModalSize } from "./components/mw-modal/models/enums/modal-size.enum";
 export { PopoverPlacement as PopoverPlacement1 } from "./components/mw-popover/mw-popover";
+export { LayoutDirectionEnum } from "./shared/models/enums/layout-direction.enum";
 export namespace Components {
   interface MwAppBar {
     /**
@@ -290,7 +292,7 @@ export namespace Components {
     /**
      * Dictates on which side of checkbox the label is placed
      */
-    labelPosition?: Position;
+    labelPosition?: PositionEnum;
     /**
      * Name of checkbox input
      */
@@ -701,7 +703,7 @@ export namespace Components {
     /**
      * Dictates on which side of checkbox the label is placed
      */
-    labelPosition?: Position;
+    labelPosition?: PositionEnum;
     /**
      * Analog to HTML 'name' attribute used to group radios for unique selection
      */
@@ -719,7 +721,7 @@ export namespace Components {
     /**
      * Dictates the flex direction of the group
      */
-    direction?: Direction;
+    direction?: LayoutDirectionEnum;
     /**
      * Current value of the radio-group
      */
@@ -795,7 +797,7 @@ export namespace Components {
     /**
      * Dictates on which side of checkbox the label is placed
      */
-    labelPosition?: Position;
+    labelPosition?: PositionEnum;
     /**
      * Name of switch input
      */
@@ -1537,7 +1539,7 @@ declare namespace LocalJSX {
     /**
      * Dictates on which side of checkbox the label is placed
      */
-    labelPosition?: Position;
+    labelPosition?: PositionEnum;
     /**
      * Name of checkbox input
      */
@@ -1988,7 +1990,7 @@ declare namespace LocalJSX {
     /**
      * Dictates on which side of checkbox the label is placed
      */
-    labelPosition?: Position;
+    labelPosition?: PositionEnum;
     /**
      * Analog to HTML 'name' attribute used to group radios for unique selection
      */
@@ -2006,7 +2008,7 @@ declare namespace LocalJSX {
     /**
      * Dictates the flex direction of the group
      */
-    direction?: Direction;
+    direction?: LayoutDirectionEnum;
     /**
      * Event emitted when radioGroup value changes (after radio selection)
      */
@@ -2086,7 +2088,7 @@ declare namespace LocalJSX {
     /**
      * Dictates on which side of checkbox the label is placed
      */
-    labelPosition?: Position;
+    labelPosition?: PositionEnum;
     /**
      * Name of switch input
      */

diff --git a/mwui-stencil/src/components/mw-app-bar-title/mw-app-bar-title.scss b/mwui-stencil/src/components/mw-app-bar-title/mw-app-bar-title.scss
@@ -1,9 +1,9 @@
 :host {
   .mw-app-bar-title {
-    color: var(--mw-component-header-fg-default);
-    font-family: var(--mw-component-header-title-font-family);
-    font-weight: var(--mw-component-header-title-font-weight);
-    line-height: var(--mw-component-header-title-line-height);
-    font-size: var(--mw-component-header-title-font-size);
+    color: var(--mw-component-app-bar-fg-default);
+    font-family: var(--mw-component-app-bar-title-font-family);
+    font-weight: var(--mw-component-app-bar-title-font-weight);
+    line-height: var(--mw-component-app-bar-title-line-height);
+    font-size: var(--mw-component-app-bar-title-font-size);
   }
 }
diff --git a/mwui-stencil/src/components/mw-app-bar/mw-app-bar.css b/mwui-stencil/src/components/mw-app-bar/mw-app-bar.css
@@ -9,10 +9,10 @@
   flex-flow: row;
   justify-content: space-between;
   align-items: center;
-  height: var(--mw-component-size-header-height);
-  background: var(--mw-component-header-bg-default);
-  color: var(--mw-component-header-fg-default);
-  padding: 0 var(--mw-component-header-padding-x);
+  height: var(--mw-component-size-app-bar-height);
+  background: var(--mw-component-app-bar-bg-default);
+  color: var(--mw-component-app-bar-fg-default);
+  padding: 0 var(--mw-component-app-bar-padding-x);
 }
 .mw-app-bar.fixed {
   position: fixed;
@@ -33,7 +33,7 @@
   display: flex;
   flex-flow: row;
   align-items: center;
-  gap: var(--mw-component-header-gap-within);
+  gap: var(--mw-component-app-bar-gap-within);
 }
 
 slot[name="start"]::slotted(*) {

diff --git a/mwui-stencil/src/components/mw-button/mw-button.docs.mdx b/mwui-stencil/src/components/mw-button/mw-button.docs.mdx
@@ -39,11 +39,33 @@ import * as MwButton from "./mw-button.stories.ts";
 
 ### Ghost
 
-<Canvas of={MwButton.GhostInverted} />
+<Canvas of={MwButton.Ghost} />
 
 ### Ghost Inverted
 
-<Canvas of={MwButton.Ghost} />
+<Canvas of={MwButton.GhostInverted} />
+
+### Disabled
+
+<Canvas of={MwButton.FilledDisabled} />
+
+### Sizes
+
+#### Small
+
+<Canvas of={MwButton.Small} />
+
+#### Medium
+
+<Canvas of={MwButton.Filled} />
+
+#### Large
+
+<Canvas of={MwButton.Large} />
+
+#### XLarge
+
+<Canvas of={MwButton.XLarge} />
 
 ### Icon
 

diff --git a/mwui-stencil/src/components/mw-button/mw-button.scss b/mwui-stencil/src/components/mw-button/mw-button.scss
@@ -78,7 +78,7 @@ a {
     }
 
     &:focus {
-      box-shadow: inset 0 0 0 var(--mw-component-button-border-width-outline-default) var(--mw-component-button-outline-ghost-color-border-focused);
+      box-shadow: inset 0 0 0 var(--mw-component-button-border-width-outline-focused) var(--mw-component-button-outline-ghost-color-border-focused);
       color: var(--mw-component-button-outline-ghost-color-fg-focused);
     }
 

diff --git a/mwui-stencil/src/components/mw-button/mw-button.spec.tsx b/mwui-stencil/src/components/mw-button/mw-button.spec.tsx
@@ -1,6 +1,6 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { h } from "@stencil/core";
-import { MwButton } from "./mw-button.component";
+import { MwButton } from "./mw-button";
 import { SpecPage } from "@stencil/core/internal";
 import { ButtonSizeEnum } from "./models/enums/button-size.enum";
 import { ButtonVariantEnum } from "./models/enums/button-variant.enum";

diff --git a/mwui-stencil/src/components/mw-button/mw-button.stories.ts b/mwui-stencil/src/components/mw-button/mw-button.stories.ts
@@ -56,6 +56,42 @@ GhostInverted.args = {
   size: "medium",
 };
 
+export const FilledDisabled = Template.bind({});
+FilledDisabled.args = {
+  testId: "button",
+  label: "BUTTON",
+  disabled: true,
+  variant: "filled",
+  size: "medium",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  testId: "button",
+  label: "BUTTON",
+  disabled: false,
+  variant: "filled",
+  size: "small",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  testId: "button",
+  label: "BUTTON",
+  disabled: false,
+  variant: "filled",
+  size: "large",
+};
+
+export const XLarge = Template.bind({});
+XLarge.args = {
+  testId: "button",
+  label: "BUTTON",
+  disabled: false,
+  variant: "filled",
+  size: "x-large",
+};
+
 const WithIconTemplate = args => `
 <mw-button test-id="${args.testId}" label="${args.label}" onClick="${args.onClick}" size="${args.size}" disabled="${args.disabled}" variant="${args.variant}">
   <mw-icon slot="icon-start" icon="settings"></mw-icon>

diff --git a/...ponents/mw-button/mw-button.component.tsx → ...il/src/components/mw-button/mw-button.tsx b/...ponents/mw-button/mw-button.component.tsx → ...il/src/components/mw-button/mw-button.tsx
@@ -80,7 +80,7 @@ export class MwButton {
         title={this.label}
         class={{
           "mw-button": true,
-          "mw-button--icon-only": !this.label,
+          [`mw-button--icon-only--${this.size}`]: !this.label,
           [`mw-button--${this.variant}`]: true,
           [`mw-button--${this.size}`]: true,
         }}

diff --git a/mwui-stencil/src/components/mw-checkbox/mw-checkbox.tsx b/mwui-stencil/src/components/mw-checkbox/mw-checkbox.tsx
@@ -1,5 +1,6 @@
 import { Component, Event, EventEmitter, h, Host, Prop } from "@stencil/core";
-import { Position } from "../../shared/models/enums/position.enum";
+import { PositionEnum } from "../../shared/models/enums/position.enum";
+
 let checkboxIds = 0;
 
 @Component({
@@ -41,7 +42,7 @@ export class MwCheckbox {
   /**
    * Dictates on which side of checkbox the label is placed
    */
-  @Prop() labelPosition?: Position = "right";
+  @Prop() labelPosition?: PositionEnum = PositionEnum.RIGHT;
   /**
    * MwCheckbox emits an event when checkbox checked state is changed
    */

diff --git a/mwui-stencil/src/components/mw-dropdown/mw-dropdown.stories.ts b/mwui-stencil/src/components/mw-dropdown/mw-dropdown.stories.ts
@@ -22,10 +22,10 @@ const Template = args => `
   disabled="${args.disabled}"
   >
   <div slot="dropdown-menu">
-    <mw-menu-item title="List Item 1" subtitle="Subtitle"></mw-menu-item>
-    <mw-menu-item title="List Item 2" subtitle="Subtitle"></mw-menu-item>
-    <mw-menu-item title="List Item 3" subtitle="Subtitle"></mw-menu-item>
-    <mw-menu-item title="List Item 4" subtitle="Subtitle"></mw-menu-item>
+    <mw-menu-item text="List Item 1" subtitle="Subtitle"></mw-menu-item>
+    <mw-menu-item text="List Item 2" subtitle="Subtitle"></mw-menu-item>
+    <mw-menu-item text="List Item 3" subtitle="Subtitle"></mw-menu-item>
+    <mw-menu-item text="List Item 4" subtitle="Subtitle"></mw-menu-item>
   </div>
 
 </mw-dropdown>`;
@@ -44,10 +44,10 @@ const IconTemplate = args => `
   >
   <mw-icon slot="icon-start" icon="language"></mw-icon>
   <div slot="dropdown-menu">
-    <mw-menu-item title="List Item 1" subtitle="Subtitle"></mw-menu-item>
-    <mw-menu-item title="List Item 2" subtitle="Subtitle"></mw-menu-item>
-    <mw-menu-item title="List Item 3" subtitle="Subtitle"></mw-menu-item>
-    <mw-menu-item title="List Item 4" subtitle="Subtitle"></mw-menu-item>
+    <mw-menu-item text="List Item 1" subtitle="Subtitle"></mw-menu-item>
+    <mw-menu-item text="List Item 2" subtitle="Subtitle"></mw-menu-item>
+    <mw-menu-item text="List Item 3" subtitle="Subtitle"></mw-menu-item>
+    <mw-menu-item text="List Item 4" subtitle="Subtitle"></mw-menu-item>
   </div>
 
 </mw-dropdown>`;

diff --git a/mwui-stencil/src/components/mw-icon/mw-icon.css b/mwui-stencil/src/components/mw-icon/mw-icon.css