Merge pull request #61 from storybookjs/fix/more-ui-fixes

UI Fixes
storybookjs · Jun 19, 2023 · 32f989c · 32f989c
2 parents e1d0310 + b9a800e
commit 32f989c
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 33 deletions.
diff --git a/src/components/List/ListItem/ListItem.styled.tsx b/src/components/List/ListItem/ListItem.styled.tsx
@@ -6,11 +6,13 @@ export const ListItemWrapper = styled.li(() => ({
   columnGap: 12,
 }));
 
-export const ListItemContentWrapper = styled.div(({ theme }) => ({
-  fontFamily: theme.typography.fonts.base,
-  color: theme.color.darker,
-  fontSize: "13px",
-}));
+export const ListItemContentWrapper = styled.div`
+  font-family: ${({ theme }) => theme.typography.fonts.base};
+  color: ${({ theme }) => theme.color.darker};
+  font-size: 13px;
+  line-height: 18px;
+  margin-top: 2px;
+`;
 
 export const ListItemIndexWrapper = styled.div<{ isCompleted: boolean }>(
   ({ isCompleted, theme }) => ({

diff --git a/src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx b/src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx
@@ -6,6 +6,12 @@ export const Code = styled(motion.div)`
   z-index: 2;
 `;
 
+export const SnippetWrapperFirst = styled(motion.div)`
+  position: relative;
+  padding-top: 10px;
+  padding-bottom: 10px;
+`;
+
 export const SnippetWrapper = styled(motion.div)`
   position: relative;
   padding-top: 12px;
@@ -21,7 +27,7 @@ export const Container = styled.div<{ width: number }>`
   overflow: hidden;
   padding-left: 15px;
   padding-right: 15px;
-  padding-top: 6px;
+  padding-top: 4px;
   border-left: ${({ theme }) => (theme.base === "dark" ? 1 : 0)}px solid #fff2;
   border-bottom: ${({ theme }) => (theme.base === "dark" ? 1 : 0)}px solid #fff2;
   border-top: ${({ theme }) => (theme.base === "dark" ? 1 : 0)}px solid #fff2;
@@ -42,7 +48,7 @@ export const Backdrop = styled(motion.div)`
   position: absolute;
   z-index: 1;
   left: 0;
-  top: 48px;
+  top: 44px;
   width: 100%;
   height: 81px;
 `;
diff --git a/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -10,6 +10,7 @@ import {
   Code,
   Container,
   SnippetWrapper,
+  SnippetWrapperFirst,
 } from "./SyntaxHighlighter.styled";
 import { Snippet } from "./Snippet/Snippet";
 import { ThemeProvider, ensure, themes } from "@storybook/theming";
@@ -102,14 +103,14 @@ export const SyntaxHighlighter = ({
           animate={{ y: steps[activeStep]?.yPos ?? 0 }}
           transition={{ ease: "easeInOut", duration: 0.4 }}
         >
-          <SnippetWrapper>
+          <SnippetWrapperFirst>
             <StorybookSyntaxHighlighter
               language="typescript"
               customStyle={customStyle}
             >
               // Button.stories.tsx
             </StorybookSyntaxHighlighter>
-          </SnippetWrapper>
+          </SnippetWrapperFirst>
           {data.map((content, idx: number) => (
             <Snippet
               key={idx}

diff --git a/src/features/GuidedTour/GuidedTour.tsx b/src/features/GuidedTour/GuidedTour.tsx
@@ -37,9 +37,8 @@ export function GuidedTour({
           title: "Congratulations!",
           content: (
             <>
-              You just created your first story. You nailed the basics. <br />
-              Continue setting up your project and start writing stories for
-              your components.
+              You just created your first story. Continue setting up your
+              project to write stories for your own components.
             </>
           ),
           placement: "right",
@@ -76,6 +75,11 @@ export function GuidedTour({
           content:
             "Whenever you modify code or stories, Storybook automatically updates how it previews your components.",
           placement: "bottom",
+          styles: {
+            spotlight: {
+              borderRadius: 0,
+            },
+          },
         },
         {
           target: "#root div[role=main]",
@@ -102,8 +106,8 @@ export function GuidedTour({
           title: "Congratulations!",
           content: (
             <>
-              You've learned how to control your stories interactively. Now
-              let's explore how to write your first story.
+              You learned how to control your stories interactively. Now let's
+              explore how to write your first story.
               <Confetti
                 numberOfPieces={800}
                 recycle={false}
@@ -133,6 +137,11 @@ export function GuidedTour({
         }
       }}
       floaterProps={{
+        options: {
+          offset: {
+            offset: "0, 6",
+          },
+        },
         styles: {
           floater: {
             padding: 0,
@@ -147,11 +156,14 @@ export function GuidedTour({
       }}
       tooltipComponent={Tooltip}
       styles={{
-        spotlight: {
-          border: "solid 2px #004c7c",
-        },
         overlay: {
-          backgroundColor: "rgba(0, 0, 0, 0.48)",
+          mixBlendMode: "unset",
+          backgroundColor: "none",
+        },
+        spotlight: {
+          backgroundColor: "none",
+          border: `solid 2px ${theme.color.secondary}`,
+          boxShadow: "0px 0px 0px 9999px rgba(0,0,0,0.4)",
         },
         options: {
           zIndex: 10000,

diff --git a/src/features/GuidedTour/Tooltip.tsx b/src/features/GuidedTour/Tooltip.tsx
@@ -20,12 +20,14 @@ const Wrapper = styled.div`
 
 const TooltipTitle = styled.div`
   font-size: 13px;
+  line-height: 18px;
   font-weight: 700;
   color: ${({ theme }) => theme.color.defaultText};
 `;
 
 const TooltipContent = styled.p`
   font-size: 13px;
+  line-height: 18px;
   text-align: start;
   color: ${({ theme }) => theme.color.defaultText};
   margin: 0;

diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx
@@ -25,25 +25,23 @@ export const Header = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 0 15px;
-  border-bottom: 1px solid ${({ theme }) => theme.appBorderColor};
-  height: 40px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  height: 44px;
 `;
 
 export const ModalTitle = styled.div`
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
+  line-height: 18px;
   font-weight: bold;
   color: ${({ theme }) => theme.color.darkest};
-
-  span {
-    margin-top: 2px;
-  }
 `;
 
 export const Content = styled.div`
   font-size: 13px;
+  line-height: 18px;
   padding: 15px;
   flex: 1;
   display: flex;
@@ -54,20 +52,26 @@ export const Content = styled.div`
 
   h3 {
     font-size: 13px;
+    line-height: 18px;
     font-weight: bold;
     padding: 0;
     margin: 0;
   }
 `;
 
 export const SpanHighlight = styled.span`
-  color: ${({ theme }) => theme.color.secondary};
-  display: inline-block;
-  border-radius: 4px;
-  padding: 0.2em 0.4em;
+  display: inline-flex;
+  border-radius: 3px;
+  padding: 0 5px;
+  height: 18px;
   opacity: 0.8;
-  background-color: ${({ theme }) => theme.color.secondary}20;
-  font-weight: bold;
+  font-family: ${({ theme }) => theme.typography.fonts.mono};
+  font-size: 11px;
+  border: 1px solid #ecf4f9;
+  color: ${({ theme }) => theme.color.darkest};
+  background-color: #f7fafc;
+  box-sizing: border-box;
+  line-height: 17px;
 `;
 
 export const Image = styled.img`

diff --git a/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/src/features/WriteStoriesModal/WriteStoriesModal.tsx
@@ -33,6 +33,7 @@ import dataTypescriptNextjs from "./code/nextjs-typescript";
 import { useGetProject } from "./hooks/useGetFrameworkName";
 import { API, AddonStore } from "@storybook/manager-api";
 import { STORYBOOK_ADDON_ONBOARDING_CHANNEL } from "../../constants";
+import { useTheme } from "@storybook/theming";
 
 // TODO: Add warning if backdropBoundary && !warningButtonStatus?.data is not true.
 // backdropBoundary && !warningButtonStatus?.data
@@ -53,6 +54,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
   const [step, setStep] = useState<
     "imports" | "meta" | "story" | "args" | "customStory"
   >("imports");
+  const theme = useTheme();
 
   const stepIndex = {
     imports: 0,
@@ -101,6 +103,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
       type: "telemetry",
     });
   }, [api, step]);
+
   return (
     <Modal width={740} height={430} defaultOpen>
       {({ Title, Description, Close }) => (
@@ -147,6 +150,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                   icon="cross"
                   width={13}
                   onClick={skipOnboarding}
+                  color={theme.color.darkest}
                 />
               </Close>
             </Header>
@@ -273,15 +277,15 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                             }
                             index={1}
                           >
-                            Copy the Warning story
+                            Copy the Warning story.
                           </ListItem>
                           <ListItem
                             isCompleted={warningButtonStatus?.data}
                             index={2}
                           >
                             <Step2Text>
                               Open the Button story in your current working
-                              directory
+                              directory.
                             </Step2Text>
                             {buttonPath?.data && (
                               <SpanHighlight>{buttonPath.data}</SpanHighlight>
@@ -291,7 +295,7 @@ export const WriteStoriesModal: FC<WriteStoriesModalProps> = ({
                             isCompleted={warningButtonStatus?.data}
                             index={3}
                           >
-                            Paste it at the bottom of the file and save
+                            Paste it at the bottom of the file and save.
                           </ListItem>
                         </List>
                       </div>

diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts
@@ -47,3 +47,11 @@ export const Small: Story = {
     label: "Button",
   },
 };
+
+export const Warning: Story = {
+  args: {
+    primary: true,
+    label: "Delete now",
+    backgroundColor: "red",
+  },
+};