@theia/getting-started 1.76.0-next.16 → 1.76.0-next.18

package/src/browser/style/index.css

@@ -53,8 +53,39 @@ body {
   height: 100%;
 }
 
+/*
+ * Centred in a readable measure instead of stretching across the whole view: with the side bars collapsed the
+ * welcome page is as wide as the window, and full-width content drifts apart towards the edges.
+ */
 .gs-content-container {
   padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/*
+ * The welcome content below the header: the regular sections on the left, the walkthroughs on the right.
+ * Both columns keep a sensible minimum width and wrap onto each other in a narrow window.
+ */
+.gs-columns {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(var(--theia-ui-padding) * 8);
+}
+
+/* Even shares, so that the walkthroughs sit next to the sections rather than pushed against the edge. */
+.gs-main-column,
+.gs-side-column {
+  flex: 1 1 340px;
+  min-width: 0;
+}
+
+/* Without a walkthrough to offer, the column must not hold on to its share of the width. */
+.gs-side-column:empty {
+  display: none;
 }
 
 .gs-content-container a {
@@ -116,46 +147,19 @@ body {
   align-items: center;
 }
 
-.gs-float {
-  float: right;
-  width: 50%;
-  margin-top: 100px;
-}
-
-.gs-container.gs-aifeature-container {
-  border: 1px solid var(--theia-focusBorder);
-  padding: 15px;
-}
-
-.shadow-pulse {
-  animation: shadowPulse 2s infinite ease-in-out;
-}
-
-@keyframes shadowPulse {
-
-  0%,
-  100% {
-    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  }
-
-  50% {
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
-  }
-}
-
 /* Walkthrough styles */
 
 /* The cards form a quiet single column: card-like blocks, but without borders. */
 .gs-walkthrough-cards {
   display: flex;
   flex-direction: column;
-  gap: var(--theia-ui-padding);
-  margin-top: var(--theia-ui-padding);
+  gap: calc(var(--theia-ui-padding) * 2);
+  margin-top: calc(var(--theia-ui-padding) * 2);
   max-width: 640px;
 }
 
 .gs-walkthrough-card {
-  padding: calc(var(--theia-ui-padding) * 1.5) calc(var(--theia-ui-padding) * 2);
+  padding: calc(var(--theia-ui-padding) * 2.5);
   border-radius: calc(var(--theia-ui-padding) / 2);
   cursor: pointer;
   background-color: var(--theia-walkthrough-card-background);
@@ -203,25 +207,31 @@ body {
   object-fit: contain;
 }
 
-/* Kept to a single line so that every card stays the same height. */
+/*
+ * Wraps, but no further than two lines, so that a description is readable in the narrow side column
+ * without any single card growing out of proportion.
+ */
 .gs-walkthrough-card-description {
   color: var(--theia-descriptionForeground);
   font-size: var(--theia-ui-font-size0);
   margin: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .gs-walkthrough-card-progress {
   display: flex;
   align-items: center;
   gap: var(--theia-ui-padding);
-  margin-top: var(--theia-ui-padding);
+  margin-top: calc(var(--theia-ui-padding) * 2);
 }
 
+/* Uses whatever width the card offers rather than a fixed one, which would leave a gap in a wide card. */
 .gs-walkthrough-progress-bar {
-  flex: 0 1 180px;
+  flex: 1 1 auto;
   height: calc(var(--theia-ui-padding) / 3);
   background-color: var(--theia-walkthrough-progress-background);
   border-radius: calc(var(--theia-ui-padding) / 3);
@@ -242,6 +252,30 @@ body {
   white-space: nowrap;
 }
 
+/*
+ * A link that stands alone in its paragraph is an action rather than a reference, so a step can offer it as a
+ * button. Links inside a sentence keep reading as links, which is what the `:only-child` restriction buys.
+ */
+.gs-walkthrough-step-description p > a:only-child {
+  display: inline-block;
+  padding: calc(var(--theia-ui-padding) / 2) calc(var(--theia-ui-padding) * 2);
+  border: var(--theia-border-width) solid var(--theia-button-border);
+  border-radius: calc(var(--theia-ui-padding) / 2);
+  background-color: var(--theia-button-background);
+  color: var(--theia-button-foreground);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.gs-walkthrough-step-description p > a:only-child:hover {
+  background-color: var(--theia-button-hoverBackground);
+  text-decoration: none;
+}
+
+.gs-walkthrough-step-description p > a:only-child:focus {
+  outline: var(--theia-border-width) solid var(--theia-focusBorder);
+}
+
 .gs-walkthrough-more {
   display: inline-block;
   margin-top: calc(var(--theia-ui-padding) / 2);

package/src/browser/walkthrough-section.spec.tsx

@@ -400,7 +400,9 @@ describe('WalkthroughSection', () => {
         }, 50);
     });
     it('should list at most WALKTHROUGH_LIST_LIMIT walkthroughs and delegate More... to the picker', done => {
-        const walkthroughs = [1, 2, 3, 4, 5].map(i => createMockWalkthrough({ id: `wt${i}`, title: `WT ${i}` }));
+        // One more than fits, so that the assertions hold whatever the limit is.
+        const walkthroughs = Array.from({ length: WALKTHROUGH_LIST_LIMIT + 1 },
+            (_, i) => createMockWalkthrough({ id: `wt${i}`, title: `WT ${i}` }));
         const mockService = createMockWalkthroughService(walkthroughs);
         let showAllCalled = false;
 
@@ -459,6 +461,32 @@ describe('WalkthroughSection', () => {
         }, 50);
     });
 
+    it('should render nothing once every walkthrough is complete', done => {
+        const walkthroughs = [createMockWalkthrough({
+            id: 'done',
+            title: 'Done',
+            steps: [createMockStep({ id: 's1', isComplete: true })]
+        })];
+        const mockService = createMockWalkthroughService(walkthroughs);
+
+        root.render(
+            <WalkthroughSection
+                walkthroughService={mockService as unknown as WalkthroughService}
+                markdownRenderer={mockRenderer}
+                themeService={createMockThemeService()}
+                logger={createMockLogger()}
+                onShowAll={() => { }}
+            />
+        );
+
+        setTimeout(() => {
+            // Not even the heading: the section must not hold on to its place in the welcome page.
+            // eslint-disable-next-line no-null/no-null
+            assert.strictEqual(container.querySelector('.gs-section'), null, 'Should not render the section');
+            done();
+        }, 50);
+    });
+
     it('should not offer More... when every walkthrough is listed', done => {
         const walkthroughs = [1, 2].map(i => createMockWalkthrough({ id: `wt${i}`, title: `WT ${i}` }));
         const mockService = createMockWalkthroughService(walkthroughs);

package/src/browser/walkthrough-section.tsx

@@ -35,8 +35,8 @@ export interface WalkthroughSectionProps {
     onShowAll?: () => void;
 }
 
-/** How many walkthroughs are listed on the welcome page. */
-export const WALKTHROUGH_LIST_LIMIT = 2;
+/** How many walkthroughs are listed on the welcome page; the rest stay behind `More...`. */
+export const WALKTHROUGH_LIST_LIMIT = 5;
 
 /**
  * Renders the list of contributed walkthroughs, or the currently selected walkthrough.
@@ -77,12 +77,14 @@ export function WalkthroughSection(props: WalkthroughSectionProps): React.ReactE
     }
 
     const walkthroughs = walkthroughService.getWalkthroughs();
-    if (walkthroughs.length === 0) {
+    // A finished walkthrough has nothing left to offer here; it stays reachable through the
+    // `walkthrough.open` command. Once none is pending the section renders nothing at all, so that it does not
+    // hold on to its place in the welcome page for an empty heading.
+    const pending = walkthroughs.filter(walkthrough => walkthrough.steps.some(step => !step.isComplete));
+    if (pending.length === 0) {
         return <React.Fragment />;
     }
 
-    // A finished walkthrough has nothing left to offer here; it stays reachable through `onShowAll`.
-    const pending = walkthroughs.filter(walkthrough => walkthrough.steps.some(step => !step.isComplete));
     const listed = pending.slice(0, WALKTHROUGH_LIST_LIMIT);
     return (
         <div className='gs-section'>