diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index 7971c0ea8d..0a8917c3c1 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -18,6 +18,7 @@ export let newStyles = true export let id export let ref + export let reverse = false const dispatch = createEventDispatcher() @@ -43,6 +44,9 @@ } }} > + {#if $$slots && reverse} + + {/if} {#if icon} {/if} - {#if $$slots} + {#if $$slots && !reverse} {/if} @@ -93,4 +97,11 @@ .spectrum-Button--secondary.new-styles.is-disabled { color: var(--spectrum-global-color-gray-500); } + .spectrum-Button .spectrum-Button-label + .spectrum-Icon { + margin-left: var(--spectrum-button-primary-icon-gap); + margin-right: calc( + -1 * (var(--spectrum-button-primary-textonly-padding-left-adjusted) - + var(--spectrum-button-primary-padding-left-adjusted)) + ); + } diff --git a/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte b/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte index 12dee055e2..d7aad5ccff 100644 --- a/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte +++ b/packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte @@ -10,7 +10,7 @@ export let align = "left" export let offset export let animate - export let secondary = false + export let quiet = false let anchor let popover @@ -25,10 +25,13 @@ bind:ref={anchor} {size} icon="ChevronDown" - cta={!secondary} - {secondary} + {quiet} + primary={quiet} + cta={!quiet} + newStyles={!quiet} on:click={() => popover?.show()} on:click + reverse > {text || "Action"} diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte index 1e40f326ff..371e8d46af 100644 --- a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte @@ -1,6 +1,6 @@