feat(lynx-react): add ActionButton.PrefixIcon/SuffixIcon

bunfig.toml

@@ -1,7 +1,7 @@
 [install]
 linker = "isolated"
 minimumReleaseAge = 86400 # 1 day
-minimumReleaseAgeExcludes = ["@karrotmarket/react-monochrome-icon", "@karrotmarket/react-multicolor-icon", "@karrotmarket/icon-data"]
+minimumReleaseAgeExcludes = ["@karrotmarket/react-monochrome-icon", "@karrotmarket/react-multicolor-icon", "@karrotmarket/lynx-monochrome-icon", "@karrotmarket/lynx-multicolor-icon", "@karrotmarket/icon-data"]
 
 [test]
 preload = ["./scripts/happydom.ts", "./scripts/testing-library.ts"]

docs/public/__docs__/index.json

@@ -1654,6 +1654,19 @@
               "description": "Lynx에서 SEED 디자인 토큰을 Tailwind CSS v3 유틸리티 클래스로 사용하는 방법을 안내합니다.",
               "docUrl": "/lynx/foundation/layout/styling"
             },
+            {
+              "id": "switch",
+              "title": "Switch",
+              "description": "특정 옵션이나 설정을 켜거나 끌 수 있도록 돕는 토글 컴포넌트입니다.",
+              "docUrl": "/lynx/components/switch",
+              "snippetKey": "ui:switch",
+              "snippets": [
+                {
+                  "label": "react",
+                  "path": "switch.tsx"
+                }
+              ]
+            },
             {
               "id": "tag-group",
               "title": "Tag Group",

ecosystem/postcss-lynx-compat/src/defaults.ts

@@ -290,6 +290,11 @@ export const defaultConfig: Required<LynxCompatConfig> = {
     "opacity",
     "filter",
 
+    // Lynx-specific (image)
+    // `<image>` 의 non-transparent 픽셀을 지정 색으로 tint 한다.
+    // Lynx 런타임에서 CSS property 로도 동작 확인됨.
+    "tint-color",
+
     // Transform & Animation
     "transform",
     "transform-origin",

examples/lynx-spa/package.json

@@ -12,8 +12,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@karrotmarket/lynx-monochrome-icon": "^1.4.0",
-    "@karrotmarket/lynx-multicolor-icon": "^1.6.0",
+    "@karrotmarket/lynx-monochrome-icon": "1.10.0",
+    "@karrotmarket/lynx-multicolor-icon": "1.13.0",
     "@lynx-js/lynx-ui-sheet": "^3.130.1",
     "@lynx-js/react": "^0.117.0",
     "@seed-design/lynx-css": "workspace:*",

examples/lynx-spa/src/App.tsx

@@ -17,6 +17,7 @@ import { SwitchPage } from "./pages/SwitchPage.jsx";
 import { TagGroupPage } from "./pages/TagGroupPage.jsx";
 import { ThemingPage } from "./pages/ThemingPage.jsx";
 import { CSSSelectorTestPage } from "./pages/CSSSelectorTestPage.jsx";
+import { IconColorPOCPage } from "./pages/IconColorPOCPage.jsx";
 import { UseControllableStatePage } from "./pages/UseControllableStatePage.jsx";
 import { UsePressTapPage } from "./pages/UsePressTapPage.jsx";
 
@@ -39,6 +40,7 @@ export type Page =
   | "test-native-box"
   | "test-tailwind-box"
   | "css-selector-test"
+  | "icon-color-poc"
   | "use-controllable-state"
   | "use-press-tap";
 
@@ -89,6 +91,7 @@ export function App(props: { onRender?: () => void }) {
       {currentPage === "test-native-box" && <TestNativeBoxPage />}
       {currentPage === "test-tailwind-box" && <TestTailwindBoxPage />}
       {currentPage === "css-selector-test" && <CSSSelectorTestPage />}
+      {currentPage === "icon-color-poc" && <IconColorPOCPage />}
       {currentPage === "use-controllable-state" && <UseControllableStatePage />}
       {currentPage === "use-press-tap" && <UsePressTapPage />}
       <Suspense>

examples/lynx-spa/src/pages/ActionButtonPage.tsx

@@ -1,3 +1,6 @@
+import IconChevronDownFill from '@karrotmarket/lynx-monochrome-icon/IconChevronDownFill';
+import IconPlusFill from '@karrotmarket/lynx-monochrome-icon/IconPlusFill';
+
 import { ActionButton } from '@seed-design/lynx-react';
 
 export function ActionButtonPage() {
@@ -59,6 +62,75 @@ export function ActionButtonPage() {
           Disabled Outline
         </ActionButton>
       </view>
+
+      <text style={{ fontSize: '16px', fontWeight: 'bold', marginTop: '8px' }}>
+        Prefix / Suffix Icon
+      </text>
+      <view
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: '8px',
+        }}
+      >
+        <ActionButton variant="brandSolid" prefixIcon={<IconPlusFill />}>
+          Prefix Icon
+        </ActionButton>
+        <ActionButton variant="neutralSolid" suffixIcon={<IconChevronDownFill />}>
+          Suffix Icon
+        </ActionButton>
+        <ActionButton
+          variant="brandOutline"
+          prefixIcon={<IconPlusFill />}
+          suffixIcon={<IconChevronDownFill />}
+        >
+          Both
+        </ActionButton>
+        <ActionButton variant="brandSolid" disabled prefixIcon={<IconPlusFill />}>
+          Disabled
+        </ActionButton>
+      </view>
+
+      <text style={{ fontSize: '16px', fontWeight: 'bold', marginTop: '8px' }}>
+        Icon Only
+      </text>
+      <view
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          gap: '8px',
+          alignItems: 'center',
+        }}
+      >
+        <ActionButton
+          layout="iconOnly"
+          variant="brandSolid"
+          icon={<IconPlusFill />}
+          aria-label="추가"
+        />
+        <ActionButton
+          layout="iconOnly"
+          variant="neutralSolid"
+          size="small"
+          icon={<IconPlusFill />}
+          aria-label="추가"
+        />
+        <ActionButton
+          layout="iconOnly"
+          variant="brandOutline"
+          icon={<IconPlusFill />}
+          aria-label="추가"
+        />
+        <ActionButton
+          layout="iconOnly"
+          variant="brandSolid"
+          disabled
+          icon={<IconPlusFill />}
+          aria-label="비활성"
+        />
+      </view>
     </scroll-view>
   );
 }

examples/lynx-spa/src/pages/FoundationMonochromeIconPage.tsx

@@ -640,7 +640,7 @@ import IconYenLine from "@karrotmarket/lynx-monochrome-icon/IconYenLine";
 const { $color } = vars;
 
 interface IconEntry {
-  component: (props: { size?: number; color: string }) => React.JSX.Element;
+  component: React.ComponentType<{ size?: number; color?: string; className?: string }>;
   name: string;
 }
 

examples/lynx-spa/src/pages/FoundationMulticolorIconPage.tsx

@@ -75,7 +75,7 @@ import IconWrench from "@karrotmarket/lynx-multicolor-icon/IconWrench";
 const { $color } = vars;
 
 interface IconEntry {
-  component: (props: { size?: number }) => React.JSX.Element;
+  component: React.ComponentType<{ size?: number; className?: string }>;
   name: string;
 }
 

examples/lynx-spa/src/pages/HomePage.tsx

@@ -85,6 +85,7 @@ export function HomePage({ navigate }: { navigate: (page: Page) => void }) {
       <ListItem title="Theming" onTap={() => navigate("theming")} />
       <ListItem title="Nested Vars Test (Lynx 3.6+)" onTap={() => navigate("nested-vars-test")} />
       <ListItem title="CSS Selector Test" onTap={() => navigate("css-selector-test")} />
+      <ListItem title="Icon Color POC" onTap={() => navigate("icon-color-poc")} />
     </scroll-view>
   );
 }