From 06dfcecc61c44eac7b2439913b315ac3abfc312a Mon Sep 17 00:00:00 2001 From: Alexander Swed Date: Sun, 4 Oct 2020 17:29:30 +0200 Subject: [PATCH] fix: style fixes, add docs SSR --- src/lib/Button/Button.tsx | 13 +++++++++-- src/lib/Label/Label.tsx | 2 +- src/lib/Menu/MenuItem.tsx | 2 ++ src/pages/_document.tsx | 46 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 60 insertions(+), 3 deletions(-) create mode 100644 src/pages/_document.tsx diff --git a/src/lib/Button/Button.tsx b/src/lib/Button/Button.tsx index 6dd15740..f0352936 100644 --- a/src/lib/Button/Button.tsx +++ b/src/lib/Button/Button.tsx @@ -9,7 +9,6 @@ import Icon from '../Icon'; const ButtonRoot = styled(Stack, { 'px': '$3', 'fontSize': '$sm', - 'display': 'inline-flex', 'height': '$base', 'lineHeight': '$base', 'fontWeight': 500, @@ -126,7 +125,17 @@ const Button = React.forwardRef( const ref = useForkRef(innerRef, propRef); return ( - + {props.children} ); diff --git a/src/lib/Label/Label.tsx b/src/lib/Label/Label.tsx index a83a29a3..6fd8bee3 100644 --- a/src/lib/Label/Label.tsx +++ b/src/lib/Label/Label.tsx @@ -27,7 +27,7 @@ type Props = React.DetailedHTMLProps const Label: React.FC = ({ label, children: _ignore, secondary, ref, ...props }) => { return ( - +
{label}
{secondary && {secondary}} diff --git a/src/lib/Menu/MenuItem.tsx b/src/lib/Menu/MenuItem.tsx index 51f29b56..6bbe2b19 100644 --- a/src/lib/Menu/MenuItem.tsx +++ b/src/lib/Menu/MenuItem.tsx @@ -61,6 +61,8 @@ const MenuItem = React.forwardRef(({ action, ...props }, r as="li" {...props} flow="row" + alignY="center" + display="inline" onClick={onClick} tabIndex={props.disabled ? undefined : -1} role="menuitem" diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 00000000..e7604c53 --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import NextDocument, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'; +import { css } from 'src/lib/stitches.config'; + +export default class Document extends NextDocument { + static async getInitialProps(ctx: DocumentContext) { + const originalRenderPage = ctx.renderPage; + + try { + let extractedStyles: any[] = []; + ctx.renderPage = () => { + const { styles, result } = css.getStyles(originalRenderPage); + extractedStyles = styles; + return result; + }; + + const initialProps = await NextDocument.getInitialProps(ctx); + + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + + {extractedStyles.map((content, index) => ( +