Add spacing, content t-shirt sizes to sticker sheet (#4595)

grommet · Dec 16, 2024 · 6b8fbe8 · 6b8fbe8
1 parent 52674f0
commit 6b8fbe8
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx b/sandbox/grommet-app/src/pages/sticker-sheet/index.jsx
@@ -672,6 +672,42 @@ const StickerSheet = () => {
                 />
               </Compare>
             </ContentPane>
+            <ContentPane>
+              <Box gap="small">
+                {Object.keys(hpeCurrent.global.edgeSize).map(
+                  size =>
+                    size !== 'responsiveBreakpoint' && (
+                      <Compare key={size}>
+                        <Box
+                          alignSelf="start"
+                          background={{ color: 'blue', opacity: 'medium' }}
+                          pad={{ left: size }}
+                          height="xxsmall"
+                          flex={false}
+                        />
+                      </Compare>
+                    ),
+                )}
+              </Box>
+            </ContentPane>
+            <ContentPane overflow={{ horizontal: 'auto' }}>
+              <Box gap="small">
+                {Object.keys(hpeCurrent.global.size).map(
+                  size =>
+                    size !== 'responsiveBreakpoint' && (
+                      <Compare key={size}>
+                        <Box
+                          alignSelf="start"
+                          background={{ color: 'blue', opacity: 'medium' }}
+                          width={size}
+                          height={size}
+                          flex={false}
+                        />
+                      </Compare>
+                    ),
+                )}
+              </Box>
+            </ContentPane>
           </PageContent>
         </Page>
       </ModeContext.Provider>