From 9df9095b1f4075173e462dd3b9e016e3ee3893b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Fri, 28 Apr 2023 12:54:58 +0100 Subject: [PATCH] feat: demo small UI adjustments (#3653) https://linear.app/unleash/issue/2-975/small-ui-adjustments Adds some small UI adjustments we identified in the meantime: - "Get Unleash" -> "Get started" in the top banner; - Topics list header is now the same color as the top banner; - Added `focus` capabilities to steps, added it to the appropriate steps; - No longer closes tooltip when clicked when using `anyClick`; - Reversed the topics list header arrow rotation; Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item: #3537 ![image](https://user-images.githubusercontent.com/14320932/235139390-a40db29d-befe-44f9-9f61-a0ad120b7251.png) --- .../component/demo/DemoBanner/DemoBanner.tsx | 2 +- .../component/demo/DemoSteps/DemoSteps.tsx | 30 ++++++++++++++++--- .../component/demo/DemoTopics/DemoTopics.tsx | 12 ++++---- frontend/src/component/demo/demo-topics.tsx | 5 ++++ 4 files changed, 39 insertions(+), 10 deletions(-) diff --git a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx index a0b7754b20..91e549111b 100644 --- a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx +++ b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx @@ -56,7 +56,7 @@ export const DemoBanner = ({ onPlans }: IDemoBannerProps) => { Ask questions - Get Unleash + Get started ); diff --git a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx index 24ea044bb5..bca119d2e5 100644 --- a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx +++ b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx @@ -104,11 +104,25 @@ export const DemoSteps = ({ } if (action === ACTIONS.UPDATE) { - const el = document.querySelector(step.target as string); + const el = document.querySelector( + step.target as string + ) as HTMLElement | null; if (el) { el.scrollIntoView({ block: 'center', }); + + if (step.focus) { + if (step.focus === true) { + el.focus(); + } else { + const focusEl = el.querySelector( + step.focus + ) as HTMLElement | null; + focusEl?.focus(); + } + } + if (!step.nextButton) { const clickHandler = (e: Event) => { abortController.abort(); @@ -119,9 +133,17 @@ export const DemoSteps = ({ }; if (step.anyClick) { - window.addEventListener('click', clickHandler, { - signal: abortController.signal, - }); + window.addEventListener( + 'click', + e => { + const targetEl = e.target as HTMLElement; + if (!targetEl.closest('.__floater')) + clickHandler(e); + }, + { + signal: abortController.signal, + } + ); } else { el.addEventListener('click', clickHandler, { signal: abortController.signal, diff --git a/frontend/src/component/demo/DemoTopics/DemoTopics.tsx b/frontend/src/component/demo/DemoTopics/DemoTopics.tsx index e464a6fdca..74e28cea36 100644 --- a/frontend/src/component/demo/DemoTopics/DemoTopics.tsx +++ b/frontend/src/component/demo/DemoTopics/DemoTopics.tsx @@ -5,6 +5,7 @@ import { Button, LinearProgress, Typography, + alpha, linearProgressClasses, styled, } from '@mui/material'; @@ -33,9 +34,10 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({ right: theme.spacing(2), fontSize: theme.fontSizes.mainHeader, transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', + transform: 'rotate(180deg)', }, '&.Mui-expanded .expand-icon': { - transform: 'rotate(180deg)', + transform: 'rotate(0)', }, })); @@ -44,8 +46,8 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ flexDirection: 'column', alignItems: 'center', }, - backgroundColor: theme.palette.primary.main, - color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.web.main, + color: theme.palette.web.contrastText, borderTopLeftRadius: theme.shape.borderRadiusLarge, borderTopRightRadius: theme.shape.borderRadiusLarge, height: 91, @@ -84,11 +86,11 @@ const StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({ height: theme.spacing(1), borderRadius: theme.shape.borderRadius, [`&.${linearProgressClasses.colorPrimary}`]: { - backgroundColor: theme.palette.primary.dark, + backgroundColor: alpha(theme.palette.web.contrastText!, 0.1), }, [`& .${linearProgressClasses.bar}`]: { borderRadius: theme.shape.borderRadius, - backgroundColor: theme.palette.primary.contrastText, + backgroundColor: theme.palette.web.contrastText, }, })); diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx index 856114a691..bce8d4ef40 100644 --- a/frontend/src/component/demo/demo-topics.tsx +++ b/frontend/src/component/demo/demo-topics.tsx @@ -13,6 +13,7 @@ export interface ITutorialTopicStep extends Step { preventDefault?: boolean; anyClick?: boolean; optional?: boolean; + focus?: boolean | string; } export interface ITutorialTopic { @@ -212,6 +213,7 @@ export const TOPICS: ITutorialTopic[] = [ ), nextButton: true, + focus: 'input', }, { target: 'button[data-testid="CONSTRAINT_VALUES_ADD_BUTTON"]', @@ -440,6 +442,7 @@ export const TOPICS: ITutorialTopic[] = [ ), backCloseModal: true, nextButton: true, + focus: 'input', }, { target: 'div[data-testid="VARIANT"]:last-of-type #variant-payload-value', @@ -456,6 +459,7 @@ export const TOPICS: ITutorialTopic[] = [ ), nextButton: true, + focus: true, }, { target: 'div[data-testid="VARIANT"]:last-of-type button[data-testid="VARIANT_ADD_OVERRIDE_BUTTON"]', @@ -499,6 +503,7 @@ export const TOPICS: ITutorialTopic[] = [ ), nextButton: true, backCloseModal: true, + focus: 'input', }, { target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',