diff --git a/packages/ncids-css/packages/usa-button/internal/_nci-icon.scss b/packages/ncids-css/packages/usa-button/internal/_nci-icon.scss index 190d8e7e3..f587fe391 100644 --- a/packages/ncids-css/packages/usa-button/internal/_nci-icon.scss +++ b/packages/ncids-css/packages/usa-button/internal/_nci-icon.scss @@ -36,13 +36,8 @@ $svg-size: units(3); // Full Width Icon Button .usa-button--nci-icon.usa-button--nci-full-width { - @include u-display('block'); .usa-icon { @include u-position('absolute'); @include u-float('left'); } - > span { - @include u-display('inline-block'); - width: calc(100% - 48px); - } } diff --git a/testing/ncids-css-testing/stories/components/usa-button/content/button.twig b/testing/ncids-css-testing/stories/components/usa-button/content/button.twig index 0b3362ee9..ac8e20b57 100644 --- a/testing/ncids-css-testing/stories/components/usa-button/content/button.twig +++ b/testing/ncids-css-testing/stories/components/usa-button/content/button.twig @@ -1,8 +1,8 @@ {% macro buttonLabel(text, svg, class) %} {% if svg and 'right' in class %} - {{ text }} {{ svg }} + {{ text }}{{ svg }} {% elseif svg %} - {{ svg }}{{ text }} + {{ svg }}{{ text }} {% else %} {{ text }} {% endif %} diff --git a/testing/ncids-css-testing/stories/components/usa-button/usa-button.modifiers.icon-left.stories.jsx b/testing/ncids-css-testing/stories/components/usa-button/usa-button.modifiers.icon-left.stories.jsx index afc333dd6..8a251afa6 100644 --- a/testing/ncids-css-testing/stories/components/usa-button/usa-button.modifiers.icon-left.stories.jsx +++ b/testing/ncids-css-testing/stories/components/usa-button/usa-button.modifiers.icon-left.stories.jsx @@ -11,53 +11,59 @@ export default { const buttonStyles = [ { title: 'Primary', - class: 'usa-button--nci-icon', + class: '', iconSvg: iconSvg, }, { title: 'Secondary', - class: 'usa-button--secondary usa-button--nci-icon', + class: 'usa-button--secondary', iconSvg: iconSvg, }, { title: 'Accent Cool', - class: 'usa-button--accent-cool usa-button--nci-icon', + class: 'usa-button--accent-cool', iconSvg: iconSvg, }, { title: 'Accent Warm', - class: 'usa-button--accent-warm usa-button--nci-icon', + class: 'usa-button--accent-warm', iconSvg: iconSvg, }, { title: 'Base', - class: 'usa-button--base usa-button--nci-icon', + class: 'usa-button--base', iconSvg: iconSvg, }, { title: 'Outline', - class: 'usa-button--outline usa-button--nci-icon', + class: 'usa-button--outline', iconSvg: iconSvg, }, { title: 'Outline Secondary', - class: 'usa-button--outline usa-button--secondary usa-button--nci-icon', + class: 'usa-button--outline usa-button--secondary', iconSvg: iconSvg, }, { title: 'Outline Inverse', - class: 'usa-button--outline usa-button--inverse usa-button--nci-icon', + class: 'usa-button--outline usa-button--inverse', iconSvg: iconSvg, containerClass: 'bg-base-darkest padding-2' }, { title: 'Full Width', - class: 'usa-button--nci-icon usa-button--nci-full-width', + class: 'usa-button--nci-full-width', iconSvg: iconSvg, }, { title: 'Unstyled', - class: 'usa-button--unstyled usa-button--nci-icon', + class: 'usa-button--unstyled', + iconSvg: iconSvg, + containerClass: 'ncisb-flex-gap', + }, + { + title: 'Unstyled Full Width', + class: 'usa-button--unstyled usa-button--nci-full-width', iconSvg: iconSvg, containerClass: 'ncisb-flex-gap', }