diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx index e7a185ca..a7ef35e1 100644 --- a/src/components/Panel/Panel.stories.tsx +++ b/src/components/Panel/Panel.stories.tsx @@ -25,6 +25,7 @@ export const Playground = { height: "", fillHeight: false, width: "50%", + alignItems: "start", children: ( <> Example panel title diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index 9ff2ba7e..480efc1a 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -4,6 +4,7 @@ import styled from "styled-components"; export type PanelPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl"; export type PanelColor = "default" | "muted" | "transparent"; +type AlignItemsOption = "start" | "center" | "end"; export interface PanelProps extends HTMLAttributes { hasBorder?: boolean; @@ -16,6 +17,7 @@ export interface PanelProps extends HTMLAttributes { fillWidth?: boolean; height?: string; fillHeight?: boolean; + alignItems?: AlignItemsOption; } export const Panel = ({ @@ -29,6 +31,7 @@ export const Panel = ({ fillWidth, height, fillHeight, + alignItems = "center", ...props }: PanelProps) => ( {children} @@ -57,11 +61,13 @@ const Wrapper = styled.div<{ $height?: string; $fillHeight?: boolean; $orientation?: Orientation; + $alignItems?: AlignItemsOption; }>` display: flex; flex-flow: ${({ $orientation = "horizontal" }) => $orientation === "horizontal" ? "row wrap" : "column"}; - align-items: flex-start; + align-items: ${({ $alignItems = "center" }) => + $alignItems === "center" ? "center" : `flex-${$alignItems}`}; width: ${({ $width, $fillWidth }) => ($fillWidth ? "100%" : $width)}; height: ${({ $height, $fillHeight }) => ($fillHeight ? "100%" : $height)}; background-color: ${({ $color = "default", theme }) =>