feat(button): define CSS_CLASSES (#838)

Author: 태재영

packages/button/constant.ts

@@ -0,0 +1,33 @@
+// The MIT License
+//
+// Copyright (c) 2019 Google, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+const CSS_CLASSES = {
+  ROOT: 'mdc-button',
+  ICON: 'mdc-button__icon',
+  LABEL: 'mdc-button__label',
+  DENSE: 'mdc-button--dense',
+  RAISED: 'mdc-button--raised',
+  OUTLINED: 'mdc-button--outlined',
+  UNELEVATED: 'mdc-button--unelevated',
+};
+
+export {CSS_CLASSES};

packages/button/index.tsx

@@ -24,7 +24,7 @@ import React from 'react';
 import classnames from 'classnames';
 import {withRipple, InjectedProps} from '@material/react-ripple';
 
-const BUTTON_CLASS_NAME = 'mdc-button__icon';
+import {CSS_CLASSES} from './constant';
 
 type ButtonTypes = HTMLAnchorElement | HTMLButtonElement;
 
@@ -63,11 +63,11 @@ export const Button = <T extends ButtonTypes>(
   }: ButtonProps<T>
 ) => {
   const props = {
-    className: classnames('mdc-button', className, {
-      'mdc-button--raised': raised,
-      'mdc-button--unelevated': unelevated,
-      'mdc-button--outlined': outlined,
-      'mdc-button--dense': dense,
+    className: classnames(CSS_CLASSES.ROOT, className, {
+      [CSS_CLASSES.RAISED]: raised,
+      [CSS_CLASSES.UNELEVATED]: unelevated,
+      [CSS_CLASSES.OUTLINED]: outlined,
+      [CSS_CLASSES.DENSE]: dense,
     }),
     ref: initRipple,
     disabled,
@@ -78,7 +78,7 @@ export const Button = <T extends ButtonTypes>(
     return (
       <a {...props as React.HTMLProps<HTMLAnchorElement>} href={href}>
         {!trailingIcon ? renderIcon(icon) : null}
-        <span className='mdc-button__label'>
+        <span className={CSS_CLASSES.LABEL}>
           {children}
         </span>
         {trailingIcon ? renderIcon(trailingIcon) : null}
@@ -89,7 +89,7 @@ export const Button = <T extends ButtonTypes>(
   return (
     <button {...props as React.HTMLProps<HTMLButtonElement>}>
       {!trailingIcon ? renderIcon(icon) : null}
-      <span className='mdc-button__label'>
+      <span className={CSS_CLASSES.LABEL}>
         {children}
       </span>
       {trailingIcon ? renderIcon(trailingIcon) : null}
@@ -100,7 +100,7 @@ export const Button = <T extends ButtonTypes>(
 const renderIcon = (icon?: React.ReactElement<React.HTMLProps<HTMLOrSVGElement>>) => (
   icon ?
     React.cloneElement(icon, {
-      className: classnames(BUTTON_CLASS_NAME, icon.props.className),
+      className: classnames(CSS_CLASSES.ICON, icon.props.className),
     }) :
     null
 );