added focus events

updated inline button styles
aws · Jun 26, 2024 · 85713c6 · 85713c6
1 parent e383f1a
commit 85713c6
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 35 deletions.
diff --git a/example/src/main.ts b/example/src/main.ts
@@ -62,6 +62,11 @@ export const createMynahUI = (initialData?: MynahUIDataModel): MynahUI => {
           id: 'multi',
           icon: MynahIcons.ELLIPSIS,
           items: [
+            {
+              id: 'custom-data-check',
+              text: 'Custom check',
+              icon: MynahIcons.MAGIC,
+            },
             {
               id: 'show-avatars',
               text: 'Show/Hide avatars',
@@ -92,6 +97,9 @@ export const createMynahUI = (initialData?: MynahUIDataModel): MynahUI => {
         },
       },
     },
+    onFocusStateChanged: (focusState:boolean) => {
+      Log(`MynahUI focus state changed: <b>${focusState.toString()}</b>`);
+    },
     onTabBarButtonClick: (tabId: string, buttonId: string) => {
       if (buttonId === 'clear') {
         mynahUI.updateStore(tabId, {
@@ -122,6 +130,8 @@ export const createMynahUI = (initialData?: MynahUIDataModel): MynahUI => {
         Object.keys(mynahUI.getAllTabs()).forEach(tabIdFromStore=>mynahUI.updateStore(tabIdFromStore, {
           showChatAvatars: showChatAvatars
         }));
+      } else if (buttonId === 'custom-data-check') {
+        // Use for custom temporary checks
       }
       Log(`Tab bar button clicked when tab ${tabId} is selected: <b>${buttonId}</b>`);
     },
@@ -490,7 +500,7 @@ export const createMynahUI = (initialData?: MynahUIDataModel): MynahUI => {
         {
           id: 'save-comment',
           text: 'Send',
-          status: 'info',
+          status: 'primary',
           waitMandatoryFormItems: true,
         },
         {

diff --git a/example/src/samples/sample-data.ts b/example/src/samples/sample-data.ts
@@ -356,7 +356,7 @@ _To send the form, mandatory items should be filled._`,
         {
             id: 'submit',
             text: 'Submit',
-            status: 'info',
+            status: 'primary',
         },
         {
             id: 'cancel-feedback',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@aws/mynah-ui",
   "displayName": "AWS Mynah UI",
-  "version": "4.14.0",
+  "version": "4.14.1",
   "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
   "publisher": "Amazon Web Services",
   "license": "Apache License 2.0",

diff --git a/src/components/chat-item/chat-item-buttons.ts b/src/components/chat-item/chat-item-buttons.ts
@@ -34,7 +34,8 @@ export class ChatItemButtonsWrapper {
         const actionItem = new Button({
           label: chatActionAction.text,
           icon: chatActionAction.icon != null ? new Icon({ icon: chatActionAction.icon }).render : undefined,
-          primary: chatActionAction.status !== undefined,
+          primary: chatActionAction.status === 'primary',
+          classNames: chatActionAction.status !== undefined ? [ `status-${chatActionAction.status}` ] : [],
           onClick: (e) => {
             if (props.formItems !== null) {
               props.formItems.disableAll();

diff --git a/src/helper/dom.ts b/src/helper/dom.ts
@@ -3,7 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { MynahPortalNames } from '../static';
+import { MynahEventNames, MynahPortalNames } from '../static';
+import { MynahUIGlobalEvents } from './events';
 import { AllowedTagsInCustomRenderer, AllowedAttributesInCustomRenderer } from './sanitize';
 
 /* eslint-disable @typescript-eslint/method-signature-style */
@@ -72,14 +73,43 @@ export interface ExtendedHTMLElement extends HTMLInputElement {
 
 export class DomBuilder {
   private static instance: DomBuilder;
+  private rootFocus: boolean;
   root: ExtendedHTMLElement;
   private portals: Record<string, ExtendedHTMLElement> = {};
 
   private constructor (rootSelector: string) {
     this.root = DS(rootSelector)[0] as ExtendedHTMLElement;
     this.extendDomFunctionality(this.root);
+    this.rootFocus = this.root.matches(':focus') ?? false;
+    this.attachRootFocusListeners();
   }
 
+  private readonly attachRootFocusListeners = (): void => {
+    this.root?.setAttribute('tabindex', '0');
+    this.root?.setAttribute('autofocus', 'true');
+    this.root?.style.setProperty('outline', 'none');
+    this.root?.addEventListener('focusin', this.onRootFocus, { capture: true });
+    window.addEventListener('blur', this.onRootBlur);
+  };
+
+  private readonly onRootFocus = (e: FocusEvent): void => {
+    if (!this.rootFocus) {
+      this.rootFocus = true;
+      MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.ROOT_FOCUS, { focusState: this.rootFocus });
+    }
+  };
+
+  private readonly onRootBlur = (e: FocusEvent): void => {
+    if (this.rootFocus) {
+      this.rootFocus = false;
+      MynahUIGlobalEvents.getInstance().dispatch(MynahEventNames.ROOT_FOCUS, { focusState: this.rootFocus });
+    }
+  };
+
+  public readonly setFocusToRoot = (): void => {
+    this.root?.focus();
+  };
+
   public static getInstance (rootSelector?: string): DomBuilder {
     if (!DomBuilder.instance) {
       DomBuilder.instance = new DomBuilder(rootSelector != null ? rootSelector : 'body');
@@ -91,14 +121,17 @@ export class DomBuilder {
   }
 
   setRoot = (rootSelector?: string): void => {
+    this.root.removeEventListener('focus', this.onRootFocus);
+    window.removeEventListener('blur', this.onRootBlur);
     this.root = this.extendDomFunctionality((DS(rootSelector ?? 'body')[0] ?? document.body) as HTMLElement);
+    this.attachRootFocusListeners();
   };
 
   addClass = function (this: ExtendedHTMLElement, className: string): ExtendedHTMLElement {
     if (className !== '') {
       this.classList.add(className);
       // eslint-disable-next-line @typescript-eslint/prefer-includes
-      if (this.builderObject.classNames?.indexOf(className) === -1) {
+      if (this.builderObject?.classNames?.indexOf(className) === -1) {
         this.builderObject.classNames = [ ...this.builderObject.classNames, className ];
       }
     }

diff --git a/src/main.ts b/src/main.ts
@@ -94,6 +94,7 @@ export interface MynahUIProps {
     messageId: string,
     eventId?: string) => void;
   onReady?: () => void;
+  onFocusStateChanged?: (focusState: boolean) => void;
   onVote?: (
     tabId: string,
     messageId: string,
@@ -534,6 +535,10 @@ export class MynahUI {
       }
     });
 
+    MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.ROOT_FOCUS, (data: {focusState: boolean}) => {
+      this.props.onFocusStateChanged?.(data.focusState);
+    });
+
     MynahUIGlobalEvents.getInstance().addListener(MynahEventNames.FILE_CLICK, (data) => {
       if (this.props.onFileClick !== undefined) {
         this.props.onFileClick(

diff --git a/src/static.ts b/src/static.ts
@@ -118,6 +118,7 @@ export interface MynahUITabStoreModel {
 export enum MynahEventNames {
   RESET_STORE = 'resetStore',
   FEEDBACK_SET = 'feedbackSet',
+  ROOT_FOCUS = 'rootFocusStateChange',
   CARD_VOTE = 'cardVote',
   SOURCE_LINK_CLICK = 'sourceLinkClick',
   INFO_LINK_CLICK = 'infoLinkClick',
@@ -244,7 +245,7 @@ export interface ChatItemAction extends ChatPrompt {
   pillText: string;
   disabled?: boolean;
   description?: string;
-  status?: 'info' | 'success' | 'warning' | 'error';
+  status?: 'primary' | 'info' | 'success' | 'warning' | 'error';
   icon?: MynahIcons;
 }
 export interface ChatItemButton {
@@ -254,7 +255,7 @@ export interface ChatItemButton {
   id: string;
   disabled?: boolean;
   description?: string;
-  status?: 'info' | 'success' | 'warning' | 'error';
+  status?: 'primary' | 'info' | 'success' | 'warning' | 'error';
   icon?: MynahIcons;
 }
 

diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
@@ -15,12 +15,29 @@ button.mynah-button {
     overflow: hidden;
     position: relative;
     transform: translate3d(0, 0, 0) scale(1.00001);
-    padding-left: var(--mynah-sizing-3);
-    padding-right: var(--mynah-sizing-3);
+    padding-left: var(--mynah-sizing-2);
+    padding-right: var(--mynah-sizing-2);
     gap: var(--mynah-sizing-2);
-    filter: brightness(0.9);
-    opacity: 0.85;
+    filter: brightness(0.925);
+    opacity: 1;
     line-height: var(--mynah-line-height);
+    margin-top: var(--mynah-border-width);
+    margin-bottom: var(--mynah-border-width);
+    &:after {
+        content: '';
+        pointer-events: none;
+        transition: var(--mynah-text-flow-transition);
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 125%;
+        height: 100%;
+        filter: brightness(1.65) saturate(0.65);
+        opacity: 0;
+        background-color: currentColor;
+        transform: translate3d(-100%, 0, 0);
+    }
     &.mynah-bottom-block-close-button {
         position: absolute;
         align-self: flex-end;
@@ -33,30 +50,19 @@ button.mynah-button {
         pointer-events: none;
     }
     &.mynah-button-secondary {
-        background-color: transparent;
-        color: inherit;
-        box-shadow: none;
-        opacity: 0.75;
-        height: var(--mynah-sizing-6);
-        padding-left: var(--mynah-sizing-1);
-        padding-right: var(--mynah-sizing-1);
-        border-radius: 0;
-        &:focus-visible,
-        &:hover {
-            opacity: 1;
-        }
-        &:active {
-            box-shadow: none;
-        }
+        background-color: rgba(0, 0, 0, 0);
+        color: currentColor;
+        box-sizing: border-box;
+        border: var(--mynah-border-width) solid rgba(0,0,0,0);
     }
+    &:active,
     &:focus-visible,
     &:hover {
         filter: brightness(1);
-        opacity: 1;
-    }
-    &:active {
-        filter: brightness(0.9);
-        opacity: 0.85;
+        &:after {
+            transform: translate3d(0%, 0, 0);
+            opacity: 0.2;
+        }
     }
     &.mynah-icon-button {
         width: var(--mynah-sizing-10);

diff --git a/src/styles/components/_form-input.scss b/src/styles/components/_form-input.scss
@@ -1,3 +1,4 @@
+@import '../variables';
 .mynah-form-input-wrapper {
     position: relative;
     display: flex;
@@ -117,7 +118,7 @@
                         }
                         &::after {
                             $edgeSpace: calc(0 * var(--mynah-border-width));
-                            content: "";
+                            content: '';
                             transition: inherit;
                             position: absolute;
                             top: $edgeSpace;
@@ -193,4 +194,14 @@
     padding-bottom: var(--mynah-sizing-1);
     justify-content: flex-end;
     align-items: center;
+
+    > .mynah-button.mynah-button-secondary {
+        border: var(--mynah-border-width) solid currentColor !important;
+        @each $status in $mynah-statuses {
+            &.status-#{$status} {
+                color: var(--mynah-color-status-#{$status});
+                border-color: var(--mynah-color-status-#{$status});
+            }
+        }
+    }
 }