From ab7052f0b11cef933f8aeaa292eb09e046cd90b7 Mon Sep 17 00:00:00 2001 From: Vivin Krishna R N <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Mon, 1 Jun 2026 16:09:42 +0530 Subject: [PATCH 1/5] Add work order calendar border theme token --- change/@ni-nimble-components-work-order-border-token.json | 7 +++++++ .../src/theme-provider/design-token-comments.ts | 1 + .../src/theme-provider/design-token-names.ts | 1 + .../src/theme-provider/design-token-values.ts | 1 + .../nimble-components/src/theme-provider/design-tokens.ts | 1 + 5 files changed, 11 insertions(+) create mode 100644 change/@ni-nimble-components-work-order-border-token.json diff --git a/change/@ni-nimble-components-work-order-border-token.json b/change/@ni-nimble-components-work-order-border-token.json new file mode 100644 index 0000000000..4c24e0c99b --- /dev/null +++ b/change/@ni-nimble-components-work-order-border-token.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add a theme-aware calendar event border token for work order events", + "packageName": "@ni/nimble-components", + "email": "github-copilot@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/nimble-components/src/theme-provider/design-token-comments.ts b/packages/nimble-components/src/theme-provider/design-token-comments.ts index 67899c0198..3f1ecdd0dc 100644 --- a/packages/nimble-components/src/theme-provider/design-token-comments.ts +++ b/packages/nimble-components/src/theme-provider/design-token-comments.ts @@ -359,6 +359,7 @@ export const comments: { readonly [key in TokenName]: string } = { calendarEventBackgroundHoverTransportOrderColor: 'Color while hovering transport order calendar events', calendarEventBorderTransportOrderColor: 'Border color for transport order calendar events', + calendarEventBorderWorkOrderColor: 'Border color for work order calendar events', calendarEventBackgroundAggregateAvailabilityColor: 'Background color for aggregate availability calendar events', calendarEventBorderAggregateAvailabilityColor: 'Border color for aggregate availability calendar events' diff --git a/packages/nimble-components/src/theme-provider/design-token-names.ts b/packages/nimble-components/src/theme-provider/design-token-names.ts index a41ed641ee..204b99133c 100644 --- a/packages/nimble-components/src/theme-provider/design-token-names.ts +++ b/packages/nimble-components/src/theme-provider/design-token-names.ts @@ -299,6 +299,7 @@ export const tokenNames: { readonly [key in TokenName]: string } = { calendarEventBackgroundHoverTransportOrderColor: 'calendar-event-background-hover-transport-order-color', calendarEventBorderTransportOrderColor: 'calendar-event-border-transport-order-color', + calendarEventBorderWorkOrderColor: 'calendar-event-border-work-order-color', calendarEventBackgroundAggregateAvailabilityColor: 'calendar-event-background-aggregate-availability-color', calendarEventBorderAggregateAvailabilityColor: 'calendar-event-border-aggregate-availability-color' diff --git a/packages/nimble-components/src/theme-provider/design-token-values.ts b/packages/nimble-components/src/theme-provider/design-token-values.ts index 184b5b66d8..2d70058ec7 100644 --- a/packages/nimble-components/src/theme-provider/design-token-values.ts +++ b/packages/nimble-components/src/theme-provider/design-token-values.ts @@ -250,6 +250,7 @@ export const tokenValues = { calendarEventBackgroundTransportOrderColor: createThemeColor(BrownLight10, BrownDark10, BrownDark10), calendarEventBackgroundHoverTransportOrderColor: createThemeColor(BrownLight20, BrownDark20, BrownDark20), calendarEventBorderTransportOrderColor: createThemeColor(BrownLight, BrownDark, BrownDark), + calendarEventBorderWorkOrderColor: createThemeColor(NiIndigo, NiIndigoDark2, NiIndigoDark2), calendarEventBackgroundAggregateAvailabilityColor: createThemeColor(Black91V10, Black82, Black82), calendarEventBorderAggregateAvailabilityColor: hexToRgbaCssThemeColor(createThemeColor(Black91, Black82V100, Black82V100), 0.5, 1, 1), controlHeight: '32px', diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts index fc9e7d0183..2988dc10e7 100644 --- a/packages/nimble-components/src/theme-provider/design-tokens.ts +++ b/packages/nimble-components/src/theme-provider/design-tokens.ts @@ -86,6 +86,7 @@ export const calendarEventBorderReservationColor = createThemeColorToken(tokenNa export const calendarEventBackgroundTransportOrderColor = createThemeColorToken(tokenNames.calendarEventBackgroundTransportOrderColor, tokenValues.calendarEventBackgroundTransportOrderColor); export const calendarEventBackgroundHoverTransportOrderColor = createThemeColorToken(tokenNames.calendarEventBackgroundHoverTransportOrderColor, tokenValues.calendarEventBackgroundHoverTransportOrderColor); export const calendarEventBorderTransportOrderColor = createThemeColorToken(tokenNames.calendarEventBorderTransportOrderColor, tokenValues.calendarEventBorderTransportOrderColor); +export const calendarEventBorderWorkOrderColor = createThemeColorToken(tokenNames.calendarEventBorderWorkOrderColor, tokenValues.calendarEventBorderWorkOrderColor); export const calendarEventBackgroundAggregateAvailabilityColor = createThemeColorToken(tokenNames.calendarEventBackgroundAggregateAvailabilityColor, tokenValues.calendarEventBackgroundAggregateAvailabilityColor); export const calendarEventBorderAggregateAvailabilityColor = createThemeColorToken(tokenNames.calendarEventBorderAggregateAvailabilityColor, tokenValues.calendarEventBorderAggregateAvailabilityColor); // #endregion From 5495417cc5451dd8f0994ce5abf063d685781ad9 Mon Sep 17 00:00:00 2001 From: Vivin Krishna R N <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Mon, 1 Jun 2026 16:16:32 +0530 Subject: [PATCH 2/5] Add spright work item square list cog icon --- ...ght-angular-work-item-square-list-cog.json | 7 ++++ ...-components-work-item-square-list-cog.json | 7 ++++ .../work-item-square-list-cog/ng-package.json | 6 ++++ ...con-work-item-square-list-cog.directive.ts | 16 ++++++++++ .../src/icon-base/tests/icon-metadata.ts | 3 ++ .../spright-components/src/icons/all-icons.ts | 1 + .../icons/work-item-square-list-cog/index.ts | 32 +++++++++++++++++++ .../icons/work-item-square-list-cog/styles.ts | 11 +++++++ 8 files changed, 83 insertions(+) create mode 100644 change/@ni-spright-angular-work-item-square-list-cog.json create mode 100644 change/@ni-spright-components-work-item-square-list-cog.json create mode 100644 packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/ng-package.json create mode 100644 packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/spright-icon-work-item-square-list-cog.directive.ts create mode 100644 packages/spright-components/src/icons/work-item-square-list-cog/index.ts create mode 100644 packages/spright-components/src/icons/work-item-square-list-cog/styles.ts diff --git a/change/@ni-spright-angular-work-item-square-list-cog.json b/change/@ni-spright-angular-work-item-square-list-cog.json new file mode 100644 index 0000000000..685c0a8e5a --- /dev/null +++ b/change/@ni-spright-angular-work-item-square-list-cog.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add Angular standalone wrapper for spright work item square list cog icon", + "packageName": "@ni/spright-angular", + "email": "github-copilot@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@ni-spright-components-work-item-square-list-cog.json b/change/@ni-spright-components-work-item-square-list-cog.json new file mode 100644 index 0000000000..2cc8b97e7f --- /dev/null +++ b/change/@ni-spright-components-work-item-square-list-cog.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add spright work item square list cog icon using work-order border theme token", + "packageName": "@ni/spright-components", + "email": "github-copilot@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/ng-package.json b/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/ng-package.json new file mode 100644 index 0000000000..f372f60b7c --- /dev/null +++ b/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "spright-icon-work-item-square-list-cog.directive.ts" + } +} diff --git a/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/spright-icon-work-item-square-list-cog.directive.ts b/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/spright-icon-work-item-square-list-cog.directive.ts new file mode 100644 index 0000000000..deb4253a0f --- /dev/null +++ b/packages/angular-workspace/spright-angular/icons/work-item-square-list-cog/spright-icon-work-item-square-list-cog.directive.ts @@ -0,0 +1,16 @@ +import { Directive } from '@angular/core'; +import { type IconWorkItemSquareListCog, iconWorkItemSquareListCogTag } from '@ni/spright-components/dist/esm/icons/work-item-square-list-cog'; +import '@ni/spright-components/dist/esm/icons/work-item-square-list-cog'; +import { SprightIconBaseDirective } from '@ni/spright-angular/icon-base'; + +export { type IconWorkItemSquareListCog, iconWorkItemSquareListCogTag }; + +/** + * Spright square list cog icon directive for work order items + */ +@Directive({ + selector: 'spright-icon-work-item-square-list-cog', + standalone: true +}) +export class SprightIconWorkItemSquareListCogDirective extends SprightIconBaseDirective { +} diff --git a/packages/spright-components/src/icon-base/tests/icon-metadata.ts b/packages/spright-components/src/icon-base/tests/icon-metadata.ts index 936e6e01be..977dbba280 100644 --- a/packages/spright-components/src/icon-base/tests/icon-metadata.ts +++ b/packages/spright-components/src/icon-base/tests/icon-metadata.ts @@ -46,6 +46,9 @@ export const iconMetadata: { IconWorkItemRectangleCheckLines: { tags: ['testing', 'verification', 'quality assurance', 'checklist'] }, + IconWorkItemSquareListCog: { + tags: ['work order', 'tasks', 'list', 'planning', 'operations'] + }, IconWorkItemUserHelmetSafety: { tags: ['job', 'work', 'worker', 'operator', 'technician', 'safety'] }, diff --git a/packages/spright-components/src/icons/all-icons.ts b/packages/spright-components/src/icons/all-icons.ts index ff9abaf5c5..22ca695dda 100644 --- a/packages/spright-components/src/icons/all-icons.ts +++ b/packages/spright-components/src/icons/all-icons.ts @@ -10,5 +10,6 @@ export { IconWorkItemCalendarWeek } from './work-item-calendar-week'; export { IconWorkItemCalipers } from './work-item-calipers'; export { IconWorkItemForklift } from './work-item-forklift'; export { IconWorkItemRectangleCheckLines } from './work-item-rectangle-check-lines'; +export { IconWorkItemSquareListCog } from './work-item-square-list-cog'; export { IconWorkItemUserHelmetSafety } from './work-item-user-helmet-safety'; export { IconWorkItemWrenchHammer } from './work-item-wrench-hammer'; diff --git a/packages/spright-components/src/icons/work-item-square-list-cog/index.ts b/packages/spright-components/src/icons/work-item-square-list-cog/index.ts new file mode 100644 index 0000000000..676640a93b --- /dev/null +++ b/packages/spright-components/src/icons/work-item-square-list-cog/index.ts @@ -0,0 +1,32 @@ +import { squareListCog16X16 } from '@ni/nimble-tokens/dist/icons/js'; +import { IconSvg } from '@ni/nimble-components/dist/esm/icon-svg'; +import { template } from '@ni/nimble-components/dist/esm/icon-svg/template'; +import { DesignSystem } from '@ni/fast-foundation'; +import { styles } from './styles'; + +declare global { + interface HTMLElementTagNameMap { + 'spright-icon-work-item-square-list-cog': IconWorkItemSquareListCog; + } +} + +/** + * Spright square list cog icon for work order items + */ +export class IconWorkItemSquareListCog extends IconSvg { + public constructor() { + super(squareListCog16X16); + } +} + +const sprightIconWorkItemSquareListCog = IconWorkItemSquareListCog.compose({ + baseName: 'icon-work-item-square-list-cog', + template, + styles +}); + +DesignSystem.getOrCreate() + .withPrefix('spright') + .register(sprightIconWorkItemSquareListCog()); + +export const iconWorkItemSquareListCogTag = 'spright-icon-work-item-square-list-cog'; diff --git a/packages/spright-components/src/icons/work-item-square-list-cog/styles.ts b/packages/spright-components/src/icons/work-item-square-list-cog/styles.ts new file mode 100644 index 0000000000..2598d3b8e3 --- /dev/null +++ b/packages/spright-components/src/icons/work-item-square-list-cog/styles.ts @@ -0,0 +1,11 @@ +import { css } from '@ni/fast-element'; +import { calendarEventBorderWorkOrderColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens'; +import { styles as iconSvgStyles } from '@ni/nimble-components/dist/esm/icon-svg/styles'; + +export const styles = css` + ${iconSvgStyles} + + .icon svg { + fill: ${calendarEventBorderWorkOrderColor}; + } +`; From 33457becf346f2ce2035edfb44b3ee0f96e5f5df Mon Sep 17 00:00:00 2001 From: Vivin Krishna R N <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Mon, 1 Jun 2026 17:25:33 +0530 Subject: [PATCH 3/5] Change files --- ...le-components-57fc36e8-7ea1-4e57-8eb5-301d41ed8976.json | 7 +++++++ change/@ni-nimble-components-work-order-border-token.json | 7 ------- ...ight-angular-acdc1b80-e7d4-4bf0-af8b-35b4926429e7.json} | 2 +- ...t-components-0626309b-5848-495b-bb0f-fc3bd50e54da.json} | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) create mode 100644 change/@ni-nimble-components-57fc36e8-7ea1-4e57-8eb5-301d41ed8976.json delete mode 100644 change/@ni-nimble-components-work-order-border-token.json rename change/{@ni-spright-angular-work-item-square-list-cog.json => @ni-spright-angular-acdc1b80-e7d4-4bf0-af8b-35b4926429e7.json} (74%) rename change/{@ni-spright-components-work-item-square-list-cog.json => @ni-spright-components-0626309b-5848-495b-bb0f-fc3bd50e54da.json} (74%) diff --git a/change/@ni-nimble-components-57fc36e8-7ea1-4e57-8eb5-301d41ed8976.json b/change/@ni-nimble-components-57fc36e8-7ea1-4e57-8eb5-301d41ed8976.json new file mode 100644 index 0000000000..7e5a93c820 --- /dev/null +++ b/change/@ni-nimble-components-57fc36e8-7ea1-4e57-8eb5-301d41ed8976.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add a theme-aware border color token for work order", + "packageName": "@ni/nimble-components", + "email": "123377523+vivinkrishna-ni@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@ni-nimble-components-work-order-border-token.json b/change/@ni-nimble-components-work-order-border-token.json deleted file mode 100644 index 4c24e0c99b..0000000000 --- a/change/@ni-nimble-components-work-order-border-token.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "Add a theme-aware calendar event border token for work order events", - "packageName": "@ni/nimble-components", - "email": "github-copilot@users.noreply.github.com", - "dependentChangeType": "patch" -} diff --git a/change/@ni-spright-angular-work-item-square-list-cog.json b/change/@ni-spright-angular-acdc1b80-e7d4-4bf0-af8b-35b4926429e7.json similarity index 74% rename from change/@ni-spright-angular-work-item-square-list-cog.json rename to change/@ni-spright-angular-acdc1b80-e7d4-4bf0-af8b-35b4926429e7.json index 685c0a8e5a..399c0698e3 100644 --- a/change/@ni-spright-angular-work-item-square-list-cog.json +++ b/change/@ni-spright-angular-acdc1b80-e7d4-4bf0-af8b-35b4926429e7.json @@ -2,6 +2,6 @@ "type": "minor", "comment": "Add Angular standalone wrapper for spright work item square list cog icon", "packageName": "@ni/spright-angular", - "email": "github-copilot@users.noreply.github.com", + "email": "123377523+vivinkrishna-ni@users.noreply.github.com", "dependentChangeType": "patch" } diff --git a/change/@ni-spright-components-work-item-square-list-cog.json b/change/@ni-spright-components-0626309b-5848-495b-bb0f-fc3bd50e54da.json similarity index 74% rename from change/@ni-spright-components-work-item-square-list-cog.json rename to change/@ni-spright-components-0626309b-5848-495b-bb0f-fc3bd50e54da.json index 2cc8b97e7f..2168a091ed 100644 --- a/change/@ni-spright-components-work-item-square-list-cog.json +++ b/change/@ni-spright-components-0626309b-5848-495b-bb0f-fc3bd50e54da.json @@ -2,6 +2,6 @@ "type": "minor", "comment": "Add spright work item square list cog icon using work-order border theme token", "packageName": "@ni/spright-components", - "email": "github-copilot@users.noreply.github.com", + "email": "123377523+vivinkrishna-ni@users.noreply.github.com", "dependentChangeType": "patch" } From e4d2f37d0b853c32912943480bf62ecbf27c98fa Mon Sep 17 00:00:00 2001 From: Vivin Krishna R N <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Mon, 1 Jun 2026 17:39:39 +0530 Subject: [PATCH 4/5] Update the token value --- .../nimble-components/src/theme-provider/design-token-values.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/theme-provider/design-token-values.ts b/packages/nimble-components/src/theme-provider/design-token-values.ts index 2d70058ec7..cda07d7f8b 100644 --- a/packages/nimble-components/src/theme-provider/design-token-values.ts +++ b/packages/nimble-components/src/theme-provider/design-token-values.ts @@ -250,7 +250,7 @@ export const tokenValues = { calendarEventBackgroundTransportOrderColor: createThemeColor(BrownLight10, BrownDark10, BrownDark10), calendarEventBackgroundHoverTransportOrderColor: createThemeColor(BrownLight20, BrownDark20, BrownDark20), calendarEventBorderTransportOrderColor: createThemeColor(BrownLight, BrownDark, BrownDark), - calendarEventBorderWorkOrderColor: createThemeColor(NiIndigo, NiIndigoDark2, NiIndigoDark2), + calendarEventBorderWorkOrderColor: createThemeColor(NiIndigo, NiIndigo, NiIndigo), calendarEventBackgroundAggregateAvailabilityColor: createThemeColor(Black91V10, Black82, Black82), calendarEventBorderAggregateAvailabilityColor: hexToRgbaCssThemeColor(createThemeColor(Black91, Black82V100, Black82V100), 0.5, 1, 1), controlHeight: '32px', From 86e0eb321669250bb1b08aaa255a2b49bc8bd468 Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Tue, 2 Jun 2026 06:20:52 +0530 Subject: [PATCH 5/5] Remove nimble component change file --- ...le-components-57fc36e8-7ea1-4e57-8eb5-301d41ed8976.json | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 change/@ni-nimble-components-57fc36e8-7ea1-4e57-8eb5-301d41ed8976.json diff --git a/change/@ni-nimble-components-57fc36e8-7ea1-4e57-8eb5-301d41ed8976.json b/change/@ni-nimble-components-57fc36e8-7ea1-4e57-8eb5-301d41ed8976.json deleted file mode 100644 index 7e5a93c820..0000000000 --- a/change/@ni-nimble-components-57fc36e8-7ea1-4e57-8eb5-301d41ed8976.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "minor", - "comment": "Add a theme-aware border color token for work order", - "packageName": "@ni/nimble-components", - "email": "123377523+vivinkrishna-ni@users.noreply.github.com", - "dependentChangeType": "patch" -}