diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml index 9b40826..316ed7b 100644 --- a/.github/workflows/deploy-storybook.yml +++ b/.github/workflows/deploy-storybook.yml @@ -4,9 +4,11 @@ on: push: branches: - deploy-storybook - pull_request: + pull_request_target: branches: - deploy-storybook + types: + - closed jobs: deploy-storybook: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 5a8a2d4..153d5dc 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -4,9 +4,11 @@ on: push: branches: - release - pull_request: + pull_request_target: branches: - release + types: + - closed jobs: release: diff --git a/packages/carbon-react-native/package.json b/packages/carbon-react-native/package.json index 2b09d65..4e20378 100644 --- a/packages/carbon-react-native/package.json +++ b/packages/carbon-react-native/package.json @@ -1,6 +1,6 @@ { "name": "@audira/carbon-react-native", - "version": "1.0.4", + "version": "1.0.5", "license": "MIT", "homepage": "https://rakadoank.github.io/carbon-react-native", "repository": "https://github.com/RakaDoank/carbon-react-native", diff --git a/packages/carbon-react-native/src/_internal/contexts/global-config/GlobalConfigContext.ts b/packages/carbon-react-native/src/_internal/contexts/global-config/GlobalConfigContext.ts index de7cd62..213642e 100644 --- a/packages/carbon-react-native/src/_internal/contexts/global-config/GlobalConfigContext.ts +++ b/packages/carbon-react-native/src/_internal/contexts/global-config/GlobalConfigContext.ts @@ -2,6 +2,10 @@ import { createContext, } from "react" +import { + I18nManager, +} from "react-native" + import type { NotificationColor, } from "../../../components/notification/NotificationColor" @@ -26,5 +30,5 @@ export const GlobalConfigContext = createContext({ android_buttonRippleEffect: true, notificationColor: "high_contrast", toastDuration: 5000, - rtl: false, + rtl: I18nManager.isRTL, }) diff --git a/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProvider.tsx b/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProvider.tsx index 72f6c99..184d59e 100644 --- a/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProvider.tsx +++ b/packages/carbon-react-native/src/_internal/providers/global-config/GlobalConfigProvider.tsx @@ -1,3 +1,7 @@ +import { + I18nManager, +} from "react-native" + import { GlobalConfigContext, } from "../../contexts/global-config" @@ -6,14 +10,20 @@ import type { GlobalConfigProviderProps, } from "./GlobalConfigProviderProps" +const isRtl = I18nManager.isRTL + export function GlobalConfigProvider({ - android_buttonRippleEffect, - notificationColor, - toastDuration, - rtl, + android_buttonRippleEffect = true, + notificationColor = "high_contrast", + toastDuration = 5000, + rtl: rtlProp, children, }: GlobalConfigProviderProps) { + const + rtl = + rtlProp ?? isRtl + return ( { children?: React.ReactNode, } diff --git a/packages/carbon-react-native/src/carbon-react-native/CarbonReactNative.tsx b/packages/carbon-react-native/src/carbon-react-native/CarbonReactNative.tsx index 92d27a5..b4239a7 100644 --- a/packages/carbon-react-native/src/carbon-react-native/CarbonReactNative.tsx +++ b/packages/carbon-react-native/src/carbon-react-native/CarbonReactNative.tsx @@ -9,15 +9,15 @@ import type { } from "./CarbonReactNativeProps" export function CarbonReactNative({ - // GlobalConfigProviderProps - android_buttonRippleEffect = true, - notificationColor = "high_contrast", - toastDuration = 5000, - rtl = false, - - // ThemeProviderProps + // +++ GlobalConfigProviderProps +++ + android_buttonRippleEffect, + notificationColor, + toastDuration, + rtl, + // --- GlobalConfigProviderProps --- + // +++ ThemeProviderProps +++ colorScheme, - + // --- ThemeProviderProps --- children, }: CarbonReactNativeProps) { diff --git a/packages/carbon-react-native/src/carbon-react-native/CarbonReactNativeProps.ts b/packages/carbon-react-native/src/carbon-react-native/CarbonReactNativeProps.ts index f2aa5a5..0a348fa 100644 --- a/packages/carbon-react-native/src/carbon-react-native/CarbonReactNativeProps.ts +++ b/packages/carbon-react-native/src/carbon-react-native/CarbonReactNativeProps.ts @@ -3,5 +3,5 @@ import type { ThemeProviderProps, } from "../_internal/providers" -export interface CarbonReactNativeProps extends Partial, ThemeProviderProps { +export interface CarbonReactNativeProps extends GlobalConfigProviderProps, ThemeProviderProps { } diff --git a/packages/carbon-react-native/src/components/box/Box.tsx b/packages/carbon-react-native/src/components/box/Box.tsx index 79594da..e25337d 100644 --- a/packages/carbon-react-native/src/components/box/Box.tsx +++ b/packages/carbon-react-native/src/components/box/Box.tsx @@ -21,6 +21,12 @@ import type { BoxRef, } from "./BoxRef" +/** + * This component is a basic React Native `View` to solve + * RTL support for component level. + * + * You may use this if your app provides custom localization options. + */ export const Box = forwardRef( function Box( { diff --git a/packages/carbon-react-native/src/components/button/base/Base.tsx b/packages/carbon-react-native/src/components/button/base/Base.tsx index a840432..00c9232 100644 --- a/packages/carbon-react-native/src/components/button/base/Base.tsx +++ b/packages/carbon-react-native/src/components/button/base/Base.tsx @@ -73,7 +73,7 @@ export const Base = forwardRef( getIconSize(size), iconMarginStyle = - mapIconMarginStyle[`${!!globalConfigContext.rtl}`][`${!!text}`] + mapIconMarginStyle[`${!!text}`] return ( ( function Ghost( { text, - iconProps, ...props }, ref, @@ -71,10 +68,6 @@ export const Ghost = forwardRef( }, icon: mapIconColor[themeContext.colorScheme], }} - iconProps={{ - ...iconProps, - style: [mapIconPLByText[`${!!text}`], iconProps?.style], - }} /> ) @@ -125,19 +118,6 @@ const }, }), - style = - StyleSheet.create({ - iconPL8: { - paddingLeft: Spacing.spacing_03, - }, - }), - - mapIconPLByText: Record = - { - false: null, - true: style.iconPL8, - }, - mapIconColor: Record> = { gray_10: { diff --git a/packages/carbon-react-native/src/components/index.ts b/packages/carbon-react-native/src/components/index.ts index 90bf611..771734b 100644 --- a/packages/carbon-react-native/src/components/index.ts +++ b/packages/carbon-react-native/src/components/index.ts @@ -1,10 +1,12 @@ import * as Button from "./button" import * as Notification from "./notification" +import * as TableToolbarButton from "./table-toolbar-button" import * as Toggle from "./toggle" export { Button, Notification, + TableToolbarButton, Toggle, } @@ -31,10 +33,16 @@ export * from "./radio-button-group" export * from "./radio-button-input" export * from "./switch" export * from "./table" +export * from "./table-batch-action-bar" +export * from "./table-batch-action-bar-button" export * from "./table-cell" export * from "./table-cell-header" export * from "./table-cell-icon" export * from "./table-cell-text" +export * from "./table-header" +export * from "./table-toolbar" +export * from "./table-toolbar-button" +export * from "./table-toolbar-switcher" export * from "./table-row" export * from "./table-row-header" export * from "./text" diff --git a/packages/carbon-react-native/src/components/scroll-view/ScrollView.tsx b/packages/carbon-react-native/src/components/scroll-view/ScrollView.tsx new file mode 100644 index 0000000..aa77403 --- /dev/null +++ b/packages/carbon-react-native/src/components/scroll-view/ScrollView.tsx @@ -0,0 +1,62 @@ +import { + forwardRef, + useContext, +} from "react" + +import { + ScrollView as ReactNativeScrollView, +} from "react-native" + +import { + GlobalConfigContext, +} from "../../_internal/contexts" + +import * as CarbonStyleSheet from "../../carbon-style-sheet" + +import type { + ScrollViewProps, +} from "./ScrollViewProps" + +/** + * This component is a basic React Native `ScrollView` to solve + * RTL support for component level. + * + * You may use this if your app provides custom localization options. + */ +export const ScrollView = forwardRef( + function ScrollView( + { + dir: dirProp, + style, + contentContainerStyle, + ...props + }, + ref, + ) { + + const + globalConfigContext = + useContext(GlobalConfigContext), + + dir = + dirProp ?? + globalConfigContext.rtl ? "rtl" : "ltr" + + return ( + + ) + + }, +) as unknown as typeof ReactNativeScrollView & ReactNativeScrollView diff --git a/packages/carbon-react-native/src/components/scroll-view/ScrollViewProps.ts b/packages/carbon-react-native/src/components/scroll-view/ScrollViewProps.ts new file mode 100644 index 0000000..219b95d --- /dev/null +++ b/packages/carbon-react-native/src/components/scroll-view/ScrollViewProps.ts @@ -0,0 +1,6 @@ +import type { + ScrollViewProps as Props, +} from "react-native" + +export interface ScrollViewProps extends Props { +} diff --git a/packages/carbon-react-native/src/components/scroll-view/index.ts b/packages/carbon-react-native/src/components/scroll-view/index.ts new file mode 100644 index 0000000..d80f5a6 --- /dev/null +++ b/packages/carbon-react-native/src/components/scroll-view/index.ts @@ -0,0 +1,2 @@ +export * from "./ScrollView" +export type * from "./ScrollViewProps" diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButton.tsx b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButton.tsx new file mode 100644 index 0000000..30d7ac2 --- /dev/null +++ b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButton.tsx @@ -0,0 +1,74 @@ +import { + forwardRef, + useContext, +} from "react" + +import * as CarbonStyleSheet from "../../carbon-style-sheet" + +import { + Primary as ButtonPrimary, + type PrimaryProps as ButtonPrimaryProps, +} from "../button/primary" + +import type { + TableBatchActionBarSize, +} from "../table-batch-action-bar/TableBatchActionBarSize" + +import { + TableBatchActionBarContext, +} from "../table-batch-action-bar/_TableBatchActionBarContext" + +import type { + TableBatchActionBarButtonProps, +} from "./TableBatchActionBarButtonProps" + +import type { + TableBatchActionBarButtonRef, +} from "./TableBatchActionBarButtonRef" + +export const TableBatchActionBarButton = forwardRef( + function TableBatchActionBarButton( + { + Icon, + iconProps, + style, + ...props + }, + ref, + ) { + + const + tableBatchActionBarContext = + useContext(TableBatchActionBarContext) + + return ( + + ) + + }, +) + +const + mapBatchActionBarSizeToButtonSize = + { + small: "small", + large: "large_productive", + } as const satisfies Record> diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonProps.ts b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonProps.ts new file mode 100644 index 0000000..26635bd --- /dev/null +++ b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonProps.ts @@ -0,0 +1,6 @@ +import type { + PrimaryProps, +} from "../button/primary/PrimaryProps" + +export interface TableBatchActionBarButtonProps extends Omit { +} diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonRef.ts b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonRef.ts new file mode 100644 index 0000000..d0a3156 --- /dev/null +++ b/packages/carbon-react-native/src/components/table-batch-action-bar-button/TableBatchActionBarButtonRef.ts @@ -0,0 +1,6 @@ +import type { + PrimaryRef, +} from "../button/primary/PrimaryRef" + +export interface TableBatchActionBarButtonRef extends PrimaryRef { +} diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar-button/index.ts b/packages/carbon-react-native/src/components/table-batch-action-bar-button/index.ts new file mode 100644 index 0000000..db06c9b --- /dev/null +++ b/packages/carbon-react-native/src/components/table-batch-action-bar-button/index.ts @@ -0,0 +1,3 @@ +export * from "./TableBatchActionBarButton" +export type * from "./TableBatchActionBarButtonProps" +export type * from "./TableBatchActionBarButtonRef" diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBar.tsx b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBar.tsx new file mode 100644 index 0000000..43d25f8 --- /dev/null +++ b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBar.tsx @@ -0,0 +1,156 @@ +import { + forwardRef, + useContext, +} from "react" + +import { + StyleSheet, + type ViewStyle, +} from "react-native" + +import * as CarbonStyleSheet from "../../carbon-style-sheet" + +import { + Box, +} from "../box/Box" + +import { + ScrollView, +} from "../scroll-view/ScrollView" + +import { + TableContext, +} from "../table/_TableContext" + +import { + Text, +} from "../text/Text" + +import type { + TableBatchActionBarProps, +} from "./TableBatchActionBarProps" + +import type { + TableBatchActionBarRef, +} from "./TableBatchActionBarRef" + +import type { + TableBatchActionBarSize, +} from "./TableBatchActionBarSize" + +import { + TableBatchActionBarContext, +} from "./_TableBatchActionBarContext" + +export const TableBatchActionBar = forwardRef( + function TableBatchActionBar( + { + size: sizeProp, + horizontal = true, + text, + textProps, + buttons, + style, + contentContainerStyle, + ...props + }, + ref, + ) { + + const + tableContext = + useContext(TableContext), + + size = + sizeProp ?? tableContext.rowSize, + + batchActionBarSize = + mapRowSizeToBatchActionBarSize[size] + + return ( + + + + { text } + + + { !!buttons && ( + + { buttons } + + ) } + + + ) + + }, +) + +const + styleSheetSize = + StyleSheet.create({ + small: { + height: 32, + }, + large: { + height: 48, + }, + } as const satisfies Record>>), + + mapRowSizeToBatchActionBarSize = + { + extra_small: "small", + small: "small", + medium: "small", + large: "large", + extra_large: "large", + } as const satisfies Record, + + carbonStyleSheet = + CarbonStyleSheet.create({ + tableBatchActionBar: { + backgroundColor: CarbonStyleSheet.color.background_brand, + }, + text: { + textWrap: "nowrap", + color: CarbonStyleSheet.color.text_on_color, + }, + }) diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarProps.ts b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarProps.ts new file mode 100644 index 0000000..7016260 --- /dev/null +++ b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarProps.ts @@ -0,0 +1,42 @@ +import type { + ScrollViewProps, +} from "react-native" + +import type { + TextProps, +} from "../text/TextProps" + +import type { + TableBatchActionBarSize, +} from "./TableBatchActionBarSize" + +export interface TableBatchActionBarProps extends Omit { + /** + * Based on the IBM spec, the `large` batch action bar is paired with the extra large and large row sizes. + * The `small` batch action bar is paired with the small and extra small row sizes. + * + * You may don't want to set the batch action bar size manually. + * Prefer to opt `rowSize` in the `Table` prop instead, + * and the batch action bar size will be adjusted automatically based on what the row size is. + * + * @default "large" + */ + size?: TableBatchActionBarSize, + /** + * Provide descriptive text after one or multiple items selected, + * + * e.g. "0 items selected", "3 products selected", etc. + */ + text: string, + textProps?: Omit< + TextProps, + | "children" + | "type" + >, + /** + * Provide one or multiple `` in this prop. + * + * To provide multiple buttons, you can start it with `<>` or `` + */ + buttons: React.ReactNode, +} diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarRef.ts b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarRef.ts new file mode 100644 index 0000000..c470b4c --- /dev/null +++ b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarRef.ts @@ -0,0 +1,6 @@ +import type { + ScrollView, +} from "react-native" + +export interface TableBatchActionBarRef extends ScrollView { +} diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarSize.ts b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarSize.ts new file mode 100644 index 0000000..8bbf159 --- /dev/null +++ b/packages/carbon-react-native/src/components/table-batch-action-bar/TableBatchActionBarSize.ts @@ -0,0 +1,3 @@ +export type TableBatchActionBarSize = + | "large" + | "small" diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/_TableBatchActionBarContext.ts b/packages/carbon-react-native/src/components/table-batch-action-bar/_TableBatchActionBarContext.ts new file mode 100644 index 0000000..7eee1d6 --- /dev/null +++ b/packages/carbon-react-native/src/components/table-batch-action-bar/_TableBatchActionBarContext.ts @@ -0,0 +1,15 @@ +import { + createContext, +} from "react" + +import type { + TableBatchActionBarSize, +} from "./TableBatchActionBarSize" + +export interface TableBatchActionBarContext { + size: TableBatchActionBarSize, +} + +export const TableBatchActionBarContext = createContext({ + size: "large", +}) diff --git a/packages/carbon-react-native/src/components/table-batch-action-bar/index.ts b/packages/carbon-react-native/src/components/table-batch-action-bar/index.ts new file mode 100644 index 0000000..58c8776 --- /dev/null +++ b/packages/carbon-react-native/src/components/table-batch-action-bar/index.ts @@ -0,0 +1,4 @@ +export * from "./TableBatchActionBar" +export type * from "./TableBatchActionBarProps" +export type * from "./TableBatchActionBarRef" +export type * from "./TableBatchActionBarSize" diff --git a/packages/carbon-react-native/src/components/table-cell-header/_sort-icon/SortIcon.tsx b/packages/carbon-react-native/src/components/table-cell-header/_sort-icon/SortIcon.tsx index 428f5bb..1226356 100644 --- a/packages/carbon-react-native/src/components/table-cell-header/_sort-icon/SortIcon.tsx +++ b/packages/carbon-react-native/src/components/table-cell-header/_sort-icon/SortIcon.tsx @@ -8,6 +8,7 @@ import { import { Animated, Easing, + Platform, } from "react-native" import { @@ -58,7 +59,7 @@ export const SortIcon = forwardRef( { toValue: 0, duration: 0, - useNativeDriver: false, + useNativeDriver: Platform.OS != "web", }, ) .start() @@ -75,7 +76,7 @@ export const SortIcon = forwardRef( Motion.Easing.standard.productive.x2, Motion.Easing.standard.productive.y2, ), - useNativeDriver: false, + useNativeDriver: Platform.OS != "web", }, ) .start() @@ -99,7 +100,7 @@ export const SortIcon = forwardRef( Motion.Easing.entrance.productive.x2, Motion.Easing.entrance.productive.y2, ), - useNativeDriver: true, + useNativeDriver: Platform.OS != "web", }, ) .start() diff --git a/packages/carbon-react-native/src/components/table-header/TableHeader.tsx b/packages/carbon-react-native/src/components/table-header/TableHeader.tsx new file mode 100644 index 0000000..1eb6075 --- /dev/null +++ b/packages/carbon-react-native/src/components/table-header/TableHeader.tsx @@ -0,0 +1,110 @@ +import { + forwardRef, + useContext, +} from "react" + +import type { + TextStyle, + ViewStyle, +} from "react-native" + +import type { + ColorLayerLevel, +} from "@audira/carbon-react-native-elements" + +import * as CarbonStyleSheet from "../../carbon-style-sheet" + +import { + Box, +} from "../box/Box" + +import { + LayerContext, +} from "../layer/LayerContext" + +import { + Text, +} from "../text/Text" + +import type { + TableHeaderProps, +} from "./TableHeaderProps" + +import type { + TableHeaderRef, +} from "./TableHeaderRef" + +export const TableHeader = forwardRef( + function TableHeader( + { + title, + description, + titleProps, + descriptionProps, + style, + ...props + }, + ref, + ) { + + const + layerContext = + useContext(LayerContext) + + return ( + + + { title } + + + { !!description && ( + + { description } + + ) } + + ) + + }, +) + +const + carbonStyleSheet = + CarbonStyleSheet.create({ + bg_1: { + backgroundColor: CarbonStyleSheet.color.layer_01, + }, + bg_2: { + backgroundColor: CarbonStyleSheet.color.layer_02, + }, + bg_3: { + backgroundColor: CarbonStyleSheet.color.layer_03, + }, + description: { + color: CarbonStyleSheet.color.text_secondary, + }, + } as const satisfies { + [Layer in `bg_${ColorLayerLevel}`]: Pick + } & { + description: Pick, + }) diff --git a/packages/carbon-react-native/src/components/table-header/TableHeaderProps.ts b/packages/carbon-react-native/src/components/table-header/TableHeaderProps.ts new file mode 100644 index 0000000..6e74cbe --- /dev/null +++ b/packages/carbon-react-native/src/components/table-header/TableHeaderProps.ts @@ -0,0 +1,22 @@ +import type { + BoxProps, +} from "../box/BoxProps" + +import type { + TextProps, +} from "../text/TextProps" + +export interface TableHeaderProps extends Omit { + title: string, + description?: string, + titleProps?: Omit< + TextProps, + | "type" + | "children" + >, + descriptionProps?: Omit< + TextProps, + | "type" + | "children" + >, +} diff --git a/packages/carbon-react-native/src/components/table-header/TableHeaderRef.ts b/packages/carbon-react-native/src/components/table-header/TableHeaderRef.ts new file mode 100644 index 0000000..c12c054 --- /dev/null +++ b/packages/carbon-react-native/src/components/table-header/TableHeaderRef.ts @@ -0,0 +1,6 @@ +import type { + BoxRef, +} from "../box/BoxRef" + +export interface TableHeaderRef extends BoxRef { +} diff --git a/packages/carbon-react-native/src/components/table-header/index.ts b/packages/carbon-react-native/src/components/table-header/index.ts new file mode 100644 index 0000000..a61ee6d --- /dev/null +++ b/packages/carbon-react-native/src/components/table-header/index.ts @@ -0,0 +1,3 @@ +export * from "./TableHeader" +export type * from "./TableHeaderProps" +export type * from "./TableHeaderRef" diff --git a/packages/carbon-react-native/src/components/table-row/TableRowProps.ts b/packages/carbon-react-native/src/components/table-row/TableRowProps.ts index e417eef..697b744 100644 --- a/packages/carbon-react-native/src/components/table-row/TableRowProps.ts +++ b/packages/carbon-react-native/src/components/table-row/TableRowProps.ts @@ -13,6 +13,9 @@ import type { export interface TableRowProps extends Omit { /** + * You may don't want to set the row size each row individually. + * Prefer to opt `rowSize` in the `Table` prop instead. + * * @default "large" * @see https://carbondesignsystem.com/components/data-table/style/#rows */ diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/_useSize.tsx b/packages/carbon-react-native/src/components/table-toolbar-button/_useSize.tsx new file mode 100644 index 0000000..476ad3a --- /dev/null +++ b/packages/carbon-react-native/src/components/table-toolbar-button/_useSize.tsx @@ -0,0 +1,28 @@ +import { + useContext, +} from "react" + +import type { + Size, +} from "../button/Size" + +import { + TableToolbarContext, +} from "../table-toolbar/_TableToolbarContext" + +export function useSize(): Size { + + const + tableToolbarContext = + useContext(TableToolbarContext) + + return mapToolbarSizeToButtonSize[tableToolbarContext.size] + +} + +const + mapToolbarSizeToButtonSize = + { + small: "small", + large: "large_productive", + } as const satisfies Record diff --git a/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIcon.tsx b/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIcon.tsx new file mode 100644 index 0000000..5cd11fb --- /dev/null +++ b/packages/carbon-react-native/src/components/table-toolbar-button/ghost-icon/GhostIcon.tsx @@ -0,0 +1,43 @@ +import { + forwardRef, +} from "react" + +import { + GhostIcon as Button, +} from "../../button/ghost-icon/GhostIcon" + +import { + useSize, +} from "../_useSize" + +import type { + GhostIconProps, +} from "./GhostIconProps" + +import type { + GhostIconRef, +} from "./GhostIconRef" + +export const GhostIcon = forwardRef( + function GhostIcon( + { + size: sizeProp, + ...props + }, + ref, + ) { + + const + size = + useSize() + + return ( +