Merge pull request #24372 from storybookjs/mobile-truncate-story-name

UI: Mobile truncate story name
storybookjs · Oct 10, 2023 · 147cafc · 147cafc
2 parents 8abf917 + d6ae510
commit 147cafc
Showing 1 changed file with 19 additions and 13 deletions.
diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
@@ -20,14 +20,12 @@ const useFullStoryName = () => {
   const { index } = useStorybookState();
   const currentStory = useStorybookApi().getCurrentStoryData();
 
-  if (!currentStory) {
-    return '';
-  }
+  if (!currentStory) return '';
 
   let fullStoryName = currentStory.renderLabel?.(currentStory) || currentStory.name;
   let node = index[currentStory.id];
 
-  while ('parent' in node && node.parent && index[node.parent]) {
+  while ('parent' in node && node.parent && index[node.parent] && fullStoryName.length < 24) {
     node = index[node.parent];
     const parentName = node.renderLabel?.(node) || node.name;
     fullStoryName = `${parentName}/${fullStoryName}`;
@@ -45,12 +43,12 @@ export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showP
       <MobileAddonsDrawer>{panel}</MobileAddonsDrawer>
       <Button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} title="Open navigation menu">
         <Icons icon="menu" />
-        {fullStoryName}
+        <Text>{fullStoryName}</Text>
       </Button>
       {showPanel && (
-        <DrawerIconButton onClick={() => setMobilePanelOpen(true)} title="Open addon panel">
+        <IconButton onClick={() => setMobilePanelOpen(true)} title="Open addon panel">
           <Icons icon="bottombartoggle" />
-        </DrawerIconButton>
+        </IconButton>
       )}
     </Container>
   );
@@ -71,12 +69,6 @@ const Container = styled.div(({ theme }) => ({
   color: theme.color.mediumdark,
 }));
 
-// We should not have to reset the margin-top here
-// TODO: remove this once we have a the new IconButton component
-const DrawerIconButton = styled(IconButton)({
-  marginTop: 0,
-});
-
 const Button = styled.button(({ theme }) => ({
   all: 'unset',
   display: 'flex',
@@ -86,4 +78,18 @@ const Button = styled.button(({ theme }) => ({
   fontSize: `${theme.typography.size.s2 - 1}px`,
   padding: '0 7px',
   fontWeight: theme.typography.weight.bold,
+  WebkitLineClamp: 1,
+
+  '> svg': {
+    width: 14,
+    height: 14,
+    flexShrink: 0,
+  },
 }));
+
+const Text = styled.p({
+  display: '-webkit-box',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+});