Merge branch 'main' into #198-controls-improvements

# Conflicts: # mwui-stencil/src/components/mw-switch/mw-switch.tsx
MaibornWolff · Jul 21, 2023 · 64abbb6 · 64abbb6
2 parents 6a59a14 + a20b6d1
commit 64abbb6
Show file tree

Hide file tree

Showing 25 changed files with 3,950 additions and 3,856 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/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-chip/mw-chip.css b/mwui-stencil/src/components/mw-chip/mw-chip.css
@@ -34,7 +34,6 @@
 
 /* hover */
 .chip:hover:not(.disabled) {
-  /* FIXME: fg-hover doesn't currently exist */
   color: var(--mw-component-chips-color-fg-hover);
   background: var(--mw-component-chips-color-bg-hover);
 }
@@ -78,7 +77,7 @@
 .chip:active:not(.selected):not(.disabled) {
   color: var(--mw-component-chips-color-fg-default);
   background: var(--mw-component-chips-color-bg-pressed);
-
+  box-shadow: inset 0 0 0 var(--mw-component-chips-border-width-default) var(--mw-component-chips-color-border-default);
 }
 
 /* disabled */

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-dropdown/mw-dropdown.tsx b/mwui-stencil/src/components/mw-dropdown/mw-dropdown.tsx
@@ -56,7 +56,7 @@ export class MwDropdown {
   @Listen("mwMenuItemClick")
   clickEmitterHandler(event): void {
     this.value = event.target.getAttribute("value");
-    this.valueLabel = event.target.getAttribute("title");
+    this.valueLabel = event.target.getAttribute("text");
   }
   @Listen("mwPopoverOpen")
   stateEmitterHandler(event): void {
@@ -94,7 +94,6 @@ export class MwDropdown {
         <div class="wrapper">
           <div class={{ "dropdown": true, "inline": this.inline, "has-error": this.hasError, "disabled": this.disabled }}>
             <mw-label name={this.name} label={this.label} required={this.required}></mw-label>
-
             <mw-popover noPadding={true} closeOnClick={true} open={this.isDropdownOpen}>
               <div slot="anchor" onClick={this.onFocus} class={{ "input": true, "has-error": this.hasError, "disabled": this.disabled }}>
                 <span

diff --git a/mwui-stencil/src/components/mw-icon/mw-icon.css b/mwui-stencil/src/components/mw-icon/mw-icon.css
diff --git a/mwui-stencil/src/components/mw-icon/mw-icon.scss b/mwui-stencil/src/components/mw-icon/mw-icon.scss
@@ -0,0 +1,32 @@
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
+
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &.x-small {
+    width: var(--mw-component-size-avatars-icon-xs);
+    height: var(--mw-component-size-avatars-icon-xs);
+  }
+
+  &.small {
+    width: var(--mw-component-size-avatars-icon-sm);
+    height: var(--mw-component-size-avatars-icon-sm);
+  }
+
+  &.medium {
+    width: var(--mw-component-size-avatars-icon-md);
+    height: var(--mw-component-size-avatars-icon-md);
+  }
+
+  &.large {
+    width: var(--mw-component-size-avatars-icon-lg);
+    height: var(--mw-component-size-avatars-icon-lg);
+  }
+
+  &.x-large {
+    width: var(--mw-component-size-avatars-icon-xl);
+    height: var(--mw-component-size-avatars-icon-xl);
+  }
+}
diff --git a/mwui-stencil/src/components/mw-icon/mw-icon.tsx b/mwui-stencil/src/components/mw-icon/mw-icon.tsx
@@ -26,7 +26,7 @@ const getFontSize = (size: Size): string =>
 @Component({
   assetsDirs: ["./assets"],
   tag: "mw-icon",
-  styleUrl: "mw-icon.css",
+  styleUrl: "mw-icon.scss",
   shadow: true,
 })
 export class MwIcon {

diff --git a/mwui-stencil/src/components/mw-menu-item/mw-menu-item.stories.ts b/mwui-stencil/src/components/mw-menu-item/mw-menu-item.stories.ts
@@ -4,11 +4,11 @@ export default {
 };
 
 const DefaultTemplate = args => `
-<mw-menu-item title="${args.title}" subtitle="${args.subtitle}" disabled="${args.disabled}" selected="${args.selected}"></mw-menu-item>`;
+<mw-menu-item text="${args.text}" subtitle="${args.subtitle}" disabled="${args.disabled}" selected="${args.selected}"></mw-menu-item>`;
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {
-  title: "Title",
+  text: "Title",
   subtitle: "Subtitle",
   disabled: false,
   selected: false,

diff --git a/mwui-stencil/src/components/mw-modal-footer/mw-modal-footer.spec.tsx b/mwui-stencil/src/components/mw-modal-footer/mw-modal-footer.spec.tsx
@@ -1,7 +1,7 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { MwModalFooter } from "./mw-modal-footer";
 import { h } from "@stencil/core";
-import { MwButton } from "../mw-button/mw-button.component";
+import { MwButton } from "../mw-button/mw-button";
 
 describe("GIVEN MwModalFooter", () => {
   const setup = async () => {

diff --git a/mwui-stencil/src/components/mw-modal/mw-modal.spec.tsx b/mwui-stencil/src/components/mw-modal/mw-modal.spec.tsx
@@ -1,7 +1,7 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { MwModal } from "./mw-modal";
 import { h } from "@stencil/core";
-import { MwButton } from "../mw-button/mw-button.component";
+import { MwButton } from "../mw-button/mw-button";
 
 describe("GIVEN MwModal", () => {
   const setup = async (

diff --git a/mwui-stencil/src/components/mw-tab/mw-tab.css b/mwui-stencil/src/components/mw-tab/mw-tab.css
@@ -31,8 +31,12 @@
   color: var(--mw-component-tabs-fg-selected);
   border-bottom: var(--mw-component-divider-border-width-default) solid var(--mw-component-tabs-fg-selected);
 }
-.mw-tab:active {
-  /* TODO: --mw-component-borders.scss-focused muss in mehrere Tokens aufgeteilt werden */
+.mw-tab:not(.selected):not(:disabled):active {
+  background: var(--mw-component-tabs-bg-pressed) !important;
+}
+.mw-tab:focus {
+  /* TODO: --mw-component-borders-focused muss in mehrere Tokens aufgeteilt werden */
+  border: 2px solid var(--mw-component-tabs-fg-selected);
 }
 .mw-tab:disabled {
   cursor: unset;

diff --git a/mwui-stencil/src/components/mw-tab/mw-tab.tsx b/mwui-stencil/src/components/mw-tab/mw-tab.tsx
@@ -27,7 +27,7 @@ export class MwTab {
     return (
       <Host>
         <button disabled={this.disabled} class={`mw-tab ${this.icon && this.label ? "label-with-icon" : ""} ${this.selected ? "selected" : ""}`}>
-          {this.icon && <mw-icon icon={this.icon} size="small"></mw-icon>}
+          {this.icon && <mw-icon icon={this.icon} size="medium"></mw-icon>}
           {this.label}
         </button>
       </Host>