beta chip

mui · Aug 21, 2024 · e695075 · e695075
1 parent 6bb06b9
commit e695075
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
@@ -112,14 +112,23 @@ const ProductSubMenu = React.forwardRef<HTMLAnchorElement, ProductSubMenuProps>(
       >
         <Box sx={{ px: 2 }}>{icon}</Box>
         <Box sx={{ flexGrow: 1 }}>
-          <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'bold' }}>
-            {name}
-          </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: '6px',
+            }}
+          >
+            <Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'bold' }}>
+              {name}
+            </Typography>
+            {chip}
+          </Box>
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
             {description}
           </Typography>
         </Box>
-        {chip}
       </Box>
     );
   },
@@ -303,7 +312,24 @@ export default function HeaderNavBar() {
                         href={ROUTES.productToolpad}
                         icon={<IconImage name="product-toolpad" />}
                         name="Toolpad"
-                        chip={<Chip label="Beta" size="small" color="primary" variant="outlined" />}
+                        chip={
+                          <Chip
+                            label="Beta"
+                            size="small"
+                            color="primary"
+                            variant="outlined"
+                            sx={{
+                              fontSize: '.625rem',
+                              fontWeight: 'semiBold',
+                              textTransform: 'uppercase',
+                              letterSpacing: '.04rem',
+                              height: '16px',
+                              '& .MuiChip-label': {
+                                px: '4px',
+                              },
+                            }}
+                          />
+                        }
                         description="Components and tools for dashboards and internal apps."
                       />
                     </li>

diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -229,6 +229,16 @@ export default function HeaderNavDropdown() {
                                 label={item.chip}
                                 color="primary"
                                 variant="outlined"
+                                sx={{
+                                  fontSize: '.625rem',
+                                  fontWeight: 'semiBold',
+                                  textTransform: 'uppercase',
+                                  letterSpacing: '.04rem',
+                                  height: '16px',
+                                  '& .MuiChip-label': {
+                                    px: '4px',
+                                  },
+                                }}
                               />
                             ) : null}
                           </Box>
@@ -280,6 +290,16 @@ export default function HeaderNavDropdown() {
                                 label={item.chip}
                                 color="primary"
                                 variant="outlined"
+                                sx={{
+                                  fontSize: '.625rem',
+                                  fontWeight: 'semiBold',
+                                  textTransform: 'uppercase',
+                                  letterSpacing: '.04rem',
+                                  height: '16px',
+                                  '& .MuiChip-label': {
+                                    px: '4px',
+                                  },
+                                }}
                               />
                             ) : null}
                           </Box>