Issues with SWC action-button

, ,

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

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

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

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 (
          <h1>Bla bla</h1>
          <sp-action-group >
            {' '}
            <sp-action-button>Edit</sp-action-button>{' '}
              {' '}
              <sp-icon-edit slot="icon"></sp-icon-edit> Edit{' '}
            </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>{' '}

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.

1 Like

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

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:
It would have saved a lot of time

“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.