Merge pull request #588 from adobe/feat/bulk-block-nx2-migration

Feat/bulk block nx2 migration

Author: hannessolo

WORKLOG.md

@@ -8,6 +8,30 @@ Changed `:root { color-scheme: light dark; }` → `color-scheme: light;` and `.d
 
 ## 2026-07-09
 
+### nx/blocks/bulk — migrate bulk operations block to nx2
+
+Added `'bulk'` to `NX_BLOCKS` in `nx2/scripts/nx.js`. Block stays in `nx/blocks/bulk/` per migration convention.
+
+Import updates in `bulk.js`:
+- `../../deps/lit/lit-core.min.js` → `da-lit`
+- Dropped `getConfig` from nexter.js; icon URL built via `new URL('../../img/icons/...', import.meta.url).href` (icon only exists in nx1)
+- `../../public/utils/tree.js` → `../../../nx2/public/utils/tree.js` (Queue)
+- `../../utils/svg.js` `getSvg` → `../../../nx2/utils/svg.js` default `loadIcons` (compatible `{ paths } → Promise<svg[]>` signature)
+- `../../utils/styles.js` default `getStyle` → `{ loadStyle }` from `../../../nx2/utils/utils.js`
+
+Import updates in `index.js`:
+- `../../public/utils/getExt.js` → `../../../nx2/public/utils/getExt.js`
+- `../../utils/daFetch.js` → `../../../nx2/utils/api.js`
+- `../../public/utils/constants.js` → `../../../nx2/public/utils/constants.js`
+- **API signature change:** nx2's `daFetch` uses destructured args, so `daFetch(url, opts)` → `daFetch({ url, opts })`
+
+CSS variables in `bulk.css` mapped to nx2-first-nx1-fallback:
+- `--grid-container-width` → `--se-grid-container-width`
+- `--spacing-*` → `--s2-spacing-*`
+- `--body-font-family` → `--s2-font-family`
+- `--s2-radius-100` → `--s2-corner-radius-500`
+- `--s2-font-size-600` (31px) → `--s2-heading-size-xl` (36px, closest available)
+
 ### nx/blocks/tree/tree.js — migrate tree block to nx2
 
 Added `'tree'` to `NX_BLOCKS` in `nx2/scripts/nx.js` so the block always loads from `/nx/blocks`.

nx/blocks/bulk/bulk.css

@@ -1,37 +1,21 @@
 :host {
   display: block;
-  max-width: var(--grid-container-width);
-  margin: 0 auto var(--spacing-500) auto;
-}
-
-:host > svg {
-  display: none;
-}
-
-button {
-  font-family: var(--body-font-family);
+  max-width: var(--se-grid-container-width, var(--grid-container-width));
+  margin: 0 auto var(--s2-spacing-500, var(--spacing-500)) auto;
 }
 
 sl-textarea {
   height: 320px;
-  margin-bottom: var(--spacing-400);
+  margin-bottom: var(--s2-spacing-400, var(--spacing-400));
 }
 
 sl-select {
   width: 120px;
 }
 
-input[name="label"] {
-  height: 32px;
-  width: 160px;
-  font-family: var(--body-font-family);
-  margin: 0;
-  padding: 0 6px;
-}
-
 .delete-toggle {
-  background: #ff5d4b;
-  border-radius: 8px;
+  background: var(--s2-red-700);
+  border-radius: var(--s2-corner-radius-500, 8px);
   line-height: 32px;
   padding: 0 10px;
   color: #fff;
@@ -58,7 +42,7 @@ input[name="label"] {
   justify-content: end;
   align-items: end;
   gap: 12px;
-  margin: 0 0 var(--spacing-400);
+  margin: 0 0 var(--s2-spacing-400, var(--spacing-400));
 }
 
 .da-bulk-action-submit button {
@@ -69,39 +53,39 @@ input[name="label"] {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 24px;
-  margin: 0 0 var(--spacing-400);
+  margin: 0 0 var(--s2-spacing-400, var(--spacing-400));
 }
 
 .detail-card {
   display: flex;
   justify-content: space-between;
-  background: rgb(215 247 225);
+  background: var(--s2-green-200);
   border-radius: 18px;
   overflow: hidden;
-  padding: var(--spacing-400);
+  padding: var(--s2-spacing-400, var(--spacing-400));
 
   button {
     background: transparent;
   }
 }
 
 .detail-card-remaining {
-  background: rgb(202 248 250);
+  background: var(--s2-cyan-200);
 }
 
 .detail-card-total {
-  background: rgb(181 230 252);
+  background: var(--s2-cyan-300);
 }
 
 .detail-card-errors {
-  background: rgb(255 214 209);
+  background: var(--s2-red-300);
 }
 
 .detail-card .cancel-button {
   margin: 0;
   padding: 0;
   min-width: 72px;
-  border-radius: var(--s2-radius-100);
+  border-radius: var(--s2-corner-radius-500, var(--s2-radius-100));
   border: none;
   background: rgb(0 0 0 / 10%);
 }
@@ -113,36 +97,36 @@ input[name="label"] {
 }
 
 .detail-card h3 {
-  margin-bottom: var(--spacing-100);
+  margin-bottom: var(--s2-spacing-100, var(--spacing-100));
 }
 
 .detail-card p {
-  font-size: var(--s2-font-size-600);
+  font-size: var(--s2-heading-size-xl, var(--s2-font-size-600));
 }
 
 .url-list {
   display: none;
-  background: rgb(215 247 225);
+  background: var(--s2-green-200);
   border-radius: 18px;
   overflow: hidden;
-  padding: var(--spacing-400);
-  margin: 0 0 var(--spacing-400);
+  padding: var(--s2-spacing-400, var(--spacing-400));
+  margin: 0 0 var(--s2-spacing-400, var(--spacing-400));
 }
 
 .url-list.is-expanded {
   display: block;
 }
 
 .url-list-remaining {
-  background: rgb(202 248 250);
+  background: var(--s2-cyan-200);
 }
 
 .url-list-errors {
-  background: rgb(255 214 209);
+  background: var(--s2-red-300);
 }
 
 .url-list-total {
-  background: rgb(202 248 250);
+  background: var(--s2-cyan-200);
 }
 
 .url-list h2 {

nx/blocks/bulk/bulk.js

@@ -1,15 +1,10 @@
-import { LitElement, html, nothing } from '../../deps/lit/lit-core.min.js';
-import { getConfig } from '../../scripts/nexter.js';
+import { LitElement, html, nothing } from 'da-lit';
 import { formatUrls, sendAction } from './index.js';
-import { Queue } from '../../public/utils/tree.js';
-import { getSvg } from '../../utils/svg.js';
-import getStyle from '../../utils/styles.js';
+import { Queue } from '../../../nx2/public/utils/tree.js';
+import { loadStyle } from '../../../nx2/utils/utils.js';
 
 await import('../../public/sl/components.js');
-const style = await getStyle(import.meta.url);
-
-const { nxBase: nx } = getConfig();
-const icons = await getSvg({ paths: [`${nx}/img/icons/Smock_ChevronRight_18_N.svg`] });
+const style = await loadStyle(import.meta.url);
 
 // const MOCK_URLS = 'https://main--docket--da-pilot.aem.page/about/faq\nhttps://main--docket--da-pilot.aem.page/about/release-notes\nhttps://main--docket--da-pilot.aem.page/about/release-notes/da-admin\nhttps://main--docket--da-pilot.aem.page/about/release-notes/da-collab\nhttps://main--docket--da-pilot.aem.page/about/release-notes/da-content\nhttps://main--docket--da-pilot.aem.page/about/release-notes/da-live';
 
@@ -38,7 +33,6 @@ class NxBulk extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.shadowRoot.adoptedStyleSheets = [style];
-    this.shadowRoot.prepend(...icons);
   }
 
   firstUpdated() {
@@ -153,7 +147,7 @@ class NxBulk extends LitElement {
           ${hasCancel ? html`<button class="cancel-button" @click=${this.handleCancel}>${this._cancelText}</button>` : nothing}
           ${hasExpand ? html`
             <button class="toggle-list-icon" @click=${this.handleToggleList} data-name="${lowerName}">
-              <svg class="icon"><use href="#spectrum-chevronRight"/></svg>
+              <svg class="icon" viewBox="0 0 20 20" aria-hidden="true"><use href="/img/icons/s2-icon-chevronright-20-n.svg#icon"/></svg>
             </button>
           ` : nothing}
         </div>

nx/blocks/bulk/index.js

@@ -1,6 +1,6 @@
-import { getExt } from '../../public/utils/getExt.js';
-import { daFetch } from '../../utils/daFetch.js';
-import { DA_ORIGIN } from '../../public/utils/constants.js';
+import { getExt } from '../../../nx2/public/utils/getExt.js';
+import { daFetch } from '../../../nx2/utils/api.js';
+import { DA_ORIGIN } from '../../../nx2/public/utils/constants.js';
 
 const AEM_ORIGIN = 'https://admin.hlx.page';
 
@@ -39,7 +39,7 @@ export async function sendAction(url, label) {
     const path = !ext && isBulkDa(url.action) ? `${url.pathname}.html` : url.pathname;
     const ref = isBulkDa(url.action) ? '' : `/${url.ref}`;
     const aemUrl = `${origin}/${url.action}/${url.org}/${url.repo}${ref}${path}`;
-    resp = await daFetch(aemUrl, opts);
+    resp = await daFetch({ url: aemUrl, opts });
   } catch {
     // eslint-disable-next-line no-console
     console.log(`Error sending ${url.action} for ${url.href}`);

nx2/scripts/nx.js

@@ -11,7 +11,8 @@
  */
 
 const LOG = async (ex, el) => (await import('../utils/error.js')).default(ex, el);
-const NX_BLOCKS = new Set(['importer', 'site-apps', 'hero', 'card', 'section-metadata', 'schema-editor', 'media-library', 'form', 'tree', 'permissions', 'snapshot-admin']);
+
+const NX_BLOCKS = new Set(['importer', 'site-apps', 'hero', 'card', 'section-metadata', 'schema-editor', 'media-library', 'form', 'bulk', 'tree', 'permissions', 'snapshot-admin']);
 
 const EW_ORIGINS = {
   dev: 'http://localhost:3001',