From 3e012ec2c09d17a3f00e72e9721d65e3110d774f Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 11 Aug 2020 23:05:38 -0700
Subject: [PATCH] Draft UI for pet compatibility rule fields

not wired up to a mutation yet, but it looks pretty!
---
 .../WardrobePage/support/ItemSupportDrawer.js   | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/app/WardrobePage/support/ItemSupportDrawer.js b/src/app/WardrobePage/support/ItemSupportDrawer.js
index dd22a76..6ca803f 100644
--- a/src/app/WardrobePage/support/ItemSupportDrawer.js
+++ b/src/app/WardrobePage/support/ItemSupportDrawer.js
@@ -77,6 +77,7 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
             <Box paddingBottom="5">
               <Stack spacing="8">
                 <ItemSupportSpecialColorFields item={item} />
+                <ItemSupportPetCompatibilityRuleFields item={item} />
                 <ItemSupportAppearanceFields item={item} />
               </Stack>
             </Box>
@@ -232,6 +233,22 @@ function ItemSupportSpecialColorFields({ item }) {
   );
 }
 
+function ItemSupportPetCompatibilityRuleFields({ item }) {
+  return (
+    <FormControl>
+      <FormLabel>Pet compatibility rule</FormLabel>
+      <Select>
+        <option>Default: Auto-detect whether this fits all pets</option>
+        <option>Body specific: Always different for each pet body</option>
+      </Select>
+      <FormHelperText>
+        By default, we assume Background-y zones fit all pets the same. When
+        items don't follow that rule, we can override it.
+      </FormHelperText>
+    </FormControl>
+  );
+}
+
 /**
  * NOTE: This component takes `outfitState` from context, rather than as a prop
  *       from its parent, for performance reasons. We want `Item` to memoize