diff --git a/change/@ni-nimble-angular-95b60d3c-bce1-46a4-a5a0-0c486f84843a.json b/change/@ni-nimble-angular-95b60d3c-bce1-46a4-a5a0-0c486f84843a.json new file mode 100644 index 0000000000..2e673e1adb --- /dev/null +++ b/change/@ni-nimble-angular-95b60d3c-bce1-46a4-a5a0-0c486f84843a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Internal change to icon pattern", + "packageName": "@ni/nimble-angular", + "email": "1588923+rajsite@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@ni-nimble-components-b60d4aa1-b360-468e-b13c-5a5dca16fa53.json b/change/@ni-nimble-components-b60d4aa1-b360-468e-b13c-5a5dca16fa53.json new file mode 100644 index 0000000000..b61b43618f --- /dev/null +++ b/change/@ni-nimble-components-b60d4aa1-b360-468e-b13c-5a5dca16fa53.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "SVGIcon proto", + "packageName": "@ni/nimble-components", + "email": "1588923+rajsite@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/angular-workspace/nimble-angular/build/generate-icons.mjs b/packages/angular-workspace/nimble-angular/build/generate-icons.mjs index dd8e46d91e..144c4a0bf7 100644 --- a/packages/angular-workspace/nimble-angular/build/generate-icons.mjs +++ b/packages/angular-workspace/nimble-angular/build/generate-icons.mjs @@ -91,7 +91,7 @@ export class ${moduleName} { } modulePath: moduleFilePath }); } -console.log(`Finshed writing ${directiveAndModulePaths.length} icon directive and module files`); +console.log(`Finished writing ${directiveAndModulePaths.length} icon directive and module files`); let barrelFileContents = `${generatedFilePrefix}\n`; for (const paths of directiveAndModulePaths) { diff --git a/packages/blazor-workspace/build/generate-icons.mjs b/packages/blazor-workspace/build/generate-icons.mjs index a6ecc76548..3f25490c60 100644 --- a/packages/blazor-workspace/build/generate-icons.mjs +++ b/packages/blazor-workspace/build/generate-icons.mjs @@ -46,4 +46,4 @@ for (const key of Object.keys(icons)) { const componentFilePath = path.resolve(iconsDirectory, componentFileName); fs.writeFileSync(componentFilePath, directiveFileContents, { encoding: 'utf-8' }); } -console.log('Finshed writing icon Razor component files'); +console.log('Finished writing icon Razor component files'); diff --git a/packages/nimble-components/build/generate-icons.mjs b/packages/nimble-components/build/generate-icons.mjs index b34677e777..41cf70d359 100644 --- a/packages/nimble-components/build/generate-icons.mjs +++ b/packages/nimble-components/build/generate-icons.mjs @@ -44,7 +44,7 @@ for (const key of Object.keys(icons)) { const componentFileContents = `${generatedFilePrefix} import { ${svgName} } from '@ni/nimble-tokens/dist/icons/js'; -import { Icon, registerIcon } from '../../icon-base'; +import { IconSvg, registerIconSvg } from '../../icon-svg'; declare global { interface HTMLElementTagNameMap { @@ -55,13 +55,13 @@ declare global { /** * The icon component for the '${iconName}' icon */ -export class ${className} extends Icon { +export class ${className} extends IconSvg { public constructor() { super(${svgName}); } } -registerIcon('${elementBaseName}', ${className}); +registerIconSvg('${elementBaseName}', ${className}); export const ${tagName} = '${elementName}'; `; @@ -72,7 +72,7 @@ export const ${tagName} = '${elementName}'; `export { ${className} } from './${directoryName}';\n` ); } -console.log(`Finshed writing ${fileCount} icon component files`); +console.log(`Finished writing ${fileCount} icon component files`); const allIconsFilePath = path.resolve(iconsDirectory, 'all-icons.ts'); console.log('Writing all-icons file'); diff --git a/packages/nimble-components/src/icon-base/index.ts b/packages/nimble-components/src/icon-base/index.ts index 90da606b6b..e1af84652a 100644 --- a/packages/nimble-components/src/icon-base/index.ts +++ b/packages/nimble-components/src/icon-base/index.ts @@ -1,14 +1,15 @@ import { attr } from '@ni/fast-element'; -import { DesignSystem, FoundationElement } from '@ni/fast-foundation'; -import type { NimbleIcon } from '@ni/nimble-tokens/dist/icons/js'; -import { template } from './template'; -import { styles } from './styles'; +import { FoundationElement } from '@ni/fast-foundation'; import type { IconSeverity } from './types'; /** - * The base class for icon components + * The base class for icon components. Implementors: + * - Should not increase the API surface area, consumers of icons would not expect additional attributes to configure + * - Should not add interactive components to the template, expect to be visual only + * - Should respond well to sizing of the element + * - Should respond to configuration of the severity attribute and other tokens such as theme */ -export class Icon extends FoundationElement { +export abstract class Icon extends FoundationElement { /** * @public * @remarks @@ -16,20 +17,4 @@ export class Icon extends FoundationElement { */ @attr public severity: IconSeverity; - - public constructor(/** @internal */ public readonly icon: NimbleIcon) { - super(); - } } - -type IconClass = typeof Icon; - -export const registerIcon = (baseName: string, iconClass: IconClass): void => { - const composedIcon = iconClass.compose({ - baseName, - template, - styles - }); - - DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon()); -}; diff --git a/packages/nimble-components/src/icon-svg/index.ts b/packages/nimble-components/src/icon-svg/index.ts new file mode 100644 index 0000000000..44aad2ecf0 --- /dev/null +++ b/packages/nimble-components/src/icon-svg/index.ts @@ -0,0 +1,24 @@ +import type { NimbleIcon } from '@ni/nimble-tokens/dist/icons/js'; +import { DesignSystem } from '@ni/fast-foundation'; +import { template } from './template'; +import { styles } from './styles'; +import { Icon } from '../icon-base'; + +/** + * Icon base class for the standard nimble icon set + */ +export class IconSvg extends Icon { + public constructor(/** @internal */ public readonly icon: NimbleIcon) { + super(); + } +} + +export const registerIconSvg = (baseName: string, iconClass: typeof IconSvg): void => { + const composedIcon = iconClass.compose({ + baseName, + template, + styles + }); + + DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon()); +}; diff --git a/packages/nimble-components/src/icon-base/styles.ts b/packages/nimble-components/src/icon-svg/styles.ts similarity index 100% rename from packages/nimble-components/src/icon-base/styles.ts rename to packages/nimble-components/src/icon-svg/styles.ts diff --git a/packages/nimble-components/src/icon-base/template.ts b/packages/nimble-components/src/icon-svg/template.ts similarity index 72% rename from packages/nimble-components/src/icon-base/template.ts rename to packages/nimble-components/src/icon-svg/template.ts index bcbba0f894..c7187346bb 100644 --- a/packages/nimble-components/src/icon-base/template.ts +++ b/packages/nimble-components/src/icon-svg/template.ts @@ -1,8 +1,8 @@ import { html } from '@ni/fast-element'; -import type { Icon } from '.'; +import type { IconSvg } from '.'; // Avoiding any whitespace in the template because this is an inline element -export const template = html`
`