@seed-design/lynx-react 0.7.0 → 0.8.0

package/src/components/AppBar/AppBar.tsx

@@ -17,9 +17,11 @@ import type {
 } from "../../types";
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
 import { Icon } from "../Icon";
+import { IconSlotProvider } from "../Icon/Icon";
 import { AppBarProvider, useAppBarContext } from "./context";
 import { getLayoutWidth, getMainLayoutStyle, useAppBar } from "./useAppBar";
 import { mergeProps } from "../../utils/merge-props";
+import { useScaleFeedback } from "../../hooks/useScaleFeedback";
 
 type AppBarClassNames = ReturnType<typeof appBar>;
 type AppBarMainClassNames = ReturnType<typeof appBarMain>;
@@ -48,6 +50,66 @@ function useAppBarMainClassNames(consumer: string): AppBarMainClassNames {
   }
 }
 
+/**
+ * 아이콘 버튼의 bleed 보정 방향. `leading`은 왼쪽, `trailing`은 오른쪽, `both`는 양쪽.
+ */
+export type AppBarEdge = "leading" | "trailing" | "both";
+
+const AppBarEdgeContext = React.createContext<AppBarEdge | undefined>(undefined);
+
+/** Fragments and arrays do not create layout boxes; retain their keys and nesting. */
+function countEdgeChildren(children: React.ReactNode): number {
+  if (children == null || children === "" || typeof children === "boolean") return 0;
+  if (Array.isArray(children))
+    return children.reduce((count, child) => count + countEdgeChildren(child), 0);
+  if (
+    React.isValidElement<{ children?: React.ReactNode }>(children) &&
+    children.type === React.Fragment
+  ) {
+    return countEdgeChildren(children.props.children);
+  }
+  return 1;
+}
+
+// Lynx lacks :first-child/:last-child; pass both slot edges through Context to match
+// web spacing without shrinking the icon button's touch target.
+function provideEdgeToChildren(children: React.ReactNode): React.ReactNode {
+  const lastIndex = countEdgeChildren(children) - 1;
+  let index = 0;
+
+  function visit(child: React.ReactNode): React.ReactNode {
+    if (child == null || child === "" || typeof child === "boolean") return child;
+    if (Array.isArray(child)) return child.map(visit);
+    if (
+      React.isValidElement<{ children?: React.ReactNode }>(child) &&
+      child.type === React.Fragment
+    ) {
+      return React.cloneElement(child, { children: visit(child.props.children) });
+    }
+
+    const childIndex = index++;
+    const edge =
+      childIndex === 0
+        ? childIndex === lastIndex
+          ? "both"
+          : "leading"
+        : childIndex === lastIndex
+          ? "trailing"
+          : undefined;
+    if (!React.isValidElement(child)) return child;
+    // Native boxes and custom slots own their layout; do not pass an automatic edge into them.
+    const automaticEdge =
+      typeof child.type !== "string" && child.type !== AppBarSlot ? edge : undefined;
+    return (
+      <AppBarEdgeContext.Provider key={child.key} value={automaticEdge}>
+        {child}
+      </AppBarEdgeContext.Provider>
+    );
+  }
+
+  return visit(children);
+}
+
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface AppBarRootProps extends AppBarVariantProps, LynxStyledElementProps {}
@@ -113,7 +175,7 @@ export const AppBarLeft = React.forwardRef<unknown, AppBarLeftProps>((props, ref
       )}
       className={clsx(classNames.left, className)}
     >
-      {children}
+      {provideEdgeToChildren(children)}
     </view>
   );
 });
@@ -148,7 +210,7 @@ export const AppBarRight = React.forwardRef<unknown, AppBarRightProps>((props, r
       )}
       className={clsx(classNames.right, className)}
     >
-      {children}
+      {provideEdgeToChildren(children)}
     </view>
   );
 });
@@ -232,11 +294,18 @@ AppBarSubtitle.displayName = "AppBarSubtitle";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface AppBarIconButtonProps extends LynxElementProps, LynxPressableProps {
+export interface AppBarIconButtonProps
+  extends Omit<LynxElementProps, "flatten">,
+    LynxPressableProps {
   icon?: React.ReactElement<LynxIconElementProps>;
   "accessibility-label"?: LynxViewProps["accessibility-label"];
   "accessibility-element"?: LynxViewProps["accessibility-element"];
   "accessibility-traits"?: LynxViewProps["accessibility-traits"];
+  /**
+   * 슬롯의 첫·마지막 자식이 아이콘 버튼이면 해당 방향을, 유일한 자식이면 양쪽을 자동 보정한다.
+   * 명시하면 `AppBarLeft` / `AppBarRight`에서 감지한 자동 보정 방향을 덮어쓴다.
+   */
+  edge?: AppBarEdge;
 }
 
 export const AppBarIconButton = React.forwardRef<unknown, AppBarIconButtonProps>((props, ref) => {
@@ -244,12 +313,16 @@ export const AppBarIconButton = React.forwardRef<unknown, AppBarIconButtonProps>
     children,
     className,
     icon,
+    edge,
     "accessibility-element": accessibilityElement = true,
     "accessibility-label": accessibilityLabel,
     "accessibility-traits": accessibilityTraits = "button",
     ...nativeProps
   } = props;
   const classNames = useAppBarClassNames("AppBarIconButton");
+  const { scaleFeedbackTriggerProps, scaleFeedbackTargetProps } = useScaleFeedback();
+  const automaticEdge = React.useContext(AppBarEdgeContext);
+  const resolvedEdge = edge ?? automaticEdge;
 
   if (process.env.NODE_ENV !== "production" && accessibilityElement && !accessibilityLabel) {
     console.warn("AppBarIconButton requires `accessibility-label` for accessibility.");
@@ -257,31 +330,53 @@ export const AppBarIconButton = React.forwardRef<unknown, AppBarIconButtonProps>
 
   return (
     <view
-      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
+      {...mergeProps(
+        ref ? { ref: ref as LynxViewRef } : {},
+        scaleFeedbackTriggerProps,
+        scaleFeedbackTargetProps,
+        nativeProps,
+      )}
+      flatten={false}
       accessibility-element={accessibilityElement}
       accessibility-label={accessibilityLabel}
       accessibility-traits={accessibilityTraits}
-      className={clsx(classNames.iconButton, className)}
+      className={clsx(
+        classNames.iconButton,
+        (resolvedEdge === "leading" || resolvedEdge === "both") &&
+          "seed-app-bar__icon-button-edge-leading",
+        (resolvedEdge === "trailing" || resolvedEdge === "both") &&
+          "seed-app-bar__icon-button-edge-trailing",
+        className,
+      )}
     >
-      {icon ? <Icon className={classNames.icon} icon={icon} /> : children}
+      <IconSlotProvider value={{ classNames: { icon: classNames.icon }, deps: [classNames.icon] }}>
+        {icon ? <Icon icon={icon} /> : children}
+      </IconSlotProvider>
     </view>
   );
 });
 AppBarIconButton.displayName = "AppBarIconButton";
 
-export interface AppBarSlotProps extends LynxStyledElementProps {}
+export interface AppBarSlotProps extends LynxStyledElementProps {
+  /**
+   * @internal 커스텀 슬롯에서는 bleed 보정을 적용하지 않는다. 전달된 값은 native 속성에서 제외한다.
+   */
+  edge?: AppBarEdge;
+}
 
 export const AppBarSlot = React.forwardRef<unknown, AppBarSlotProps>((props, ref) => {
-  const { children, className, ...nativeProps } = props;
+  const { children, className, edge: _edge, ...nativeProps } = props;
   const classNames = useAppBarClassNames("AppBarSlot");
 
   return (
-    <view
-      {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
-      className={clsx(classNames.custom, className)}
-    >
-      {children}
-    </view>
+    <AppBarEdgeContext.Provider value={undefined}>
+      <view
+        {...mergeProps(ref ? { ref: ref as LynxViewRef } : {}, nativeProps)}
+        className={clsx(classNames.custom, className)}
+      >
+        {children}
+      </view>
+    </AppBarEdgeContext.Provider>
   );
 });
 AppBarSlot.displayName = "AppBarSlot";

package/src/components/AppBar/index.ts

@@ -7,6 +7,7 @@ export {
   AppBarSlot,
   AppBarSubtitle,
   AppBarTitle,
+  type AppBarEdge,
   type AppBarIconButtonProps,
   type AppBarLeftProps,
   type AppBarMainProps,