chore: classNameの生成を調整

kufu · Feb 13, 2025 · c9aa384 · c9aa384
1 parent 86c5e73
commit c9aa384
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 21 deletions.
diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx
@@ -41,7 +41,7 @@ export const AccordionPanelContext = React.createContext<{
   parentRef: null,
 })
 
-const accordionWrapper = tv({
+const classNameGenerator = tv({
   base: 'smarthr-ui-AccordionPanel',
 })
 
@@ -55,7 +55,7 @@ export const AccordionPanel: React.FC<Props & ElementProps> = ({
 }) => {
   const [expandedItems, setExpanded] = useState(flatArrayToMap(defaultExpanded))
   const parentRef = useRef<HTMLDivElement>(null)
-  const style = useMemo(() => accordionWrapper({ className }), [className])
+  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])
 
   const onClickTrigger = useCallback(
     (itemName: string, isExpanded: boolean) => {
@@ -79,8 +79,8 @@ export const AccordionPanel: React.FC<Props & ElementProps> = ({
         parentRef,
       }}
     >
-      {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}
-      <div {...props} className={style} ref={parentRef} role="presentation" />
+      {}
+      <div {...props} ref={parentRef} role="presentation" className={actualClassName} />
     </AccordionPanelContext.Provider>
   )
 }
diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelContent.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelContent.tsx
@@ -19,7 +19,7 @@ import { AccordionPanelItemContext } from './AccordionPanelItem'
 type Props = PropsWithChildren
 type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>
 
-const accordionPanelContent = tv({
+const classNameGenerator = tv({
   base: [
     'smarthr-ui-AccordionPanel-content',
     'shr-max-h-0 shr-transition-[max-height,_visible,_opacity] shr-duration-150 shr-ease-in-out shr-invisible shr-opacity-0',
@@ -32,18 +32,18 @@ export const AccordionPanelContent: FC<Props & ElementProps> = ({ className, ...
   const { expandedItems } = useContext(AccordionPanelContext)
   const isInclude = useMemo(() => getIsInclude(expandedItems, name), [expandedItems, name])
   const wrapperRef = useRef<HTMLDivElement>(null)
-  const style = useMemo(() => accordionPanelContent({ className }), [className])
+  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])
 
   return (
     <Transition in={isInclude} timeout={150} nodeRef={wrapperRef}>
       {(status) => (
         <div
           {...props}
+          ref={wrapperRef}
           id={`${name}-content`}
-          className={`${style} ${status}`}
           aria-labelledby={`${name}-trigger`}
           aria-hidden={!isInclude}
-          ref={wrapperRef}
+          className={`${actualClassName} ${status}`}
         />
       )}
     </Transition>

diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelItem.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelItem.tsx
@@ -22,20 +22,20 @@ export const AccordionPanelItemContext = createContext<{ name: string }>({
   name: '',
 })
 
-const accordionPanelItem = tv({
+const classNameGenerator = tv({
   base: ['smarthr-ui-AccordionPanel-item', '[&_+_&]:shr-border-t-shorthand'],
 })
 
 export const AccordionPanelItem: FC<Props & ElementProps> = ({ name, className, ...props }) => {
-  const style = useMemo(() => accordionPanelItem({ className }), [className])
+  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])
 
   return (
     <AccordionPanelItemContext.Provider
       value={{
         name,
       }}
     >
-      <Section {...props} className={style} />
+      <Section {...props} className={actualClassName} />
     </AccordionPanelItemContext.Provider>
   )
 }
diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx
@@ -36,7 +36,7 @@ type Props = PropsWithChildren<{
 }>
 type ElementProps = Omit<ComponentPropsWithoutRef<'button'>, keyof Props>
 
-const accordionPanelTrigger = tv({
+const classNameGenerator = tv({
   slots: {
     title: 'shr-grow shr-leading-tight',
     button: [
@@ -66,8 +66,8 @@ export const AccordionPanelTrigger: FC<Props & ElementProps> = ({
   headingTag,
   ...props
 }) => {
-  const styles = useMemo(() => {
-    const { title, button, leftIcon, rightIcon } = accordionPanelTrigger()
+  const classNames = useMemo(() => {
+    const { title, button, leftIcon, rightIcon } = classNameGenerator()
 
     return {
       title: title(),
@@ -177,10 +177,10 @@ export const AccordionPanelTrigger: FC<Props & ElementProps> = ({
         aria-controls={`${name}-content`}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
-        className={styles.button}
+        className={classNames.button}
         data-component="AccordionHeaderButton"
       >
-        <MemoizedTitle iconPosition={iconPosition} styles={styles}>
+        <MemoizedTitle iconPosition={iconPosition} classNames={classNames}>
           {children}
         </MemoizedTitle>
       </button>
@@ -191,12 +191,12 @@ export const AccordionPanelTrigger: FC<Props & ElementProps> = ({
 const MemoizedTitle = React.memo<
   PropsWithChildren<{
     iconPosition: undefined | 'left' | 'right'
-    styles: { leftIcon: string; rightIcon: string; title: string }
+    classNames: { leftIcon: string; rightIcon: string; title: string }
   }>
->(({ styles, iconPosition, children }) => (
+>(({ classNames, iconPosition, children }) => (
   <Cluster className="shr-flex-nowrap" align="center" as="span">
-    {iconPosition === 'left' && <FaCaretRightIcon className={styles.leftIcon} />}
-    <span className={styles.title}>{children}</span>
-    {iconPosition === 'right' && <FaCaretDownIcon className={styles.rightIcon} />}
+    {iconPosition === 'left' && <FaCaretRightIcon className={classNames.leftIcon} />}
+    <span className={classNames.title}>{children}</span>
+    {iconPosition === 'right' && <FaCaretDownIcon className={classNames.rightIcon} />}
   </Cluster>
 ))