fix: accordion - captures the width of the contents to the width of the accordion (#9807)

Author: deleonio

.github/workflows/update-snapshots.yml

@@ -84,11 +84,21 @@ jobs:
         run: git status
 
       - name: Stage snapshot changes
-        run: find packages \( -path '*/node_modules' -prune \) -o \( -path '*/__snapshots__/*' -o -path '*/snapshots/*' \) -print | xargs --no-run-if-empty git add --
+        run: |
+          # find does not follow symlinks by default, avoiding "beyond a symbolic link" git errors.
+          # test-tag-name-transformer is excluded because its snapshots/ folder is listed in its .gitignore.
+          find packages \( -path '*/node_modules' -o -path '*/test-tag-name-transformer' \) -prune \
+            -o \( -path '*/__snapshots__/*' -o -path '*/snapshots/*' \) -print \
+            | xargs --no-run-if-empty git add --
+
+      - name: Display git status (after git add)
+        run: git status
 
       - name: Commit and push changes
         uses: stefanzweifel/git-auto-commit-action@v7
         with:
           commit_message: Update all snapshots
+          # Disable internal git add so that only the files staged above are committed.
+          file_pattern: ''
           commit_user_name: '${{ steps.app-token.outputs.app-slug }}[bot]'
           commit_user_email: '${{ steps.get-user-id.outputs.user-id }}+${{ steps.app-token.outputs.app-slug }}[bot]@users.noreply.github.com'

packages/components/src/components/@shared/_collapsible.mixin.scss

@@ -21,6 +21,7 @@
 			/* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */
 			transform: translateZ(0);
 			display: grid;
+			grid-template-columns: minmax(0, 1fr);
 			grid-template-rows: 0fr;
 			transition: grid-template-rows 0.3s;
 		}

packages/components/src/components/@shared/_form-field.mixin.scss

@@ -12,7 +12,9 @@
 			}
 
 			&-text {
-				display: ruby;
+				flex-flow: row;
+				align-items: flex-start;
+				justify-content: flex-start;
 			}
 
 			#{$root}--disabled & {

packages/samples/react/src/components/accordion/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolAccordion, KolCombobox } from '@public-ui/react-v19';
+import { KolAccordion } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -16,7 +16,7 @@ export const AccordionBasic: FC = () => (
 
 		<div className="grid gap-4">
 			<KolAccordion _label="Heading Accordion Tab 1 (open)" _open>
-				<KolCombobox _label="Combobox in Accordion" _suggestions="['Herr','Frau','Firma']" />
+				Contents Accordion Tab 1
 			</KolAccordion>
 			<KolAccordion _label="Heading Accordion Tab 2">Contents Accordion Tab 2</KolAccordion>
 			<KolAccordion _label="Heading Accordion Tab 3 (deactivated)" _disabled>

packages/samples/react/src/scenarios/accordionComponentContent.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { KolAccordion, KolCombobox, KolTableStateful } from '@public-ui/react-v19';
+import { SampleDescription } from '../components/SampleDescription';
+
+import type { FC } from 'react';
+
+const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];
+
+export const AccordionComponentContent: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolAccordion can have other KoliBri components as content. Some are shown here.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolAccordion _label="With Combobox" _open>
+				<KolCombobox _label="Combobox in Accordion" _suggestions="['Herr','Frau','Firma']" />
+			</KolAccordion>
+			<KolAccordion _label="With Table" _open>
+				<KolTableStateful
+					_label="Table for demonstration purposes with different text align properties"
+					_headers={{
+						horizontal: [
+							[
+								{ label: 'left', key: 'left', textAlign: 'left', width: 300 },
+								{
+									label: 'center',
+									key: 'center',
+									textAlign: 'center',
+									width: 300,
+								},
+								{ label: 'right', key: 'right', textAlign: 'right', width: 300 },
+							],
+						],
+					}}
+					_data={DATA}
+				/>
+			</KolAccordion>
+		</div>
+	</>
+);

packages/samples/react/src/scenarios/routes.ts

@@ -1,4 +1,5 @@
 import type { Routes } from '../shares/types';
+import { AccordionComponentContent } from './accordionComponentContent';
 import { ButtonShortkeyTable } from './button-shortkey-table';
 import { ChangeTabindex } from './change-tabindex';
 import { CustomTooltipCssProperties } from './custom-tooltip-css-properties';
@@ -37,6 +38,7 @@ export const SCENARIO_ROUTES: Routes = {
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
 		'toolbar-item-order': ToolbarItemOrder,
 		'tooltip-positioning': TooltipPositioning,
+		'accordion-components': AccordionComponentContent,
 		'z-index': ZIndexScenario,
 		'performance-test': PerformanceTest,
 		skeleton: Skeleton,

packages/test-tag-name-transformer/package.json

@@ -3,8 +3,7 @@
 	"private": true,
 	"scripts": {
 		"prepare": "cpy \"../themes/default/snapshots\" ./ --dot",
-		"test": "cross-env THEME_MODULE=theme ENABLE_TAG_NAME_TRANSFORMER=true kolibri-visual-test",
-		"test:update:e2e": "cross-env THEME_MODULE=theme ENABLE_TAG_NAME_TRANSFORMER=true kolibri-visual-test --update-snapshots=changed theme-snapshots.spec.js"
+		"test": "cross-env THEME_MODULE=theme ENABLE_TAG_NAME_TRANSFORMER=true kolibri-visual-test"
 	},
 	"devDependencies": {
 		"@public-ui/themes": "workspace:*",