diff --git a/frontend/common/code-help/init/init-react.js b/frontend/common/code-help/init/init-react.js index 6b1a3412cf0e..2791237c6b1f 100644 --- a/frontend/common/code-help/init/init-react.js +++ b/frontend/common/code-help/init/init-react.js @@ -3,9 +3,20 @@ import Constants from 'common/constants' export default ( envId, { FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, NPM_CLIENT }, -) => `// App root -import ${LIB_NAME} from "${NPM_CLIENT}"; -import { FlagsmithProvider } from '@flagsmith/flagsmith/react'; +) => `import ${LIB_NAME} from "${NPM_CLIENT}"; +import { FlagsmithProvider, useFlags } from '${NPM_CLIENT}/react'; + +export function HomePage() { + const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change + const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled + const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value + return ( + <> + {\`${FEATURE_NAME}: \${${FEATURE_NAME}}\`} + {\`${FEATURE_NAME_ALT}: \${${FEATURE_NAME_ALT}}\`} + </> + ); +} export default function App() { return ( @@ -17,21 +28,8 @@ export default function App() { : '' } }} - flagsmith={flagsmith}> - {...Your app} - </FlagsmithProvider> - ); -} - -// Home Page -import ${LIB_NAME} from '${NPM_CLIENT}'; -import { useFlags, useFlagsmith } from '${NPM_CLIENT}/react'; - -export default function HomePage() { - const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change - const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled - const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value - return ( - <>{...}</> + flagsmith={${LIB_NAME}}> + <HomePage /> + </FlagsmithProvider> ); }` diff --git a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss index 80fb93e7b9da..1032d4ffac12 100644 --- a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss +++ b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.scss @@ -1,5 +1,3 @@ -// Inline editable value in the welcome sentence: an action underline + pencil, -// with a faint highlight on hover/focus. Rationale lives in InlineInput.tsx. .inline-input { display: inline-flex; align-items: center; @@ -8,25 +6,17 @@ padding: 0 4px; border-radius: var(--radius-xs); border-bottom: 1px solid var(--color-border-action); + // Resting fill so it reads as editable, not only on hover. + background-color: var(--color-surface-subtle); cursor: text; transition: background-color var(--duration-fast) var(--easing-standard); - svg { - opacity: 0.8; - transition: opacity var(--duration-fast) var(--easing-standard); - } - &:hover, &:focus-within { - background-color: var(--color-surface-subtle); - - svg { - opacity: 1; - } + background-color: var(--color-surface-muted); } - // The hero value (flag name): a filled soft-purple pill instead of an - // underline, so it reads as the thing the user will reference in code. + // Flag name: a filled pill rather than an underline (it's referenced in code). &--accent { padding: 1px 8px; border-bottom: none; diff --git a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx index 82ac5f2b173e..3e66caaf6db2 100644 --- a/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx +++ b/frontend/web/components/pages/onboarding/InlineInput/InlineInput.tsx @@ -23,8 +23,8 @@ export type InlineInputProps = { } // Onboarding-local inline editable value (GhostInput + pencil) for the welcome -// sentence: an action underline + pencil mark it editable, it commits on -// blur/Enter, and an empty value reverts. Shares the VariationKeyLabel inline +// sentence: a resting fill, action underline and pencil mark it editable; it +// commits on blur/Enter, and an empty value reverts. Shares the VariationKeyLabel inline // edit's visual language but drops its buttons/validation to stay prose-like; // feature-local for now, both should converge on one primitive. const InlineInput: FC = ({ diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx index b66882d24569..b73ec452890c 100644 --- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx +++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/ConnectYourCodePanel.tsx @@ -1,5 +1,6 @@ import React, { FC, useState } from 'react' import classNames from 'classnames' +import Chip from 'components/base/Chip' import CodeCard from './CodeCard' import SdkPicker from './SdkPicker' import { getSdkSnippet } from './sdkSnippets' @@ -9,6 +10,18 @@ type PackageManager = 'npm' | 'yarn' const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'yarn'] +// The chosen SDK as an accent badge (logo + label), matching the picker's +// selected chip - the code card labels its language with this. +const SdkBadge: FC<{ lang: SdkLang }> = ({ lang }) => { + const Logo = lang.logo + return ( + + + {lang.label} + + ) +} + export type ConnectYourCodePanelProps = { environmentKey: string featureName: string @@ -64,9 +77,7 @@ const ConnectYourCodePanel: FC = ({ ))} ) : ( - - {sdkLang.label} - + ) } /> @@ -83,11 +94,7 @@ const ConnectYourCodePanel: FC = ({ language={sdkSnippet.language} onCopy={onCopyWire} copyLabel='Copy code snippet' - headerLeft={ - - {sdkLang.label} - - } + headerLeft={} /> diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.scss b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.scss index 55e5df84ecd0..80147b9e5daa 100644 --- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.scss +++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/OnboardingConnectPanel.scss @@ -47,10 +47,10 @@ border: 0; border-radius: 0; color: var(--color-text-default); - // Reserve the scrollbar gutter permanently so hover doesn't shove the - // layout (the global dark-scroll mixin toggles display:none on a - // space-reserving webkit bar otherwise). - overflow-x: scroll; + // Scroll only when the snippet overflows. When it does, the webkit rule + // below forces the bar visible over the global dark-scroll mixin (which + // display:none-s it on hover), so a long snippet's bar doesn't flicker. + overflow-x: auto; overflow-y: hidden; &::-webkit-scrollbar, @@ -100,12 +100,6 @@ border-bottom: 1px solid var(--color-border-default); } - &__codecard-lang { - font-size: 0.75rem; - font-weight: 600; - color: var(--color-text-secondary); - } - &__pm { border-radius: 6px; overflow: hidden; diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx index e3f4ea0a3772..a0c4241e0420 100644 --- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx +++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/SdkPicker.tsx @@ -69,6 +69,7 @@ const SdkPicker: FC = ({ onSelect, selected }) => { ref={(el) => { refs.current[lang.label] = el }} + className='fw-semibold' role='radio' aria-checked={isSelected} tabIndex={lang.label === tabStopLabel ? 0 : -1} @@ -91,6 +92,7 @@ const SdkPicker: FC = ({ onSelect, selected }) => {
{popularLangs.map(renderOption)} setMoreOpen((open) => !open)} aria-expanded={moreOpen} > diff --git a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/logos/javascript-logo.tsx b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/logos/javascript-logo.tsx index f7299f0ae2f8..dca252b249f8 100644 --- a/frontend/web/components/pages/onboarding/OnboardingConnectPanel/logos/javascript-logo.tsx +++ b/frontend/web/components/pages/onboarding/OnboardingConnectPanel/logos/javascript-logo.tsx @@ -1,8 +1,16 @@ import React from 'react' -import Svg from './svg' +// Two-tone on purpose: the other logos are single-fill glyphs, but JS is a +// filled badge. Drawing the "JS" as solid black over the yellow square (rather +// than the shared wrapper's hole-punch, which shows the chip through it and +// washes out on a light chip) keeps it readable on both light and dark. Rounded +// so it reads as a badge. export const JavascriptLogo = () => ( - - - + + + + ) diff --git a/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.scss b/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.scss index 8b923ee20edd..9bee42832fe9 100644 --- a/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.scss +++ b/frontend/web/components/pages/onboarding/OnboardingFlow/OnboardingFlow.scss @@ -4,7 +4,7 @@ // Centring is the `mx-auto` utility on the element. .onboarding-flow { max-width: 1100px; - // Minimal top padding so the theme-toggle row isn't flush to the very edge; + // Top padding gives the theme-toggle row room to breathe from the very edge; // sides + bottom keep the reading column off the edges. - padding: 4px 24px 40px; + padding: 24px 24px 40px; }