enhance(ColorPicker): additional positions for color picker modal layout

uzh-bf · Aug 30, 2024 · 265a2b0 · 265a2b0
1 parent e40a6f5
commit 265a2b0
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/packages/design-system/src/ColorPicker.stories.tsx b/packages/design-system/src/ColorPicker.stories.tsx
@@ -61,16 +61,38 @@ export const Position = () => {
         position prop allows to define different default positions. Others can
         be added using the className override.
       </div>
-      <ColorPicker
-        position="top"
-        color={color}
-        onSubmit={(newColor) => {
-          setColor(newColor)
-          alert('Color set to ' + newColor)
-        }}
-        submitText="Save"
-        colorLabel="Color"
-      />
+      <div className="flex flex-col gap-4">
+        <ColorPicker
+          position="top"
+          color={color}
+          onSubmit={(newColor) => {
+            setColor(newColor)
+            alert('Color set to ' + newColor)
+          }}
+          submitText="Save"
+          colorLabel="Color"
+        />
+        <ColorPicker
+          position="top-left"
+          color={color}
+          onSubmit={(newColor) => {
+            setColor(newColor)
+            alert('Color set to ' + newColor)
+          }}
+          submitText="Save"
+          colorLabel="Color"
+        />
+        <ColorPicker
+          position="bottom-left"
+          color={color}
+          onSubmit={(newColor) => {
+            setColor(newColor)
+            alert('Color set to ' + newColor)
+          }}
+          submitText="Save"
+          colorLabel="Color"
+        />
+      </div>
     </div>
   )
 }

diff --git a/packages/design-system/src/ColorPicker.tsx b/packages/design-system/src/ColorPicker.tsx
@@ -36,7 +36,7 @@ export interface ColorPickerProps {
   disabled?: boolean
   triggerIcon?: IconDefinition
   presetColors?: string[]
-  position?: 'bottom' | 'top'
+  position?: 'bottom' | 'top' | 'bottom-left' | 'top-left'
   submitText: string
   colorLabel: string
   tooltip?: string | React.ReactNode
@@ -149,6 +149,8 @@ export function ColorPicker({
                 'absolute flex h-[10rem] w-[23rem] flex-row rounded-md bg-white p-1 shadow-md outline outline-2 outline-uzh-grey-40',
                 position === 'bottom' && 'left-10 top-8',
                 position === 'top' && 'bottom-8 left-10',
+                position === 'bottom-left' && '-left-[18rem] top-8',
+                position === 'top-left' && '-left-[18rem] bottom-8',
                 className?.popover
               )}
               ref={overlayRef}

diff --git a/packages/design-system/src/forms/FormikColorPicker.tsx b/packages/design-system/src/forms/FormikColorPicker.tsx
@@ -13,7 +13,7 @@ export interface FormikColorPickerProps {
   disabled?: boolean
   triggerIcon?: IconDefinition
   presetColors?: string[]
-  position?: 'bottom' | 'top'
+  position?: 'bottom' | 'top' | 'bottom-left' | 'top-left'
   submitText: string
   colorLabel: string
   colorTooltip?: string