diff --git a/packages/react/src/components/Stack/Stack.js b/packages/react/src/components/Stack/Stack.tsx similarity index 74% rename from packages/react/src/components/Stack/Stack.js rename to packages/react/src/components/Stack/Stack.tsx index b7fcfc1343a7..bfe0974a10b5 100644 --- a/packages/react/src/components/Stack/Stack.js +++ b/packages/react/src/components/Stack/Stack.tsx @@ -21,6 +21,38 @@ const SPACING_STEPS = Array.from({ length: spacing.length - 1 }).map( } ); +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`. + */ + as?: (() => React.ReactNode) | string | React.ElementType; + + /** + * Provide the elements that will be rendered as children inside of the Stack + * component. These elements will have having spacing between them according + * to the `step` and `orientation` prop + */ + children?: React.ReactNode; + + /** + * Provide a custom class name to be used by the outermost element rendered by + * Stack + */ + className?: string; + + /** + * Provide either a custom value or a step from the spacing scale to be used + * as the gap in the layout + */ + gap?: string | (typeof SPACING_STEPS)[number]; + + /** + * Specify the orientation of them items in the Stack + */ + orientation?: 'horizontal' | 'vertical'; +} + /** * The Stack component is a useful layout utility in a component-based model. * This allows components to not use margin and instead delegate the @@ -38,7 +70,10 @@ const SPACING_STEPS = Array.from({ length: spacing.length - 1 }).map( * - https://paste.twilio.design/layout/stack/ * - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx */ -const Stack = React.forwardRef(function Stack(props, ref) { +const Stack = React.forwardRef(function Stack( + props, + ref +) { const { as: BaseComponent = 'div', children, diff --git a/packages/react/src/components/Stack/index.js b/packages/react/src/components/Stack/index.tsx similarity index 100% rename from packages/react/src/components/Stack/index.js rename to packages/react/src/components/Stack/index.tsx