chore(ci): disable no-missing-gap-space rule for specific test files

- Updated ESLint configuration to turn off the no-missing-gap-space rule for visual test files and example files.
- Adjusted various components to comply with the new layout requirements, ensuring proper gap spacing is maintained.
Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/core/eslint.config.js

@@ -29,6 +29,12 @@ export default [
 '@nvidia-elements/lint/no-missing-popover-trigger': ['error']
 }
 },
+{
+files: ['src/**/*.test.visual.ts'],
+rules: {
+'@nvidia-elements/lint/no-missing-gap-space': ['off']
+}
+},
 {
 files: [
 'src/format-datetime/format-datetime.ts',

projects/internals/patterns/src/editor.examples.ts

@@ -71,7 +71,7 @@ export const FileBrowser = {
 </nve-page-panel-content>
 </nve-page-panel>
 
-<mainnve-layout="column full">
+<mainnve-layout="column full gap:none">
 <nve-toolbarcontainer="full">
 <nve-tabsbehavior-select>
 <nve-tabs-itemselected>lidar_config.py</nve-tabs-item>
@@ -169,7 +169,7 @@ export const DiffView = {
 <nve-buttonslot="suffix">Merge</nve-button>
 </nve-toolbar>
 
-<mainnve-layout="column">
+<mainnve-layout="column gap:none">
 <nve-toolbarcontainer="full" style="--background: var(--nve-sys-layer-canvas-accent-background)">
 <divslot="prefix" nve-layout="row gap:sm align:vertical-center">
 <nve-icon-buttonicon-name="branch" size="sm" container="flat"></nve-icon-button>
@@ -345,7 +345,7 @@ export const ReadOnly = {
 </nve-page-panel-content>
 </nve-page-panel>
 
-<mainnve-layout="column" style="height: 100%">
+<mainnve-layout="column gap:none" style="height: 100%">
 <nve-toolbarcontainer="full">
 <nve-tabsbehavior-select>
 <nve-tabs-itemselected>robot_config.yaml</nve-tabs-item>

projects/internals/patterns/src/templates.examples.ts

@@ -832,7 +832,7 @@ export const CodeEditor = {
 </nve-tree>
 </nve-page-panel-content>
 </nve-page-panel>
-<mainnve-layout="column full">
+<mainnve-layout="column full gap:none">
 <nve-toolbarcontainer="full">
 <nve-tabsbehavior-select>
 <nve-tabs-itemselected>lidar_config.py</nve-tabs-item>

projects/internals/tools/src/playground/service.test.ts

@@ -17,21 +17,18 @@ describe('PlaygroundService', () => {
 constenv=process.env.ELEMENTS_ENV;
 process.env.ELEMENTS_ENV='mcp';
 constresult=awaitPlaygroundService.validate({
-template: '<nve-button nve-layout="column">hello there</nve-button>'
+template: '<nve-button nve-layout="column gap:sm">hello there</nve-button>'
 });
 expect(Array.isArray(result)).toBe(true);
-expect(result.length).toBe(2);
+expect(result.length).toBe(1);
 expect(result[0].message).toContain(
 'Unexpected use of restricted attribute "nve-layout" on <nve-button>. Remove the attribute.'
 );
 expect(result[0].message).toContain('Supported attributes:');
 expect(result[0].line).toBe(1);
 expect(result[0].column).toBe(13);
 expect(result[0].endLine).toBe(1);
-expect(result[0].endColumn).toBe(32);
-expect(result[1].message).toBe(
-'Layout "column" is missing gap spacing. Add a gap value such as "xs", "sm", "md", "lg", "xl"'
-);
+expect(result[0].endColumn).toBe(39);
 expect((PlaygroundService.validateasToolMethod<unknown>).metadata.name).toBe('validate');
 expect((PlaygroundService.validateasToolMethod<unknown>).metadata.command).toBe('validate');
 expect((PlaygroundService.validateasToolMethod<unknown>).metadata.description).toBe(
@@ -136,13 +133,13 @@ describe('PlaygroundService', () => {
 constcreateTool=tools.find(tool=>tool.metadata.name==='create');
 
 constresult=(awaitcreateTool?.({
-template: '<nve-button nve-layout="column">hello</nve-button>',
+template: '<nve-button nve-layout="column gap:sm">hello</nve-button>',
 start: false
 }))asToolOutput<{message: string}[]>;
 
 expect(result.status).toBe('error');
 expect(result.message).toBe('Template validation failed');
-expect(result.result).toHaveLength(2);
+expect(result.result).toHaveLength(1);
 expect(result.result?.[0]?.message).toContain(
 'Unexpected use of restricted attribute "nve-layout" on <nve-button>. Remove the attribute.'
 );

projects/lint/README.md

@@ -78,7 +78,7 @@ export default [
 |`@nvidia-elements/lint/no-invalid-event-listeners`| Disallow inline event handler attributes in HTML. | HTML |`error`|
 |`@nvidia-elements/lint/no-invalid-invoker-triggers`| Disallow use of invoker trigger attributes on non-button nve-* elements. | HTML |`error`|
 |`@nvidia-elements/lint/no-missing-control-label`| Require form controls to have an accessible label. | HTML |`error`|
-|`@nvidia-elements/lint/no-missing-gap-space`| Require gap spacing on rowand column layouts. | HTML |`off`|
+|`@nvidia-elements/lint/no-missing-gap-space`| Require gap spacing on row, column, and grid layouts. | HTML |`error`|
 |`@nvidia-elements/lint/no-missing-icon-name`| Require icon elements to have an icon name attribute. | HTML |`error`|
 |`@nvidia-elements/lint/no-missing-popover-trigger`| Require popover elements to have a corresponding trigger element. | HTML |`error`|
 |`@nvidia-elements/lint/no-missing-slotted-elements`| Disallow use of missing slotted elements. | HTML |`error`|

projects/lint/src/eslint/rules/no-missing-gap-space.test.ts

@@ -54,7 +54,7 @@ describe('noMissingGapSpace', () => {
 expect(noMissingGapSpace.meta.type).toBe('problem');
 expect(noMissingGapSpace.meta.hasSuggestions).toBe(true);
 expect(noMissingGapSpace.meta.docs).toBeDefined();
-expect(noMissingGapSpace.meta.docs.description).toBe('Require gap spacing on rowand column layouts.');
+expect(noMissingGapSpace.meta.docs.description).toBe('Require gap spacing on row, column, and grid layouts.');
 expect(noMissingGapSpace.meta.docs.category).toBe('Best Practice');
 expect(noMissingGapSpace.meta.docs.recommended).toBe(true);
 expect(noMissingGapSpace.meta.docs.url).toContain('/docs/lint/');
@@ -93,7 +93,18 @@ describe('noMissingGapSpace', () => {
 valid: ['row','column','grid'].flatMap(layout=>
 GAP_OPTIONAL_VALUES.map(value=>`<div nve-layout="${layout}${value}"></div>`)
 ),
-invalid: []
+invalid: [
+{
+code: '<div nve-layout="grid"></div>',
+errors: [
+{
+messageId: 'missing-gap-space',
+data: {layout: 'grid'},
+suggestions: gapSuggestions('grid')
+}
+]
+}
+]
 });
 });
 
@@ -134,6 +145,24 @@ describe('noMissingGapSpace', () => {
 });
 });
 
+it('should quote unquoted layout values in suggestions',()=>{
+tester.run('should quote unquoted layout values in suggestions',rule,{
+valid: [],
+invalid: [
+{
+code: '<div nve-layout=row></div>',
+errors: [
+{
+messageId: 'missing-gap-space',
+data: {layout: 'row'},
+suggestions: gapSuggestions('row')
+}
+]
+}
+]
+});
+});
+
 it('should report missing gap on column layout',()=>{
 tester.run('should report missing gap on column layout',rule,{
 valid: [],

projects/lint/src/eslint/rules/no-missing-gap-space.ts

@@ -43,6 +43,11 @@ function reportGapViolation({
 layoutAttr: HtmlAttribute;
 value: string;
 }){
+const[startWrapper,endWrapper]=
+layoutAttr.startWrapper&&layoutAttr.endWrapper
+ ? [layoutAttr.startWrapper.value,layoutAttr.endWrapper.value]
+ : ['"','"'];
+
 context.report({
 node: layoutAttr,
 messageId: 'missing-gap-space',
@@ -53,7 +58,7 @@ function reportGapViolation({
 fix: (fixer: Rule.RuleFixer)=>
 fixer.replaceText(
 layoutAttrasunknownasRule.Node,
-`nve-layout=${layoutAttr.startWrapper?.value}${suggestedLayout(value,size)}${layoutAttr.endWrapper?.value}`
+`nve-layout=${startWrapper}${suggestedLayout(value,size)}${endWrapper}`
 )
 }))
 });
@@ -64,7 +69,7 @@ const rule = {
 type: 'problem'asconst,
 hasSuggestions: true,
 docs: {
-description: 'Require gap spacing on rowand column layouts.',
+description: 'Require gap spacing on row, column, and grid layouts.',
 category: 'Best Practice',
 recommended: true,
 url: `${__ELEMENTS_PAGES_BASE_URL__}/docs/lint/`

projects/site/src/_internal/search/search.ts

@@ -471,7 +471,7 @@ export class DocsSearch extends LitElement {
 
  #renderSearchResult(result: SearchResult){
 returnhtml`
-<ahref="${this.baseUrl}${result.url}" nve-layout="column pad-top:xs">
+<ahref="${this.baseUrl}${result.url}" nve-layout="pad-top:xs">
 <divnve-layout="row gap:sm pad-top:xs pad-left:xs">
 <nve-iconname="${result.icon}" size="md" style="${result.style}"></nve-icon>
 <divnve-layout="column gap:xs">

projects/site/src/docs/foundations/themes/color.11ty.js

@@ -94,17 +94,17 @@ function getColorScale(color) {
 );
 }
 return/* html */`
- <div nve-layout="column pad-bottom:xl" docs-full-width>
+ <div nve-layout="pad-bottom:xl" docs-full-width>
  <h2 nve-text="body">${color.replace('ref-color-','')}</h2>
- <div nve-layout="row" style="width: 100%">
- <div nve-layout="column" style="padding-top: 25px">${Array.from(Array(12).keys())
+ <div nve-layout="row full">
+ <div nve-layout="pad-top:xl">${Array.from(Array(12).keys())
 .map(
 i=>
 /* html */`<p nve-text="body" nve-layout="column align:center pad:xs" style="height: 40px">${i+1}00</p>`
 )
 .join('')}</div>
- <div nve-layout="column" style="width: 100%"><p nve-text="body center" nve-layout="column align:center pad:xs" style="width: 100%">light</p><div nve-theme="root light" style="width: 100%" colors="">${tokens.join('')}</div></div>
- <div nve-layout="column" style="width: 100%"><p nve-text="body center" nve-layout="column align:center pad:xs" style="width: 100%">dark</p><div nve-theme="root dark" style="width: 100%" colors="">${tokens.join('')}</div></div>
+ <div nve-layout="column full"><p nve-text="body center" nve-layout="column align:center pad:xs" style="width: 100%">light</p><div nve-theme="root light" style="width: 100%" colors="">${tokens.join('')}</div></div>
+ <div nve-layout="column full"><p nve-text="body center" nve-layout="column align:center pad:xs" style="width: 100%">dark</p><div nve-theme="root dark" style="width: 100%" colors="">${tokens.join('')}</div></div>
  </div>
  </div>`;
 }

projects/site/src/docs/lint/index.md

@@ -162,9 +162,9 @@ export default [
  </nve-grid-row>
  <nve-grid-row>
 <nve-grid-cell><code nve-text="code">@nvidia-elements/lint/no-missing-gap-space</code></nve-grid-cell>
-<nve-grid-cell>Require gap spacing on rowand column layouts.</nve-grid-cell>
+<nve-grid-cell>Require gap spacing on row, column, and grid layouts.</nve-grid-cell>
 <nve-grid-cell>HTML</nve-grid-cell>
-<nve-grid-cell><code nve-text="code">off</code></nve-grid-cell>
+<nve-grid-cell><code nve-text="code">error</code></nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
 <nve-grid-cell><code nve-text="code">@nvidia-elements/lint/no-missing-icon-name</code></nve-grid-cell>