Merge branch 'main' into spright-chat-input-spec

Author: jattasNI

package-lock.json

@@ -45,6 +45,9 @@
     "packages/nimble-tokens",
     "packages/nimble-components",
     "packages/spright-components",
+    "packages/react-workspace/nimble-react",
+    "packages/react-workspace/spright-react",
+    "packages/react-workspace/react-client-app",
     "packages/storybook",
     "packages/angular-workspace",
     "packages/angular-workspace/nimble-angular",

package.json

@@ -1,6 +1,51 @@
 {
   "name": "@ni/nimble-angular",
   "entries": [
+    {
+      "date": "Thu, 29 May 2025 01:50:59 GMT",
+      "version": "30.3.1",
+      "tag": "@ni/nimble-angular_v30.3.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-angular",
+            "comment": "Bump @ni/nimble-components to v33.8.1",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 27 May 2025 23:07:08 GMT",
+      "version": "30.3.0",
+      "tag": "@ni/nimble-angular_v30.3.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "[email protected]",
+            "package": "@ni/nimble-angular",
+            "commit": "f0b7dc3cf5ba1326de7f57147b228553df081e36",
+            "comment": "Update nimble-select, nimble-combobox, nimble-text-area, nimble-number-field, and nimble-text-field to support appearance-readonly and full-bleed"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 23 May 2025 21:40:15 GMT",
+      "version": "30.2.1",
+      "tag": "@ni/nimble-angular_v30.2.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-angular",
+            "comment": "Bump @ni/nimble-components to v33.8.0",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 20 May 2025 23:06:06 GMT",
       "version": "30.2.0",

packages/angular-workspace/nimble-angular/CHANGELOG.json

@@ -1,9 +1,33 @@
 # Change Log - @ni/nimble-angular
 
-<!-- This log was last generated on Tue, 20 May 2025 23:06:06 GMT and should not be manually modified. -->
+<!-- This log was last generated on Thu, 29 May 2025 01:50:59 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 30.3.1
+
+Thu, 29 May 2025 01:50:59 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v33.8.1
+
+## 30.3.0
+
+Tue, 27 May 2025 23:07:08 GMT
+
+### Minor changes
+
+- Update nimble-select, nimble-combobox, nimble-text-area, nimble-number-field, and nimble-text-field to support appearance-readonly and full-bleed ([ni/nimble@f0b7dc3](https://github.com/ni/nimble/commit/f0b7dc3cf5ba1326de7f57147b228553df081e36))
+
+## 30.2.1
+
+Fri, 23 May 2025 21:40:15 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v33.8.0
+
 ## 30.2.0
 
 Tue, 20 May 2025 23:06:06 GMT

packages/angular-workspace/nimble-angular/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-angular",
-  "version": "30.2.0",
+  "version": "30.3.1",
   "description": "Angular components for the NI Nimble Design System",
   "scripts": {
     "invoke-publish": "npm run invoke-publish:setup && cd ../dist/nimble-angular && npm publish",
@@ -32,7 +32,7 @@
     "@angular/forms": "^18.2.13",
     "@angular/localize": "^18.2.13",
     "@angular/router": "^18.2.13",
-    "@ni/nimble-components": "^33.7.0"
+    "@ni/nimble-components": "^33.8.1"
   },
   "dependencies": {
     "tslib": "^2.2.0"

packages/angular-workspace/nimble-angular/package.json

@@ -83,5 +83,21 @@ export class NimbleComboboxDirective {
         this.renderer.setProperty(this.elementRef.nativeElement, 'requiredVisible', toBooleanProperty(value));
     }
 
+    public get appearanceReadOnly(): boolean {
+        return this.elementRef.nativeElement.appearanceReadOnly;
+    }
+
+    @Input('appearance-readonly') public set appearanceReadOnly(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'appearanceReadOnly', toBooleanProperty(value));
+    }
+
+    public get fullBleed(): boolean {
+        return this.elementRef.nativeElement.fullBleed;
+    }
+
+    @Input('full-bleed') public set fullBleed(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'fullBleed', toBooleanProperty(value));
+    }
+
     public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef<Combobox>) {}
 }

packages/angular-workspace/nimble-angular/src/directives/combobox/nimble-combobox.directive.ts

@@ -101,6 +101,28 @@ describe('Nimble combobox', () => {
             expect(directive.requiredVisible).toBeTrue();
             expect(nativeElement.requiredVisible).toBeTrue();
         });
+
+        it('has expected defaults for appearanceReadOnly', () => {
+            expect(directive.appearanceReadOnly).toBeFalse();
+            expect(nativeElement.appearanceReadOnly).toBeFalse();
+        });
+
+        it('can use the directive to set appearanceReadOnly', () => {
+            directive.appearanceReadOnly = true;
+            expect(directive.appearanceReadOnly).toBeTrue();
+            expect(nativeElement.appearanceReadOnly).toBeTrue();
+        });
+
+        it('has expected defaults for fullBleed', () => {
+            expect(directive.fullBleed).toBeFalse();
+            expect(nativeElement.fullBleed).toBeFalse();
+        });
+
+        it('can use the directive to set fullBleed', () => {
+            directive.fullBleed = true;
+            expect(directive.fullBleed).toBeTrue();
+            expect(nativeElement.fullBleed).toBeTrue();
+        });
     });
 
     describe('with template string values', () => {
@@ -115,6 +137,8 @@ describe('Nimble combobox', () => {
                     error-visible
                     open
                     required-visible
+                    appearance-readonly
+                    full-bleed
                 >
                 </nimble-combobox>`
         })
@@ -177,6 +201,16 @@ describe('Nimble combobox', () => {
             expect(directive.requiredVisible).toBeTrue();
             expect(nativeElement.requiredVisible).toBeTrue();
         });
+
+        it('will use template string values for appearanceReadOnly', () => {
+            expect(directive.appearanceReadOnly).toBeTrue();
+            expect(nativeElement.appearanceReadOnly).toBeTrue();
+        });
+
+        it('will use template string values for fullBleed', () => {
+            expect(directive.fullBleed).toBeTrue();
+            expect(nativeElement.fullBleed).toBeTrue();
+        });
     });
 
     describe('with property bound values', () => {
@@ -191,6 +225,8 @@ describe('Nimble combobox', () => {
                     [error-visible]="errorVisible"
                     [open]="open"
                     [required-visible]="requiredVisible"
+                    [appearance-readonly]="appearanceReadOnly"
+                    [full-bleed]="fullBleed"
                 >
                 </nimble-combobox>
             `
@@ -206,6 +242,8 @@ describe('Nimble combobox', () => {
             public errorVisible = false;
             public open = false;
             public requiredVisible = false;
+            public appearanceReadOnly = false;
+            public fullBleed = false;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -311,6 +349,28 @@ describe('Nimble combobox', () => {
             expect(directive.requiredVisible).toBeTrue();
             expect(nativeElement.requiredVisible).toBeTrue();
         });
+
+        it('can be configured with property binding for appearanceReadOnly', () => {
+            expect(directive.appearanceReadOnly).toBeFalse();
+            expect(nativeElement.appearanceReadOnly).toBeFalse();
+
+            fixture.componentInstance.appearanceReadOnly = true;
+            fixture.detectChanges();
+
+            expect(directive.appearanceReadOnly).toBeTrue();
+            expect(nativeElement.appearanceReadOnly).toBeTrue();
+        });
+
+        it('can be configured with property binding for fullBleed', () => {
+            expect(directive.fullBleed).toBeFalse();
+            expect(nativeElement.fullBleed).toBeFalse();
+
+            fixture.componentInstance.fullBleed = true;
+            fixture.detectChanges();
+
+            expect(directive.fullBleed).toBeTrue();
+            expect(nativeElement.fullBleed).toBeTrue();
+        });
     });
 
     describe('with attribute bound values', () => {
@@ -325,6 +385,8 @@ describe('Nimble combobox', () => {
                     [attr.error-visible]="errorVisible"
                     [attr.open]="open"
                     [attr.required-visible]="requiredVisible"
+                    [attr.appearance-readonly]="appearanceReadOnly"
+                    [attr.full-bleed]="fullBleed"
                 >
                 </nimble-combobox>
             `
@@ -340,6 +402,8 @@ describe('Nimble combobox', () => {
             public errorVisible: BooleanValueOrAttribute = null;
             public open: BooleanValueOrAttribute = null;
             public requiredVisible: BooleanValueOrAttribute = null;
+            public appearanceReadOnly: BooleanValueOrAttribute = null;
+            public fullBleed: BooleanValueOrAttribute = null;
         }
 
         let fixture: ComponentFixture<TestHostComponent>;
@@ -445,6 +509,28 @@ describe('Nimble combobox', () => {
             expect(directive.requiredVisible).toBeTrue();
             expect(nativeElement.requiredVisible).toBeTrue();
         });
+
+        it('can be configured with attribute binding for appearanceReadOnly', () => {
+            expect(directive.appearanceReadOnly).toBeFalse();
+            expect(nativeElement.appearanceReadOnly).toBeFalse();
+
+            fixture.componentInstance.appearanceReadOnly = '';
+            fixture.detectChanges();
+
+            expect(directive.appearanceReadOnly).toBeTrue();
+            expect(nativeElement.appearanceReadOnly).toBeTrue();
+        });
+
+        it('can be configured with attribute binding for fullBleed', () => {
+            expect(directive.fullBleed).toBeFalse();
+            expect(nativeElement.fullBleed).toBeFalse();
+
+            fixture.componentInstance.fullBleed = '';
+            fixture.detectChanges();
+
+            expect(directive.fullBleed).toBeTrue();
+            expect(nativeElement.fullBleed).toBeTrue();
+        });
     });
 
     describe('can access value through directive', () => {

packages/angular-workspace/nimble-angular/src/directives/combobox/tests/nimble-combobox.directive.spec.ts

@@ -96,5 +96,21 @@ export class NimbleNumberFieldDirective {
         this.renderer.setProperty(this.elementRef.nativeElement, 'requiredVisible', toBooleanProperty(value));
     }
 
+    public get appearanceReadOnly(): boolean {
+        return this.elementRef.nativeElement.appearanceReadOnly;
+    }
+
+    @Input('appearance-readonly') public set appearanceReadOnly(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'appearanceReadOnly', toBooleanProperty(value));
+    }
+
+    public get fullBleed(): boolean {
+        return this.elementRef.nativeElement.fullBleed;
+    }
+
+    @Input('full-bleed') public set fullBleed(value: BooleanValueOrAttribute) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'fullBleed', toBooleanProperty(value));
+    }
+
     public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef<NumberField>) {}
 }