diff --git a/.all-contributorsrc b/.all-contributorsrc index b5e1af3ee62e..13b30ca113d6 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1390,6 +1390,14 @@ ] }, { + "login": "onurozkardes", + "name": "Onur Özkardeş", + "avatar_url": "https://avatars.githubusercontent.com/u/38096930?v=4", + "profile": "https://github.com/onurozkardes", + "contributions": [ + "code" + ] + }, "login": "mattborghi", "name": "Matias Borghi", "avatar_url": "https://avatars.githubusercontent.com/u/11933424?v=4", diff --git a/packages/react/src/components/Stack/HStack.tsx b/packages/react/src/components/Stack/HStack.tsx new file mode 100644 index 000000000000..3fd348d24ab7 --- /dev/null +++ b/packages/react/src/components/Stack/HStack.tsx @@ -0,0 +1,23 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; + +import { Stack, StackProps } from './Stack'; + +const HStack = React.forwardRef(function HStack( + { children, ...props }, + ref +) { + return ( + + {children} + + ); +}); + +export { HStack }; diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx index bfe0974a10b5..7112d1a7bad0 100644 --- a/packages/react/src/components/Stack/Stack.tsx +++ b/packages/react/src/components/Stack/Stack.tsx @@ -5,10 +5,11 @@ * LICENSE file in the root directory of this source tree. */ -import { spacing } from '@carbon/layout'; +import React from 'react'; import cx from 'classnames'; import PropTypes from 'prop-types'; -import React from 'react'; +import { spacing } from '@carbon/layout'; + import { usePrefix } from '../../internal/usePrefix'; /** @@ -21,7 +22,7 @@ const SPACING_STEPS = Array.from({ length: spacing.length - 1 }).map( } ); -interface StackProps extends React.HTMLAttributes { +export interface StackProps extends React.HTMLAttributes { /** * Provide a custom element type to render as the outermost element in * the Stack component. By default, this component will render a `div`. diff --git a/packages/react/src/components/Stack/VStack.tsx b/packages/react/src/components/Stack/VStack.tsx new file mode 100644 index 000000000000..4a804d738e2c --- /dev/null +++ b/packages/react/src/components/Stack/VStack.tsx @@ -0,0 +1,19 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; + +import { Stack, StackProps } from './Stack'; + +const VStack = React.forwardRef(function VStack( + props, + ref +) { + return ; +}); + +export { VStack }; diff --git a/packages/react/src/components/Stack/index.ts b/packages/react/src/components/Stack/index.ts new file mode 100644 index 000000000000..f2ab47fb0a78 --- /dev/null +++ b/packages/react/src/components/Stack/index.ts @@ -0,0 +1,10 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +export { HStack } from './HStack'; +export { VStack } from './VStack'; +export { Stack, type StackProps } from './Stack'; diff --git a/packages/react/src/components/Stack/index.tsx b/packages/react/src/components/Stack/index.tsx deleted file mode 100644 index 6045c8202428..000000000000 --- a/packages/react/src/components/Stack/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React, { ReactNode } from 'react'; -import { Stack } from './Stack'; -import { ForwardRefReturn } from '../../types/common'; - -const HStack: ForwardRefReturn = React.forwardRef(function HStack( - props, - ref -) { - return ; -}); - -const VStack: ForwardRefReturn = React.forwardRef(function VStack( - props, - ref -) { - return ; -}); - -export { HStack, Stack, VStack }; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 20ad3504b494..dad7ce909f26 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -76,6 +76,7 @@ export * from './components/SkeletonIcon'; export * from './components/SkeletonPlaceholder'; export * from './components/SkeletonText'; export * from './components/Slider'; +export * from './components/Stack'; export * from './components/StructuredList'; export * from './components/Switch'; export * from './components/Tab';