Fix/a11y style (#136)

* fix styling for standalone view * add changeset
malcolm-kee · Jan 6, 2022 · 2d13a2f · 2d13a2f · github-actions · Jan 6, 2022
1 parent cb0007a
commit 2d13a2f
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 24 deletions.
diff --git a/.changeset/long-buckets-melt.md b/.changeset/long-buckets-melt.md
@@ -0,0 +1,6 @@
+---
+'react-showroom': patch
+'@showroomjs/ui': patch
+---
+
+Fix standalone view styling
diff --git a/packages/react-showroom/client/components/standalone-code-live-editor-comment-popover.tsx b/packages/react-showroom/client/components/standalone-code-live-editor-comment-popover.tsx
@@ -11,9 +11,6 @@ export interface StandaloneCodeLiveEditorCommentPopoverProps
   children: React.ReactNode;
 }
 
-/**
- * @todo Fix the textarea not being auto-focused when open. Not sure why.
- */
 export const StandaloneCodeLiveEditorCommentPopover = React.forwardRef<
   HTMLTextAreaElement,
   StandaloneCodeLiveEditorCommentPopoverProps

diff --git a/packages/react-showroom/client/components/standalone-code-live-editor-comment.tsx b/packages/react-showroom/client/components/standalone-code-live-editor-comment.tsx
@@ -44,6 +44,7 @@ const CommentItem = styled(CommentItemImpl, {
   fontSize: '$sm',
   lineHeight: '$sm',
   position: 'relative',
+  whiteSpace: 'pre-wrap',
   variants: {
     active: {
       true: {

diff --git a/packages/react-showroom/client/components/standalone-code-live-editor.tsx b/packages/react-showroom/client/components/standalone-code-live-editor.tsx
@@ -513,6 +513,8 @@ export const StandaloneCodeLiveEditor = ({
                         };
 
                         setTargetCoord(elementRelative);
+
+                        setActiveComment('');
                       }
                     }}
                     ref={previewListRef}
@@ -568,20 +570,27 @@ export const StandaloneCodeLiveEditor = ({
                             }}
                             key={comment.id}
                           >
-                            <MarkerButton
-                              onClick={(ev) => {
-                                ev.stopPropagation();
-                                setActiveComment(comment.id);
-                              }}
-                              type="button"
+                            <TextTooltip
+                              open={isActive}
+                              label={comment.text}
+                              side="top"
+                              className={commentPopover()}
                             >
-                              <Marker
-                                iconClass={iconClass({
-                                  active: isActive,
-                                })}
-                                data-active-comment={isActive ? true : null}
-                              />
-                            </MarkerButton>
+                              <MarkerButton
+                                onClick={(ev) => {
+                                  ev.stopPropagation();
+                                  setActiveComment(isActive ? '' : comment.id);
+                                }}
+                                type="button"
+                              >
+                                <Marker
+                                  iconClass={iconClass({
+                                    active: isActive,
+                                  })}
+                                  data-active-comment={isActive ? true : null}
+                                />
+                              </MarkerButton>
+                            </TextTooltip>
                           </Div>
                         );
                       })}
@@ -849,6 +858,8 @@ const A11yPanelRoot = styled('section', {
   px: '$2',
   paddingBottom: '$3',
   minHeight: 200,
+  maxHeight: '40vh',
+  overflowY: 'auto',
 });
 
 const A11yPanelTitle = styled('div', {
@@ -958,6 +969,8 @@ const MarkerButton = styled('button', {
   margin: '-10px',
   width: 40,
   height: 40,
+  outlineRing: '',
+  borderRadius: '$lg',
 });
 
 const Toolbar = styled('div', {
@@ -1024,13 +1037,15 @@ const MenuButton = styled('button', {
 
 const editorWrapper = css({
   flex: 1,
-  overflow: 'hidden',
+  overflow: 'auto',
 });
 
 const editor = css({
   borderRadius: '$base',
-  height: '100%',
-  overflowY: 'auto',
+});
+
+const commentPopover = css({
+  whiteSpace: 'pre-wrap',
 });
 
 const iconClass = css({

diff --git a/packages/ui/src/components/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
@@ -38,12 +38,24 @@ export const Tooltip = Object.assign({}, TooltipPrimitive, {
   Arrow: StyledArrow,
 });
 
-export const TextTooltip = (props: {
+export interface TextTooltipProps
+  extends Pick<
+    TooltipPrimitive.PopperContentProps,
+    'side' | 'align' | 'className'
+  > {
   children: React.ReactNode;
   label: string;
-}) => (
-  <Tooltip.Root>
-    <Tooltip.Trigger asChild>{props.children}</Tooltip.Trigger>
-    <Tooltip.Content>{props.label}</Tooltip.Content>
+  open?: boolean;
+}
+
+export const TextTooltip = ({
+  children,
+  label,
+  open,
+  ...props
+}: TextTooltipProps) => (
+  <Tooltip.Root open={open}>
+    <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+    <Tooltip.Content {...props}>{label}</Tooltip.Content>
   </Tooltip.Root>
 );