Revert applies_to in directives design for recognition value (#1977)

reakaleek · web-flow · commit 4bb59ab86a8a · 2025-10-01T14:09:21.000+02:00
* Revert applies_to in directives design for recognition value

* Run prettier

* Fix tests
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/applies-switch.css b/src/Elastic.Documentation.Site/Assets/markdown/applies-switch.css
@@ -13,22 +13,18 @@
 			}
 		}
 
-		.applies-item {
+		& > .applies-switch-label > .applies-item {
 			@apply cursor-pointer text-inherit;
 
 			&:hover {
 				@apply text-inherit;
 			}
 			.applicable-info {
-				@apply cursor-pointer border-none bg-transparent p-0;
-
-				&:not(:last-child):after {
-					content: ',';
-				}
+				@apply cursor-pointer;
 			}
 			.applicable-name,
 			.applicable-meta {
-				@apply text-base;
+				@apply text-xs;
 			}
 		}
 
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/applies-to.css b/src/Elastic.Documentation.Site/Assets/markdown/applies-to.css
@@ -9,7 +9,7 @@
 		}
 
 		.applicable-info {
-			@apply border-grey-20 inline-grid cursor-default grid-cols-[auto_1fr_auto] rounded-full border-[1px] bg-white pt-1.5 pr-3 pb-1.5 pl-3;
+			@apply border-grey-20 inline-flex cursor-default rounded-full border-[1px] bg-white pt-1.5 pr-3 pb-1.5 pl-3;
 		}
 
 		.applicable-meta {
@@ -22,11 +22,9 @@
 		}
 
 		.applicable-separator {
+			@apply bg-grey-20 mx-2 self-stretch;
+			mix-blend-mode: multiply;
 			width: 1px;
-			height: 100%;
-			background-color: var(--color-grey-20);
-			margin-left: calc(var(--spacing) * 2);
-			margin-right: calc(var(--spacing) * 2);
 		}
 	}
 
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/dropdown.css b/src/Elastic.Documentation.Site/Assets/markdown/dropdown.css
@@ -38,17 +38,13 @@
 			}
 
 			.applies-dropdown {
-				@apply flex cursor-pointer items-center gap-1 p-2 px-4 font-normal;
+				@apply flex cursor-pointer items-center gap-1 p-2 px-2 font-normal;
 				.applicable-info {
-					@apply cursor-pointer border-none bg-transparent p-0;
-					&:not(:last-child):after {
-						@apply text-sm;
-						content: ',';
-					}
+					@apply cursor-pointer;
 				}
 				.applicable-name,
 				.applicable-meta {
-					@apply text-sm;
+					@apply text-xs;
 				}
 			}
 		}
diff --git a/src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs b/src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs
@@ -64,16 +64,16 @@ public IEnumerable<ApplicabilityItem> GetApplicabilityItems()
 	{
 		var items = new List<ApplicabilityItem>();
 
-		if (AppliesTo.Stack is not null)
-			items.AddRange(ProcessSingleCollection(AppliesTo.Stack, ApplicabilityMappings.Stack));
-
 		if (AppliesTo.Serverless is not null)
 		{
 			items.AddRange(AppliesTo.Serverless.AllProjects is not null
 				? ProcessSingleCollection(AppliesTo.Serverless.AllProjects, ApplicabilityMappings.Serverless)
 				: ProcessMappedCollections(AppliesTo.Serverless, ServerlessMappings));
 		}
 
+		if (AppliesTo.Stack is not null)
+			items.AddRange(ProcessSingleCollection(AppliesTo.Stack, ApplicabilityMappings.Stack));
+
 		if (AppliesTo.Deployment is not null)
 			items.AddRange(ProcessMappedCollections(AppliesTo.Deployment, DeploymentMappings));
 
diff --git a/tests/authoring/Applicability/ApplicableToComponent.fs b/tests/authoring/Applicability/ApplicableToComponent.fs
@@ -554,15 +554,6 @@ apm_agent_java: beta 9.1.0
     let ``renders complex mixed scenario`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<span class="applicable-info" data-tippy-content="We plan to add this functionality in a future Elastic&nbsp;Stack update. Subject to change.
-
-If this functionality is unavailable or behaves differently when deployed on ECH, ECE, ECK, or a self-managed installation, it will be indicated on the page.">
-		<span class="applicable-name">Stack</span>
-		<span class="applicable-separator"></span>
-		<span class="applicable-meta applicable-meta-ga">
-			Planned
-		</span>
-	</span>
 	<span class="applicable-info" data-tippy-content="We plan to add this functionality in a future Serverless&nbsp;Elasticsearch projects update. Subject to change.
 
 Beta features are subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features.">
@@ -581,6 +572,15 @@ This functionality may be changed or removed in a future release. Elastic will w
 			Planned
 		</span>
 	</span>
+	<span class="applicable-info" data-tippy-content="We plan to add this functionality in a future Elastic&nbsp;Stack update. Subject to change.
+
+If this functionality is unavailable or behaves differently when deployed on ECH, ECE, ECK, or a self-managed installation, it will be indicated on the page.">
+		<span class="applicable-name">Stack</span>
+		<span class="applicable-separator"></span>
+		<span class="applicable-meta applicable-meta-ga">
+			Planned
+		</span>
+	</span>
 	<span class="applicable-info" data-tippy-content="We plan to add this functionality in a future Elastic&nbsp;Cloud&nbsp;on&nbsp;Kubernetes update. Subject to change.
 
 Beta features are subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features.">
@@ -723,17 +723,17 @@ product: ga 9.0.0
     let ``renders missing VersioningSystemId coverage`` () =
         markdown |> convertsToHtml """
 <p class="applies applies-block">
-	<span class="applicable-info" data-tippy-content="We plan to add this functionality in a future Elastic&nbsp;Stack update. Subject to change.
-
-If this functionality is unavailable or behaves differently when deployed on ECH, ECE, ECK, or a self-managed installation, it will be indicated on the page.">
-		<span class="applicable-name">Stack</span>
+	<span class="applicable-info" data-tippy-content="We plan to add this functionality in a future Elastic&nbsp;Cloud&nbsp;Serverless update. Subject to change.">
+		<span class="applicable-name">Serverless</span>
 		<span class="applicable-separator"></span>
 		<span class="applicable-meta applicable-meta-ga">
 			Planned
 		</span>
 	</span>
-	<span class="applicable-info" data-tippy-content="We plan to add this functionality in a future Elastic&nbsp;Cloud&nbsp;Serverless update. Subject to change.">
-		<span class="applicable-name">Serverless</span>
+	<span class="applicable-info" data-tippy-content="We plan to add this functionality in a future Elastic&nbsp;Stack update. Subject to change.
+
+If this functionality is unavailable or behaves differently when deployed on ECH, ECE, ECK, or a self-managed installation, it will be indicated on the page.">
+		<span class="applicable-name">Stack</span>
 		<span class="applicable-separator"></span>
 		<span class="applicable-meta applicable-meta-ga">
 			Planned

Original file line number	Diff line number	Diff line change
`@@ -13,22 +13,18 @@`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`
`16`		`- .applies-item {`
	`16`	`+ & > .applies-switch-label > .applies-item {`
`17`	`17`	`@apply cursor-pointer text-inherit;`
`18`	`18`
`19`	`19`	`&:hover {`
`20`	`20`	`@apply text-inherit;`
`21`	`21`	`}`
`22`	`22`	`.applicable-info {`
`23`		`- @apply cursor-pointer border-none bg-transparent p-0;`
`24`		`-`
`25`		`- &:not(:last-child):after {`
`26`		`- content: ',';`
`27`		`- }`
	`23`	`+ @apply cursor-pointer;`
`28`	`24`	`}`
`29`	`25`	`.applicable-name,`
`30`	`26`	`.applicable-meta {`
`31`		`- @apply text-base;`
	`27`	`+ @apply text-xs;`
`32`	`28`	`}`
`33`	`29`	`}`
`34`	`30`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.applicable-info {`
`12`		`- @apply border-grey-20 inline-grid cursor-default grid-cols-[auto_1fr_auto] rounded-full border-[1px] bg-white pt-1.5 pr-3 pb-1.5 pl-3;`
	`12`	`+ @apply border-grey-20 inline-flex cursor-default rounded-full border-[1px] bg-white pt-1.5 pr-3 pb-1.5 pl-3;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`.applicable-meta {`
`@@ -22,11 +22,9 @@`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.applicable-separator {`
	`25`	`+ @apply bg-grey-20 mx-2 self-stretch;`
	`26`	`+ mix-blend-mode: multiply;`
`25`	`27`	`width: 1px;`
`26`		`- height: 100%;`
`27`		`- background-color: var(--color-grey-20);`
`28`		`- margin-left: calc(var(--spacing) * 2);`
`29`		`- margin-right: calc(var(--spacing) * 2);`
`30`	`28`	`}`
`31`	`29`	`}`
`32`	`30`
Original file line number	Diff line number	Diff line change
`@@ -38,17 +38,13 @@`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`.applies-dropdown {`
`41`		`- @apply flex cursor-pointer items-center gap-1 p-2 px-4 font-normal;`
	`41`	`+ @apply flex cursor-pointer items-center gap-1 p-2 px-2 font-normal;`
`42`	`42`	`.applicable-info {`
`43`		`- @apply cursor-pointer border-none bg-transparent p-0;`
`44`		`- &:not(:last-child):after {`
`45`		`- @apply text-sm;`
`46`		`- content: ',';`
`47`		`- }`
	`43`	`+ @apply cursor-pointer;`
`48`	`44`	`}`
`49`	`45`	`.applicable-name,`
`50`	`46`	`.applicable-meta {`
`51`		`- @apply text-sm;`
	`47`	`+ @apply text-xs;`
`52`	`48`	`}`
`53`	`49`	`}`
`54`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -64,16 +64,16 @@ public IEnumerable<ApplicabilityItem> GetApplicabilityItems()`
`64`	`64`	`{`
`65`	`65`	`var items = new List<ApplicabilityItem>();`
`66`	`66`
`67`		`- if (AppliesTo.Stack is not null)`
`68`		`- items.AddRange(ProcessSingleCollection(AppliesTo.Stack, ApplicabilityMappings.Stack));`
`69`		`-`
`70`	`67`	`if (AppliesTo.Serverless is not null)`
`71`	`68`	`{`
`72`	`69`	`items.AddRange(AppliesTo.Serverless.AllProjects is not null`
`73`	`70`	`? ProcessSingleCollection(AppliesTo.Serverless.AllProjects, ApplicabilityMappings.Serverless)`
`74`	`71`	`: ProcessMappedCollections(AppliesTo.Serverless, ServerlessMappings));`
`75`	`72`	`}`
`76`	`73`
	`74`	`+ if (AppliesTo.Stack is not null)`
	`75`	`+ items.AddRange(ProcessSingleCollection(AppliesTo.Stack, ApplicabilityMappings.Stack));`
	`76`	`+`
`77`	`77`	`if (AppliesTo.Deployment is not null)`
`78`	`78`	`items.AddRange(ProcessMappedCollections(AppliesTo.Deployment, DeploymentMappings));`
`79`	`79`