add alignItems prop

ClickHouse · Sep 29, 2023 · 12fcd14 · 12fcd14
1 parent fc20bd0
commit 12fcd14
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git 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: (
       <>
         <Title type="h3">Example panel title</Title>

diff --git 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<HTMLDivElement> {
   hasBorder?: boolean;
@@ -16,6 +17,7 @@ export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
   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) => (
   <Wrapper
@@ -41,6 +44,7 @@ export const Panel = ({
     $fillWidth={fillWidth}
     $height={height}
     $fillHeight={fillHeight}
+    $alignItems={alignItems}
     {...props}
   >
     {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 }) =>