Merge pull request #435 from pixiv/feat/remove-charcoal-styled-from-s…

…witch Feat/remove-charcoal-styled-from-switch
pixiv · Jan 9, 2024 · a1c0ade · a1c0ade
2 parents 45b2844 + e0d0f0d
commit a1c0ade
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 39 deletions.
diff --git a/packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot
@@ -13,19 +13,15 @@ exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
 }
 
 .c3:disabled,
-.c3[aria-disabled]:not([aria-disabled=false]) {
+.c3[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3:active > input {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c3:disabled,
-.c3[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c4 {
   -webkit-appearance: none;
   -moz-appearance: none;

diff --git a/packages/react/src/components/Switch/__snapshots__/index.story.storyshot b/packages/react/src/components/Switch/__snapshots__/index.story.storyshot
@@ -13,19 +13,15 @@ exports[`Storyshots Switch Labelled 1`] = `
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c0:active > input {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c2 {
   font-size: 14px;
   line-height: 22px;
@@ -168,19 +164,15 @@ exports[`Storyshots Switch Playground 1`] = `
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c0:active > input {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c2 {
   font-size: 14px;
   line-height: 22px;
@@ -322,19 +314,15 @@ exports[`Storyshots Switch Unlabelled 1`] = `
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c0:active > input {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   -webkit-appearance: none;
   -moz-appearance: none;

diff --git a/packages/react/src/components/Switch/index.tsx b/packages/react/src/components/Switch/index.tsx
@@ -4,8 +4,6 @@ import { useMemo, memo, forwardRef } from 'react'
 import * as React from 'react'
 import { useToggleState } from 'react-stately'
 import styled from 'styled-components'
-import { theme } from '../../styled'
-import { disabledSelector } from '@charcoal-ui/utils'
 import { useObjectRef } from '@react-aria/utils'
 
 export type SwitchProps = {
@@ -68,28 +66,25 @@ const Label = styled.label`
   cursor: pointer;
   outline: 0;
 
-  ${theme((o) => o.disabled)}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+    cursor: default;
+  }
 
   :active > input {
     box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
   }
-
-  ${disabledSelector} {
-    cursor: default;
-  }
 `
 
 const LabelInner = styled.div`
-  ${theme((o) => [
-    o.typography(14).preserveHalfLeading,
-    o.font.text2,
-    o.margin.left(4),
-  ])}
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+  margin-left: 4px;
 `
 
-const SwitchInput = styled.input.attrs({
-  type: 'checkbox',
-})`
+const SwitchInput = styled.input.attrs({ type: 'checkbox' })`
   appearance: none;
   display: inline-flex;
   position: relative;