@charcoal-ui/react 4.0.0-beta.4 → 4.0.0-beta.5

package/src/components/SegmentedControl/__snapshots__/index.story.storyshot

@@ -1,100 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storybook Tests SegmentedControl ObjectSegments 1`] = `
-.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: var(--charcoal-surface3);
-  border-radius: 16px;
-}
-
-.c1 {
-  position: relative;
-  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;
-  cursor: pointer;
-  height: 32px;
-  padding-right: 16px;
-  padding-left: 16px;
-  border-radius: 16px;
-  color: var(--charcoal-text2);
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c2 {
-  position: absolute;
-  height: 0px;
-  width: 0px;
-  padding: 0;
-  margin: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  box-sizing: border-box;
-  overflow: hidden;
-  white-space: nowrap;
-  opacity: 0;
-}
-
-.c3 {
-  background: transparent;
-  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;
-  height: 22px;
-}
-
-.c4 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
 <div
   data-dark={false}
 >
   <div
     aria-label="test"
     aria-orientation="vertical"
-    className="c0"
+    className="charcoal-segmented-control"
     id="test-id"
     onBlur={[Function]}
     onFocus={[Function]}
@@ -103,12 +16,12 @@ exports[`Storybook Tests SegmentedControl ObjectSegments 1`] = `
   >
     <label
       aria-disabled={false}
-      checked={false}
-      className="c1"
+      className="charcoal-segmented-control-radio__label"
+      data-checked={false}
     >
       <input
         checked={false}
-        className="c2"
+        className="charcoal-segmented-control-radio__input"
         disabled={false}
         name="test-id"
         onChange={[Function]}
@@ -130,24 +43,16 @@ exports[`Storybook Tests SegmentedControl ObjectSegments 1`] = `
         type="radio"
         value="option1"
       />
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
-          選択肢1
-        </div>
-      </div>
+      選択肢1
     </label>
     <label
       aria-disabled={false}
-      checked={false}
-      className="c1"
+      className="charcoal-segmented-control-radio__label"
+      data-checked={false}
     >
       <input
         checked={false}
-        className="c2"
+        className="charcoal-segmented-control-radio__input"
         disabled={false}
         name="test-id"
         onChange={[Function]}
@@ -169,24 +74,16 @@ exports[`Storybook Tests SegmentedControl ObjectSegments 1`] = `
         type="radio"
         value="option2"
       />
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
-          選択肢2
-        </div>
-      </div>
+      選択肢2
     </label>
     <label
       aria-disabled={false}
-      checked={false}
-      className="c1"
+      className="charcoal-segmented-control-radio__label"
+      data-checked={false}
     >
       <input
         checked={false}
-        className="c2"
+        className="charcoal-segmented-control-radio__input"
         disabled={false}
         name="test-id"
         onChange={[Function]}
@@ -208,24 +105,16 @@ exports[`Storybook Tests SegmentedControl ObjectSegments 1`] = `
         type="radio"
         value="option3"
       />
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
-          選択肢3
-        </div>
-      </div>
+      選択肢3
     </label>
     <label
       aria-disabled={true}
-      checked={false}
-      className="c1"
+      className="charcoal-segmented-control-radio__label"
+      data-checked={false}
     >
       <input
         checked={false}
-        className="c2"
+        className="charcoal-segmented-control-radio__input"
         disabled={true}
         name="test-id"
         onChange={[Function]}
@@ -245,115 +134,20 @@ exports[`Storybook Tests SegmentedControl ObjectSegments 1`] = `
         type="radio"
         value="option4"
       />
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
-          選択肢4
-        </div>
-      </div>
+      選択肢4
     </label>
   </div>
 </div>
 `;
 
 exports[`Storybook Tests SegmentedControl StringSegments 1`] = `
-.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: var(--charcoal-surface3);
-  border-radius: 16px;
-}
-
-.c1 {
-  position: relative;
-  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;
-  cursor: pointer;
-  height: 32px;
-  padding-right: 16px;
-  padding-left: 16px;
-  border-radius: 16px;
-  color: var(--charcoal-text2);
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  cursor: default;
-  opacity: 0.32;
-}
-
-.c2 {
-  position: absolute;
-  height: 0px;
-  width: 0px;
-  padding: 0;
-  margin: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  box-sizing: border-box;
-  overflow: hidden;
-  white-space: nowrap;
-  opacity: 0;
-}
-
-.c3 {
-  background: transparent;
-  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;
-  height: 22px;
-}
-
-.c4 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
 <div
   data-dark={false}
 >
   <div
     aria-label="test"
     aria-orientation="vertical"
-    className="c0"
+    className="charcoal-segmented-control"
     id="test-id"
     onBlur={[Function]}
     onFocus={[Function]}
@@ -362,12 +156,12 @@ exports[`Storybook Tests SegmentedControl StringSegments 1`] = `
   >
     <label
       aria-disabled={false}
-      checked={false}
-      className="c1"
+      className="charcoal-segmented-control-radio__label"
+      data-checked={false}
     >
       <input
         checked={false}
-        className="c2"
+        className="charcoal-segmented-control-radio__input"
         disabled={false}
         name="test-id"
         onChange={[Function]}
@@ -389,24 +183,16 @@ exports[`Storybook Tests SegmentedControl StringSegments 1`] = `
         type="radio"
         value="option1"
       />
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
-          option1
-        </div>
-      </div>
+      option1
     </label>
     <label
       aria-disabled={false}
-      checked={false}
-      className="c1"
+      className="charcoal-segmented-control-radio__label"
+      data-checked={false}
     >
       <input
         checked={false}
-        className="c2"
+        className="charcoal-segmented-control-radio__input"
         disabled={false}
         name="test-id"
         onChange={[Function]}
@@ -428,24 +214,16 @@ exports[`Storybook Tests SegmentedControl StringSegments 1`] = `
         type="radio"
         value="option2"
       />
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
-          option2
-        </div>
-      </div>
+      option2
     </label>
     <label
       aria-disabled={false}
-      checked={false}
-      className="c1"
+      className="charcoal-segmented-control-radio__label"
+      data-checked={false}
     >
       <input
         checked={false}
-        className="c2"
+        className="charcoal-segmented-control-radio__input"
         disabled={false}
         name="test-id"
         onChange={[Function]}
@@ -467,15 +245,7 @@ exports[`Storybook Tests SegmentedControl StringSegments 1`] = `
         type="radio"
         value="option3"
       />
-      <div
-        className="c3"
-      >
-        <div
-          className="c4"
-        >
-          option3
-        </div>
-      </div>
+      option3
     </label>
   </div>
 </div>

package/src/components/SegmentedControl/index.css

@@ -0,0 +1,50 @@
+.charcoal-segmented-control {
+  display: inline-flex;
+  align-items: center;
+
+  background-color: var(--charcoal-surface3);
+  border-radius: 16px;
+}
+
+.charcoal-segmented-control-radio__label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 32px;
+
+  padding-right: 16px;
+  padding-left: 16px;
+  border-radius: 16px;
+  color: var(--charcoal-text2);
+
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.charcoal-segmented-control-radio__label[aria-disabled]:not(
+    [aria-disabled='false']
+  ) {
+  cursor: default;
+  opacity: 0.32;
+}
+
+.charcoal-segmented-control-radio__label[data-checked='true'] {
+  background-color: var(--charcoal-brand);
+  color: var(--charcoal-text5);
+}
+
+.charcoal-segmented-control-radio__input {
+  position: absolute;
+
+  height: 0px;
+  width: 0px;
+  padding: 0;
+  margin: 0;
+
+  appearance: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: 0;
+}

package/src/components/SegmentedControl/index.tsx

@@ -7,9 +7,10 @@ import {
   useRadio,
   useRadioGroup,
 } from '@react-aria/radio'
-import styled, { css } from 'styled-components'
-
 import { RadioProvider, useRadioContext } from './RadioGroupContext'
+import { useClassNames } from '../../_lib/useClassNames'
+
+import './index.css'
 
 type SegmentedControlItem = {
   label: React.ReactNode
@@ -35,6 +36,11 @@ export type SegmentedControlProps = {
 
 const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
   function SegmentedControlInner(props, ref) {
+    const className = useClassNames(
+      'charcoal-segmented-control',
+      props.className
+    )
+
     const ariaRadioGroupProps = useMemo<AriaRadioGroupProps>(
       () => ({
         ...props,
@@ -54,11 +60,7 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
     }, [props.data])
 
     return (
-      <SegmentedControlRoot
-        ref={ref}
-        {...radioGroupProps}
-        className={props.className}
-      >
+      <div ref={ref} {...radioGroupProps} className={className}>
         <RadioProvider value={state}>
           {segmentedControlItems.map((item) => (
             <Segmented
@@ -70,7 +72,7 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
             </Segmented>
           ))}
         </RadioProvider>
-      </SegmentedControlRoot>
+      </div>
     )
   }
 )
@@ -102,88 +104,17 @@ const Segmented = (props: RadioProps) => {
   )
 
   return (
-    <SegmentedRoot
+    <label
+      className="charcoal-segmented-control-radio__label"
       aria-disabled={isDisabled || state.isReadOnly}
-      checked={isSelected}
+      data-checked={isSelected}
     >
-      <SegmentedInput {...inputProps} ref={ref} />
-      <RadioLabel>
-        <SegmentedLabelInner>{props.children}</SegmentedLabelInner>
-      </RadioLabel>
-    </SegmentedRoot>
+      <input
+        className="charcoal-segmented-control-radio__input"
+        {...inputProps}
+        ref={ref}
+      />
+      {props.children}
+    </label>
   )
 }
-
-const SegmentedControlRoot = styled.div`
-  display: inline-flex;
-  align-items: center;
-
-  background-color: var(--charcoal-surface3);
-  border-radius: 16px;
-`
-
-const SegmentedRoot = styled.label<{ checked?: boolean }>`
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  height: 32px;
-
-  padding-right: 16px;
-  padding-left: 16px;
-  border-radius: 16px;
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    cursor: default;
-    opacity: 0.32;
-  }
-  color: var(--charcoal-text2);
-
-  ${({ checked = false }) =>
-    checked &&
-    css`
-      background-color: var(--charcoal-brand);
-      color: var(--charcoal-text5);
-    `}
-`
-const SegmentedInput = styled.input`
-  position: absolute;
-
-  height: 0px;
-  width: 0px;
-  padding: 0;
-  margin: 0;
-
-  appearance: none;
-  box-sizing: border-box;
-  overflow: hidden;
-  white-space: nowrap;
-  opacity: 0;
-`
-
-const RadioLabel = styled.div`
-  background: transparent;
-  display: flex;
-  align-items: center;
-  height: 22px;
-`
-const SegmentedLabelInner = styled.div`
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
-`

package/src/components/Switch/SwitchInput/index.css

@@ -0,0 +1,82 @@
+.charcoal-switch-input {
+  cursor: pointer;
+  appearance: none;
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  width: 28px;
+  border: 2px solid transparent;
+
+  transition-property: background-color, box-shadow;
+  transition-duration: 0.2s;
+
+  outline: none;
+  border-radius: 16px;
+  height: 16px;
+  margin: 0;
+  background-color: var(--charcoal-text4);
+}
+
+.charcoal-switch-input:disabled,
+.charcoal-switch-input[readonly] {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.charcoal-switch-input::after {
+  content: '';
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  transform: translateX(0);
+  transition: transform 0.2s;
+  border-radius: 1024px;
+  background-color: var(--charcoal-text5);
+}
+
+.charcoal-switch-input:checked::after {
+  transform: translateX(12px);
+  transition: transform 0.2s;
+}
+
+.charcoal-switch-input:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.charcoal-switch-input:not(:disabled):hover {
+  background-color: var(--charcoal-text4-hover);
+}
+
+.charcoal-switch-input:not(:disabled):active {
+  background-color: var(--charcoal-text4-press);
+}
+
+.charcoal-switch-input:not(:disabled):focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-switch-input:not(:disabled):focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-switch-input:not(:disabled):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.charcoal-switch-input:not(:disabled)::after:hover {
+  background-color: var(--charcoal-text5-hover);
+}
+
+.charcoal-switch-input:not(:disabled)::after:active {
+  background-color: var(--charcoal-text5-press);
+}
+
+.charcoal-switch-input:not(:disabled):checked:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.charcoal-switch-input:not(:disabled):checked:active {
+  background-color: var(--charcoal-brand-press);
+}