feat: redesign button

Author: FRSgit

apps/docs/components/content/_components/button.md

@@ -38,6 +38,21 @@
 
 </Showcase>
 
+### Blank button variants
+
+You can remove the color styling from any variant by setting the `blank` prop to `true`, making it easy to create custom-styled buttons even for unique, one-off use cases in your codebase.
+
+<Showcase showcase-name="Button/ButtonVariants" style="min-height:250px">
+
+::vue-only
+<<<../../../../preview/nuxt/pages/showcases/Button/ButtonBlankVariants.vue
+::
+::react-only
+<<<../../../../preview/next/pages/showcases/Button/ButtonBlankVariants.tsx
+::
+
+</Showcase>
+
 ### Button as a link
 
 ::vue-only

apps/preview/next/pages/showcases/Button/ButtonBlankVariants.tsx

@@ -0,0 +1,25 @@
+import { ShowcasePageLayout } from '../../showcases';
+// #region source
+import { SfButton } from '@storefront-ui/react';
+
+export default function ButtonVariants() {
+  return (<>
+    <div className="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
+      <SfButton variant="primary" blank className="text-white bg-neutral-700 hover:bg-neutral-800 active:bg-neutral-900">Hello</SfButton>
+
+      <SfButton variant="secondary" blank className="text-neutral-700 hover:text-neutral-800 active:text-neutral-900 ring-current hover:bg-neutral-100 active:bg-neutral-200">Hello</SfButton>
+
+      <SfButton variant="tertiary" blank className="text-neutral-500 hover:text-neutral-600 active:text-neutral-700 hover:bg-neutral-100 active:bg-neutral-200">Hello</SfButton>
+    </div>
+    <div className="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
+      <SfButton variant="primary" blank className="text-white bg-negative-700 hover:bg-negative-800 active:bg-negative-900">Hello</SfButton>
+
+      <SfButton variant="secondary" blank className="text-negative-700 hover:text-negative-800 active:text-negative-900 ring-current hover:bg-negative-100 active:bg-negative-200">Hello</SfButton>
+
+      <SfButton variant="tertiary" blank className="text-negative-700 hover:text-negative-800 active:text-negative-900 hover:bg-negative-100 active:bg-negative-200">Hello</SfButton>
+    </div>
+  </>);
+}
+
+// #endregion source
+ButtonVariants.getLayout = ShowcasePageLayout;

apps/preview/nuxt/pages/examples/SfButton.vue

@@ -57,8 +57,14 @@ const { state, controlsAttrs } = prepareControls(
     {
       type: 'select',
       modelName: 'variant',
+      description: 'Button style variant',
       options: Object.keys(SfButtonVariant),
     },
+    {
+      type: 'boolean',
+      modelName: 'blank',
+      description: 'Remove variant color classes from the button',
+    },
     {
       type: 'select',
       modelName: 'size',
@@ -80,6 +86,7 @@ const { state, controlsAttrs } = prepareControls(
     suffix: ref(suffixSlotOptions.defaultOption),
     disabled: ref(),
     variant: ref<SfButtonVariant>(SfButtonVariant.primary),
+    blank: ref(),
     size: ref<SfButtonSize>(SfButtonSize.base),
     tag: ref(),
     square: ref(),

apps/preview/nuxt/pages/showcases/Button/ButtonBlankVariants.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
+    <SfButton variant="primary" blank class="text-white bg-neutral-700 hover:bg-neutral-800 active:bg-neutral-900"> Hello </SfButton>
+
+    <SfButton variant="secondary" blank class="text-neutral-700 hover:text-neutral-800 active:text-neutral-900 ring-current hover:bg-neutral-100 active:bg-neutral-200"> Hello </SfButton>
+
+    <SfButton variant="tertiary" blank class="text-neutral-500 hover:text-neutral-600 active:text-neutral-700 hover:bg-neutral-100 active:bg-neutral-200"> Hello </SfButton>
+  </div>
+  <div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
+    <SfButton variant="primary" blank class="text-white bg-negative-700 hover:bg-negative-800 active:bg-negative-900"> Hello </SfButton>
+
+    <SfButton variant="secondary" blank class="text-negative-700 hover:text-negative-800 active:text-negative-900 ring-current hover:bg-negative-100 active:bg-negative-200"> Hello </SfButton>
+
+    <SfButton variant="tertiary" blank class="text-negative-700 hover:text-negative-800 active:text-negative-900 hover:bg-negative-100 active:bg-negative-200"> Hello </SfButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { SfButton } from '@storefront-ui/vue';
+</script>

packages/sfui/frameworks/react/components/SfButton/SfButton.tsx

@@ -3,13 +3,21 @@ import { type SfButtonProps, SfButtonSize, SfButtonVariant, polymorphicForwardRe
 
 const defaultButtonTag = 'button';
 
-const variantClasses = {
+export const variantClasses = {
   [SfButtonVariant.primary]:
-    'text-white shadow hover:shadow-md active:shadow bg-primary-700 hover:bg-primary-800 active:bg-primary-900 disabled:bg-disabled-300',
+    'shadow hover:shadow-md active:shadow disabled:bg-disabled-300',
   [SfButtonVariant.secondary]:
-    'text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 ring-1 ring-inset ring-primary-700 hover:shadow-md active:shadow shadow hover:ring-primary-800 active:ring-primary-900 disabled:ring-1 disabled:ring-disabled-300 disabled:bg-white/50',
+    'ring-1 ring-inset shadow hover:shadow-md active:shadow disabled:ring-1 disabled:ring-disabled-300 disabled:bg-white/50',
   [SfButtonVariant.tertiary]:
-    'text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 disabled:bg-transparent',
+    'disabled:bg-transparent',
+};
+export const variantColorClasses = {
+  [SfButtonVariant.primary]:
+    'text-white bg-primary-700 hover:bg-primary-800 active:bg-primary-900',
+  [SfButtonVariant.secondary]:
+    'text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 ring-primary-700 hover:ring-primary-800 active:ring-primary-900',
+  [SfButtonVariant.tertiary]:
+    'text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
 };
 
 const getSizeClasses = (size: SfButtonProps['size'], square: SfButtonProps['square']) => {
@@ -29,6 +37,7 @@ const SfButton = polymorphicForwardRef<typeof defaultButtonTag, SfButtonProps>((
     className,
     size = SfButtonSize.base,
     variant = SfButtonVariant.primary,
+    blank,
     square,
     children,
     slotPrefix,
@@ -42,9 +51,10 @@ const SfButton = polymorphicForwardRef<typeof defaultButtonTag, SfButtonProps>((
       ref={ref}
       type={typeof Tag === 'string' && Tag.toLowerCase() === 'button' ? 'button' : undefined}
       className={classNames(
-        'inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-md disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed',
+        'inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-full disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed',
         getSizeClasses(size, square),
         variantClasses[variant],
+        { [variantColorClasses[variant]]: !blank },
         className,
       )}
       data-testid="button"

packages/sfui/frameworks/react/components/SfButton/types.ts

@@ -12,5 +12,6 @@ export interface SfButtonProps
   slotSuffix?: ReactNode;
   size?: `${SfButtonSize}`;
   variant?: `${SfButtonVariant}`;
+  blank?: boolean;
   square?: boolean;
 }

packages/sfui/frameworks/vue/components/SfButton/SfButton.vue

@@ -1,11 +1,19 @@
 <script lang="ts">
 export const variantClasses = {
   [SfButtonVariant.primary]:
-    'text-white shadow hover:shadow-md active:shadow bg-primary-700 hover:bg-primary-800 active:bg-primary-900 disabled:bg-disabled-300',
+    'shadow hover:shadow-md active:shadow disabled:bg-disabled-300',
   [SfButtonVariant.secondary]:
-    'text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 ring-1 ring-inset ring-primary-700 shadow hover:shadow-md active:shadow hover:ring-primary-800 active:ring-primary-900 disabled:ring-1 disabled:ring-disabled-300 disabled:bg-white/50',
+    'ring-1 ring-inset shadow hover:shadow-md active:shadow disabled:ring-1 disabled:ring-disabled-300 disabled:bg-white/50',
   [SfButtonVariant.tertiary]:
-    'text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 disabled:bg-transparent',
+    'disabled:bg-transparent',
+};
+export const variantColorClasses = {
+  [SfButtonVariant.primary]:
+    'text-white bg-primary-700 hover:bg-primary-800 active:bg-primary-900',
+  [SfButtonVariant.secondary]:
+    'text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900 ring-primary-700 hover:ring-primary-800 active:ring-primary-900',
+  [SfButtonVariant.tertiary]:
+    'text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
 };
 </script>
 
@@ -22,6 +30,10 @@ const props = defineProps({
     type: String as PropType<`${SfButtonVariant}`>,
     default: SfButtonVariant.primary,
   },
+  blank: {
+    type: Boolean,
+    default: false,
+  },
   disabled: {
     type: Boolean,
     default: false,
@@ -65,9 +77,10 @@ const type = computed(
     :type="type"
     :disabled="disabled"
     :class="[
-      'inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-md disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed',
+      'inline-flex items-center justify-center font-medium text-base focus-visible:outline focus-visible:outline-offset rounded-full disabled:text-disabled-500 disabled:bg-disabled-300 disabled:shadow-none disabled:ring-0 disabled:cursor-not-allowed',
       sizeClasses,
       variantClasses[variant],
+      { [variantColorClasses[variant]]: !blank }
     ]"
     data-testid="button"
   >

packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue

@@ -51,7 +51,7 @@ keep it here, or to always pass modelValue to the component.
 */
 const internalState = ref<string>(modelValue.value);
 const selectModel = computed({
-  get: () => modelValue.value ||  internalState.value,
+  get: () => modelValue.value || internalState.value,
   set: (value) => {
     emit('update:modelValue', value);
     internalState.value = value;

packages/tests/components/SfButton/SfButton.cy.tsx

@@ -16,6 +16,7 @@ describe('SfButton', () => {
   type InitializeComponentParams = {
     size?: SfButtonSize;
     variant?: SfButtonVariant;
+    blank?: boolean;
     disabled?: boolean;
     square?: boolean;
     slotPrefix?: boolean;
@@ -25,6 +26,7 @@ describe('SfButton', () => {
   const initializeComponent = ({
     size = SfButtonSize.base,
     variant = SfButtonVariant.primary,
+    blank,
     disabled,
     square,
     slotPrefix,
@@ -43,6 +45,7 @@ describe('SfButton', () => {
         props: {
           size,
           variant,
+          blank,
           disabled,
           square,
         },
@@ -97,6 +100,14 @@ describe('SfButton', () => {
 
           page().makeSnapshot();
         });
+
+        describe('when prop blank=true', () => {
+          it(`should render correct ${componentVariant} variant`, () => {
+            initializeComponent({ variant: componentVariant, blank: true });
+
+            page().makeSnapshot();
+          });
+        });
       });
     });