Issues with SWC action-button

InDesign
, ,
1

When using the swc version of the I’m getting very serious spacing problems
(SWC widget)

image
image306×251 4.96 KB

vs
(“normal” UXP widget)
image
image301×256 5.1 KB

Am I doing something stupid, or is the swc component broken?

2

Is sp-action-button within sp-theme? I think it looked like that when it was located outside of sp-theme.

3

Yes, inside a <sp-theme>

import React from 'react';
import '@spectrum-web-components/theme/sp-theme.js';
import '@spectrum-web-components/theme/src/themes.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';
import '@spectrum-web-components/action-group/sp-action-group.js';
//import '@spectrum-web-components/action-button/sp-action-button.js';

export const App = () => {

  return (
    <>
      <AppDataProvider>
        <sp-theme
          id="app-main"
          scale="medium"
          color="dark">
          <h1>Bla bla</h1>
          <sp-action-group >
            {' '}
            <sp-action-button>Edit</sp-action-button>{' '}
            <sp-action-button>
              {' '}
              <sp-icon-edit slot="icon"></sp-icon-edit> Edit{' '}
            </sp-action-button>{' '}
            <sp-action-button>
              {' '}
              <sp-icon-edit slot="icon"></sp-icon-edit>{' '}
            </sp-action-button>{' '}
            <sp-action-button hold-affordance>
              {' '}
              <sp-icon-edit slot="icon"></sp-icon-edit>{' '}
            </sp-action-button>
          </sp-action-group>
        </sp-theme>
      </AppDataProvider>
    </>
  );
};
4

did you install swc-uxp-wrappers? not spectrum-web-components.
I mean, when come to think SWC, installing modules must be following like the link below.

5

@vamitul Take a look at the instructions here. You need to install the wrappers supported by UXP to get the correct styling.

6

Thank you, using the wrappers seems to mostly fix it, but it looks like the size="xs" doesn’t not (the other sizes do work).
Also, please please update the documentation: https://developer.adobe.com/indesign/uxp/reference/uxp-api/reference-spectrum/swc/
It would have saved a lot of time

7

“size=xs” has issue with the version we locked on for action-button i.e @spectrum-web-components/action-button/v/0.8.7.This version does not work over the browser too.
This will get fixed with upcoming releases.