fix: change label text color in RadioButtonLabel and CheckBoxLabel (#698

) * fix: change label text color in RadioButtonLabel and CheckBoxLabel * chore: update snapshot Co-authored-by: nabeliwo <hiroki.c.watanabe@gmail.com>
kufu · Mar 25, 2020 · 969861f · 969861f
1 parent f6f75a6
commit 969861f
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 22 deletions.
diff --git a/src/components/CheckBoxLabel/CheckBoxLabel.tsx b/src/components/CheckBoxLabel/CheckBoxLabel.tsx
@@ -13,7 +13,7 @@ export const CheckBoxLabel: FC<Props> = ({ label, className = '', ...props }) =>
 
   return (
     <Wrapper className={className}>
-      <Label className={`${props.disabled ? 'disabled' : ''}`}>
+      <Label className={`${props.disabled ? 'disabled' : ''}`} themes={theme}>
         <CheckBox {...props} />
         <Txt themes={theme}>{label}</Txt>
       </Label>
@@ -24,22 +24,28 @@ export const CheckBoxLabel: FC<Props> = ({ label, className = '', ...props }) =>
 const Wrapper = styled.div`
   display: inline-block;
 `
-const Label = styled.label`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+const Label = styled.label<{ themes: Theme }>`
+  ${({ themes }) => {
+    const { palette } = themes
+    return css`
+      display: flex;
+      align-items: center;
+      color: ${palette.TEXT_BLACK};
+      cursor: pointer;
 
-  &.disabled {
-    cursor: default;
-  }
+      &.disabled {
+        color: ${palette.TEXT_DISABLED};
+        cursor: default;
+      }
+    `
+  }}
 `
 const Txt = styled.p<{ themes: Theme }>`
   ${({ themes }) => {
-    const { size, palette } = themes
+    const { size } = themes
     return css`
       margin: 0 0 0 ${size.pxToRem(size.space.XXS)};
       font-size: ${size.pxToRem(size.font.TALL)};
-      color: ${palette.TEXT_BLACK};
     `
   }}
 `
diff --git a/src/components/CheckBoxLabel/__snapshots__/CheckBoxLabel.test.tsx.snap b/src/components/CheckBoxLabel/__snapshots__/CheckBoxLabel.test.tsx.snap
@@ -15,9 +15,73 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
     >
       <styled.label
         className=""
+        themes={
+          Object {
+            "frame": Object {
+              "border": Object {
+                "default": "1px solid #d6d6d6",
+                "lineStyle": "solid",
+                "lineWidth": "1px",
+                "radius": Object {
+                  "l": "8px",
+                  "m": "6px",
+                  "s": "3px",
+                },
+              },
+            },
+            "interaction": Object {
+              "hover": Object {
+                "animation": ".3s ease-out",
+                "animationDuration": ".3s",
+                "animationTiming": "ease-out",
+                "feedbackOpacity": ".7",
+              },
+            },
+            "palette": Object {
+              "BACKGROUND": "#f5f6fa",
+              "BORDER": "#d6d6d6",
+              "COLUMN": "#f9f9f9",
+              "DANGER": "#ef475b",
+              "HEADER_GREEN": "#57d0d5",
+              "MAIN": "#00a5ab",
+              "OUTLINE": "rgba(0,165,171,0.5)",
+              "OVERLAY": "rgba(0,0,0,0.15)",
+              "SCRIM": "rgba(0,0,0,0.5)",
+              "TEXT_BLACK": "#333",
+              "TEXT_DISABLED": "#c1c1c1",
+              "TEXT_GREY": "#767676",
+              "TEXT_LINK": "#007bc2",
+              "WARNING": "#ff8800",
+              "disableColor": [Function],
+              "hoverColor": [Function],
+            },
+            "size": Object {
+              "font": Object {
+                "GRANDE": 18,
+                "SHORT": 11,
+                "TALL": 14,
+                "VENTI": 24,
+              },
+              "mediaQuery": Object {
+                "SP": 599,
+                "TABLET": 959,
+              },
+              "pxToRem": [Function],
+              "space": Object {
+                "L": 40,
+                "M": 32,
+                "S": 24,
+                "XL": 48,
+                "XS": 16,
+                "XXL": 56,
+                "XXS": 8,
+              },
+            },
+          }
+        }
       >
         <label
-          className="sc-AxgMl kNdAQX"
+          className="sc-AxgMl hMZYSl"
         >
           <Component
             checked={true}
@@ -430,7 +494,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
             }
           >
             <p
-              className="sc-AxheI dcIqHS"
+              className="sc-AxheI fDRfns"
             >
               label
             </p>

diff --git a/src/components/RadioButtonLabel/RadioButtonLabel.tsx b/src/components/RadioButtonLabel/RadioButtonLabel.tsx
@@ -14,7 +14,7 @@ export const RadioButtonLabel: FC<Props> = ({ label, className = '', ...props })
 
   return (
     <Wrapper className={className}>
-      <Label className={`${props.disabled ? 'disabled' : ''}`}>
+      <Label className={`${props.disabled ? 'disabled' : ''}`} themes={theme}>
         <RadioButton {...props} />
         <Txt themes={theme}>{label}</Txt>
       </Label>
@@ -25,22 +25,28 @@ export const RadioButtonLabel: FC<Props> = ({ label, className = '', ...props })
 const Wrapper = styled.div`
   display: inline-block;
 `
-const Label = styled.label`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+const Label = styled.label<{ themes: Theme }>`
+  ${({ themes }) => {
+    const { palette } = themes
+    return css`
+      display: flex;
+      align-items: center;
+      color: ${palette.TEXT_BLACK};
+      cursor: pointer;
 
-  &.disabled {
-    cursor: default;
-  }
+      &.disabled {
+        color: ${palette.TEXT_DISABLED};
+        cursor: default;
+      }
+    `
+  }}
 `
 const Txt = styled.p<{ themes: Theme }>`
   ${({ themes }) => {
-    const { size, palette } = themes
+    const { size } = themes
     return css`
       margin: 0 0 0 ${size.pxToRem(size.space.XXS)};
       font-size: ${size.pxToRem(size.font.TALL)};
-      color: ${palette.TEXT_BLACK};
     `
   }}
 `