Add floating-alt style variant in Button element (#907)

* feat: add floating alt style variant in Button element

* test: add snapshot

* docs: add changeset

* fix: floating style elevation

* docs: update button mdx

* fix: button border radius

Author: guswnsxodlf

.changeset/heavy-jars-behave.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Add floating-alt style variant in Button element

packages/bezier-react/src/components/Button/Button.mdx

@@ -253,6 +253,7 @@ enum ButtonStyleVariant {
   Secondary,
   Tertiary,
   Floating,
+  FloatingAlt,
 }
 ```
 </details>

packages/bezier-react/src/components/Button/Button.styled.ts

@@ -1,5 +1,5 @@
 /* External dependencies */
-import { isEmpty } from 'lodash-es'
+import { isEmpty, includes } from 'lodash-es'
 
 /* Internal dependencies */
 import { styled, css, SemanticNames } from 'Foundation'
@@ -96,7 +96,9 @@ function getPaddingCSSFromSizeAndContents({
     `
   }
 
-  const paddingVariant = styleVariant !== ButtonStyleVariant.Floating ? 'default' : 'floating'
+  const paddingVariant = includes([ButtonStyleVariant.Floating, ButtonStyleVariant.FloatingAlt], styleVariant)
+    ? 'floating'
+    : 'default'
 
   const paddingValue = BUTTON_HORIZONTAL_PADDING_VALUE[size][paddingVariant]
 
@@ -148,6 +150,12 @@ function defaultSemanticNames(colorVariant: ButtonColorVariant): Record<ButtonSt
       backgroundColor: `bgtxt-${colorVariant}-normal` as const,
       activeBackgroundColor: `bgtxt-${colorVariant}-dark` as const,
     },
+
+    [ButtonStyleVariant.FloatingAlt]: {
+      color: 'bgtxt-absolute-white-dark',
+      backgroundColor: `bgtxt-${colorVariant}-normal` as const,
+      activeBackgroundColor: `bgtxt-${colorVariant}-dark` as const,
+    },
   }
 }
 
@@ -173,6 +181,10 @@ const MONOCHROME_SEMANTIC_NAMES: Record<ButtonStyleVariant, ButtonSemanticNames>
   [ButtonStyleVariant.Floating]: {
     color: 'txt-black-darkest',
   },
+
+  [ButtonStyleVariant.FloatingAlt]: {
+    color: 'txt-black-darkest',
+  },
 }
 
 const MONOCHROME_LIGHT_SEMANTIC_NAMES: Record<ButtonStyleVariant, ButtonSemanticNames> = {
@@ -197,6 +209,11 @@ const MONOCHROME_LIGHT_SEMANTIC_NAMES: Record<ButtonStyleVariant, ButtonSemantic
     color: 'txt-black-darker',
     backgroundColor: 'bg-white-high',
   },
+
+  [ButtonStyleVariant.FloatingAlt]: {
+    color: 'txt-black-darker',
+    backgroundColor: 'bg-white-high',
+  },
 }
 
 const MONOCHROME_DARK_SEMANTIC_NAMES: Record<ButtonStyleVariant, ButtonSemanticNames> = {
@@ -221,6 +238,11 @@ const MONOCHROME_DARK_SEMANTIC_NAMES: Record<ButtonStyleVariant, ButtonSemanticN
     color: 'txt-black-darkest',
     backgroundColor: 'bg-white-high',
   },
+
+  [ButtonStyleVariant.FloatingAlt]: {
+    color: 'txt-black-darkest',
+    backgroundColor: 'bg-white-high',
+  },
 }
 
 function getColorCSS(
@@ -275,13 +297,22 @@ function getEffectCSSFromVariant(styleVariant: ButtonProps['styleVariant'], size
   switch (styleVariant) {
     case ButtonStyleVariant.Floating:
       return css`
-        ${({ foundation }) => foundation?.elevation?.ev3()};
+        ${({ foundation }) => foundation?.elevation?.ev2()};
         /* NOTE: height 기반의 100% border-radius 를 사용하기 위해, foundation rounding 을 무시한 hack */
         overflow: hidden;
         border-radius: 1000px;
 
         &:hover {
-          ${({ foundation }) => foundation?.elevation?.ev4()};
+          ${({ foundation }) => foundation?.elevation?.ev3()};
+        }
+      `
+    case ButtonStyleVariant.FloatingAlt:
+      return css`
+        ${({ foundation }) => foundation?.elevation?.ev2()};
+        ${({ foundation }) => foundation?.rounding?.round8};
+
+        &:hover {
+          ${({ foundation }) => foundation?.elevation?.ev3()};
         }
       `
     case ButtonStyleVariant.Tertiary:

packages/bezier-react/src/components/Button/Button.test.tsx

@@ -89,6 +89,22 @@ describe('Button Test >', () => {
 
       expect(floatingButton).toMatchSnapshot()
     })
+
+    it('FloatingAlt', () => {
+      const { getByTestId } = renderButton({ styleVariant: ButtonStyleVariant.FloatingAlt })
+      const floatingAltButton = getByTestId(BUTTON_TEST_ID)
+      const mButtonPaddingFloating = BUTTON_HORIZONTAL_PADDING_VALUE[ButtonSize.M].floating
+
+      // Colors
+      expect(floatingAltButton).toHaveStyle(`color: ${LightFoundation.theme['bgtxt-absolute-white-dark']}`)
+      expect(floatingAltButton).toHaveStyle(`background-color: ${LightFoundation.theme['bgtxt-blue-normal']}`)
+      expect(floatingAltButton).toHaveStyle('border-radius: 8px;')
+
+      // Padding
+      expect(floatingAltButton).toHaveStyle(`padding: 0 ${mButtonPaddingFloating}px 0 ${mButtonPaddingFloating}px;`)
+
+      expect(floatingAltButton).toMatchSnapshot()
+    })
   })
 
   describe('Disabled Test >', () => {

packages/bezier-react/src/components/Button/Button.types.ts

@@ -7,6 +7,7 @@ export enum ButtonStyleVariant {
   Secondary = 'secondary',
   Tertiary = 'tertiary',
   Floating = 'floating',
+  FloatingAlt = 'floating-alt',
 }
 
 export enum ButtonColorVariant {

packages/bezier-react/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -492,7 +492,7 @@ exports[`Button Test > Size Test > with text > Size L - styleVariant: Floating 1
   height: 44px;
   padding: 0 18px 0 18px;
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 2px 6px #00000014;
   overflow: hidden;
   border-radius: 1000px;
   color: #FFFFFF;
@@ -501,7 +501,7 @@ exports[`Button Test > Size Test > with text > Size L - styleVariant: Floating 1
 
 .c0:hover {
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 20px #00000038;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
 }
 
 .c0:hover {
@@ -699,7 +699,7 @@ exports[`Button Test > Size Test > with text > Size M - styleVariant: Floating 1
   height: 36px;
   padding: 0 14px 0 14px;
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 2px 6px #00000014;
   overflow: hidden;
   border-radius: 1000px;
   color: #FFFFFF;
@@ -708,7 +708,7 @@ exports[`Button Test > Size Test > with text > Size M - styleVariant: Floating 1
 
 .c0:hover {
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 20px #00000038;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
 }
 
 .c0:hover {
@@ -902,7 +902,7 @@ exports[`Button Test > Size Test > with text > Size S - styleVariant: Floating 1
   height: 24px;
   padding: 0 9px 0 9px;
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 2px 6px #00000014;
   overflow: hidden;
   border-radius: 1000px;
   color: #FFFFFF;
@@ -911,7 +911,7 @@ exports[`Button Test > Size Test > with text > Size S - styleVariant: Floating 1
 
 .c0:hover {
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 20px #00000038;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
 }
 
 .c0:hover {
@@ -1105,7 +1105,7 @@ exports[`Button Test > Size Test > with text > Size XL - styleVariant: Floating
   height: 54px;
   padding: 0 23px 0 23px;
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 2px 6px #00000014;
   overflow: hidden;
   border-radius: 1000px;
   color: #FFFFFF;
@@ -1114,7 +1114,7 @@ exports[`Button Test > Size Test > with text > Size XL - styleVariant: Floating
 
 .c0:hover {
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 20px #00000038;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
 }
 
 .c0:hover {
@@ -1308,7 +1308,7 @@ exports[`Button Test > Size Test > with text > Size XS - styleVariant: Floating
   height: 20px;
   padding: 0 7px 0 7px;
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 2px 6px #00000014;
   overflow: hidden;
   border-radius: 1000px;
   color: #FFFFFF;
@@ -1317,7 +1317,7 @@ exports[`Button Test > Size Test > with text > Size XS - styleVariant: Floating
 
 .c0:hover {
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 20px #00000038;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
 }
 
 .c0:hover {
@@ -1959,7 +1959,7 @@ exports[`Button Test > StyleVariant Test > Floating 1`] = `
   height: 36px;
   padding: 0 14px 0 14px;
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 2px 6px #00000014;
   overflow: hidden;
   border-radius: 1000px;
   color: #FFFFFF;
@@ -1968,7 +1968,112 @@ exports[`Button Test > StyleVariant Test > Floating 1`] = `
 
 .c0:hover {
   background-color: #FFFFFF;
-  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 20px #00000038;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
+}
+
+.c0:hover {
+  background-color: #4E40C9;
+}
+
+.c3 {
+  padding: 0 4px;
+}
+
+@supports not(gap:2px) {
+  .c1 {
+    margin-top: -2px;
+    margin-left: -2px;
+  }
+
+  .c1 > * {
+    margin-top: 2px;
+    margin-left: 2px;
+  }
+}
+
+<button
+  class="c0"
+  data-testid="bezier-react-button"
+  type="button"
+>
+  <div
+    class="c1"
+    data-testid="bezier-react-button-inner-content"
+  >
+    <span
+      class="c2 c3"
+      data-testid="bezier-react-button-text"
+    >
+      Test Button
+    </span>
+  </div>
+</button>
+`;
+
+exports[`Button Test > StyleVariant Test > FloatingAlt 1`] = `
+.c2 {
+  font-size: 1.4rem;
+  line-height: 1.8rem;
+  margin: 0px 0px 0px 0px;
+  font-style: normal;
+  font-weight: 600;
+  color: inherit;
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
+  transition-timing-function: cubic-bezier(.3,0,0,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-property: color;
+  transition-property: color;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  visibility: visible;
+  gap: 2px;
+}
+
+.c0 {
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  opacity: 1;
+  -webkit-transition-delay: 0ms;
+  transition-delay: 0ms;
+  -webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
+  transition-timing-function: cubic-bezier(.3,0,0,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
+  -webkit-transition-property: background-color,box-shadow;
+  transition-property: background-color,box-shadow;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 14px 0 14px;
+  background-color: #FFFFFF;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 2px 6px #00000014;
+  overflow: hidden;
+  border-radius: 8px;
+  color: #FFFFFF;
+  background-color: #5E56F0;
+}
+
+.c0:hover {
+  background-color: #FFFFFF;
+  box-shadow: inset 0 0 2px 0 #FFFFFF1F, 0 0 2px 1px #0000000D, 0 4px 12px #00000026;
 }
 
 .c0:hover {