Skip to content

Commit

Permalink
Backport #1097, #1104, #1148 (#1149)
Browse files Browse the repository at this point in the history
* ci: Adjust CI Build for Doc-Only PRs validations (#1097)

* ci: Adjust stage-determine-changes.yml (#1104)

* docs: Documentation adjustments (#1148)

---------

Co-authored-by: Agnès ZITTE <16295702+agneszitte@users.noreply.github.com>
Co-authored-by: Youssef Victor <youssefvictor00@gmail.com>
  • Loading branch information
3 people authored Jun 4, 2024
1 parent 438f84a commit ec889c3
Show file tree
Hide file tree
Showing 15 changed files with 114 additions and 141 deletions.
34 changes: 20 additions & 14 deletions build/workflow/pipeline.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,8 @@ trigger:
- '/'
exclude:
- .dependabot/
- .github/
# don't trigger the CI if only docs files are changed
- doc/*
- '**/*.md'

pr:
pr:
branches:
include:
- main
Expand All @@ -33,10 +29,6 @@ pr:
- '/'
exclude:
- .dependabot/
- .github/
# don't trigger the CI if only docs files are changed
- doc/*
- '**/*.md'

variables:
# Path where packages (nuget or app packages) will be copied to.
Expand All @@ -46,18 +38,32 @@ variables:
IsReleaseBranch: $[or(eq(variables['Build.SourceBranch'], 'refs/heads/main'), startsWith(variables['Build.SourceBranch'], 'refs/heads/feature/'), startsWith(variables['Build.SourceBranch'], 'refs/heads/release/'))]

stages:
- stage: Validations
displayName: Validations
- stage: Determine_Changes
displayName: Determine Changes
jobs:
- template: stage-validations.yml
- template: stage-determine-changes.yml

- stage: Docs_Validations
displayName: Docs Validations
dependsOn: Determine_Changes
# Trigger this stage when docs files are changed
condition: or(eq(dependencies.Determine_Changes.outputs['evaluate_changes.DetermineChanges.docsOnly'], 'true'), eq(dependencies.Determine_Changes.outputs['evaluate_changes.DetermineChanges.mixedChanges'], 'true'))
jobs:
- template: stage-docs-validations.yml

- stage: Packages
dependsOn: Validations
displayName: Packages
dependsOn: Determine_Changes
# Don't trigger this stage if only docs files are changed
condition: ne(dependencies.Determine_Changes.outputs['evaluate_changes.DetermineChanges.docsOnly'], 'true')
jobs:
- template: stage-build-packages.yml

- stage: Tests
dependsOn: Validations
displayName: Tests
dependsOn: Determine_Changes
# Don't trigger this stage if only docs files are changed
condition: ne(dependencies.Determine_Changes.outputs['evaluate_changes.DetermineChanges.docsOnly'], 'true')
jobs:
- template: stage-uitests-wasm.yml
- template: stage-build-ios.yml
Expand Down
74 changes: 74 additions & 0 deletions build/workflow/stage-determine-changes.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
jobs:
- job: evaluate_changes
displayName: 'Check for Doc Only Changes'
pool:
vmImage: 'ubuntu-latest'
steps:
- powershell: |
# Determine the context of the build (PR or push) and set the target branch accordingly
$isPR = "$(Build.Reason)" -eq "PullRequest"
# Normalize the target branch name for PR builds or default to 'main' for push builds
$targetBranchName = $isPR ? "$(System.PullRequest.TargetBranch)" -replace 'refs/heads/', '' : "main"
Write-Host "Build context determined: $(if ($isPR) { 'Pull Request targeting ' + $targetBranchName } else { 'Push' })"
# Fetch the target or default base branch and determine the merge base
git fetch origin $targetBranchName
$mergeBase = git merge-base HEAD "origin/$targetBranchName"
Write-Host "Merge base with '$targetBranchName' identified at $mergeBase"
Write-Host "Comparing changes from $mergeBase..."
$gitDiffCommand = "git diff $mergeBase --name-only"
$changedFiles = Invoke-Expression $gitDiffCommand
$docsOnly = $false
$nonDocsOnly = $false
$mixedChanges = $false
$docFiles = 0
$nonDocFiles = 0
if ($changedFiles) {
Write-Host "Changed files:"
Write-Host $changedFiles
} else {
Write-Host "No files have changed."
}
foreach ($file in $changedFiles -split "`n") {
# Identifying changes as documentation:
$isDoc = $file.StartsWith("doc/") -or # Files in the 'doc/' directory
($file -match "^[^/]+\.md$") -or # Markdown files at the root level (with no subdirectories involved)
($file -match "^\.github/.*\.md$") -or # Markdown files within the .github folder (including its subdirectories)
($file -match "^\.(markdownlint|cspell)\.json$") # Specific JSON files: .markdownlint.json and cspell.json
if ($isDoc) {
$docFiles++
} else {
$nonDocFiles++
}
}
Write-Host "Documentation files changed: $docFiles"
Write-Host "Non-documentation files changed: $nonDocFiles"
if ($docFiles -gt 0 -and $nonDocFiles -eq 0) {
$docsOnly = $true
Write-Host "All changes are documentation-only."
} elseif ($docFiles -gt 0 -and $nonDocFiles -gt 0) {
$mixedChanges = $true
Write-Host "Mixed changes detected: Both documentation and non-documentation files have been modified."
} elseif ($nonDocFiles -gt 0) {
$nonDocsOnly = $true
Write-Host "Non-documentation changes detected."
}
# Explicitly write the final values for clarity
Write-Host "Final values:"
Write-Host "docsOnly: $docsOnly"
Write-Host "nonDocsOnly: $nonDocsOnly"
Write-Host "mixedChanges: $mixedChanges"
# Output the results as pipeline variables
Write-Host "##vso[task.setvariable variable=docsOnly;isOutput=true]$docsOnly"
Write-Host "##vso[task.setvariable variable=nonDocsOnly;isOutput=true]$nonDocsOnly"
Write-Host "##vso[task.setvariable variable=mixedChanges;isOutput=true]$mixedChanges"
name: DetermineChanges
File renamed without changes.
17 changes: 5 additions & 12 deletions doc/controls/DrawerFlyoutPresenter.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,16 +92,7 @@ notes:

### Usage

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/JWTZxnVsd_A"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
> [!Video https://www.youtube-nocookie.com/embed/JWTZxnVsd_A]

To use this, simply use a `Flyout` with `Placement="Full"` and one of the followings as the `FlyoutPresenterStyle`.

Expand Down Expand Up @@ -151,7 +142,8 @@ Example:
</Flyout>
```

> remarks: `Padding` is used on the flyout content to avoid content being clipped.
> [!NOTE]
> `Padding` is used on the flyout content to avoid content being clipped.
- Custom background

```xml
Expand All @@ -167,7 +159,8 @@ Example:
</Flyout>
```

> remarks: Avoid setting `Background` directly on the flyout content:
> [!WARNING]
> Avoid setting `Background` directly on the flyout content:
>
> ```xml
> <Border toolkit:VisibleBoundsPadding.PaddingMask="All" Background="SkyBlue">
Expand Down
13 changes: 2 additions & 11 deletions doc/controls/ExtendedSplashScreen.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,8 @@ A common use case for this control is to display an application loading element

> [!TIP]
> Users expect applications to load quickly after they launch them, so it is important to minimize the duration that a splash screen is displayed. `ExtendedSplashScreen` is intended to support a consistent user experience across platforms where scenarios necessitate a longer startup process.
<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/jMI4E2e9gYE"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
>
> [!Video https://www.youtube-nocookie.com/embed/jMI4E2e9gYE]
## Properties

Expand Down
11 changes: 1 addition & 10 deletions doc/controls/LoadingView.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,7 @@ uid: Toolkit.Controls.LoadingView

Represents a control that indicates that the UI is waiting on a task to complete.

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/3cpjJ3keBvM"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
> [!Video https://www.youtube-nocookie.com/embed/3cpjJ3keBvM]
## Properties

Expand Down
11 changes: 1 addition & 10 deletions doc/controls/NavigationBar.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,7 @@ The `NavigationBar` represents a specialized app bar that provides the layout fo

For a quick introduction to `NavigationBar`, you can check out our introductory video below:

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/4-Q0hy2BnMI"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
> [!Video https://www.youtube-nocookie.com/embed/4-Q0hy2BnMI]
This document highlights some of the differences you might encounter when working with the native mode of `NavigationBar` on either **iOS** or **Android**.

Expand Down
26 changes: 4 additions & 22 deletions doc/controls/ResponsiveView.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,31 +84,13 @@ If you prefer instructional videos, you can follow our tutorials on how to work

### [**XAML**](#tab/techbite-xaml) <!-- markdownlint-disable-line MD051 -->

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/VgpC79ErNRI"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
> [!Video https://www.youtube-nocookie.com/embed/VgpC79ErNRI]
### [**C# Markup**](#tab/techbite-csmarkup) <!-- markdownlint-disable-line MD051 -->

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/lQueBn6LEyU"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>

***
> [!Video https://www.youtube-nocookie.com/embed/lQueBn6LEyU]
---

> [!TIP]
> It is not necessary to define every template or layout breakpoint: Narrowest, Narrow, Normal, Wide, Widest. You can just define the bare minimum needed.
Expand Down
13 changes: 2 additions & 11 deletions doc/controls/SafeArea.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,7 @@ The `ApplicationView.VisibleBounds` is the rectangular area of the screen which

In some cases, it is acceptable for visible content to be partially obscured (a page background for example) and it should extend to fill the entire window. Other types of content should be restricted to the visible bounds (for instance: readable text, or interactive controls). `SafeArea` enables this kind of fine-grained control over responsiveness to the safe and "unsafe" areas of the screen.

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/H-HkMzYCiOM"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
> [!Video https://www.youtube-nocookie.com/embed/H-HkMzYCiOM]
## Properties

Expand Down Expand Up @@ -186,7 +177,7 @@ Bottom TabBar:

![safearea_with_margin_alpha](../assets/safearea_with_margin.png)

***
---

### Using `InsetMask.SoftInput` for on-screen keyboards

Expand Down
11 changes: 1 addition & 10 deletions doc/controls/ShadowContainer.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,7 @@ uid: Toolkit.Controls.ShadowContainer

The `ShadowContainer` provides the ability to layer multiple shadows to its content.

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/mohQvifKF0Y"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
> [!Video https://www.youtube-nocookie.com/embed/mohQvifKF0Y]
## Package Reference

Expand Down
11 changes: 1 addition & 10 deletions doc/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,7 @@ This article is a guide for installing the base Uno Toolkit library, additional
- [Getting Started with Material for Toolkit](xref:Toolkit.GettingStarted.Material)
- [Getting Started with Cupertino for Toolkit](xref:Toolkit.GettingStarted.Cupertino)

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/sDmyWJaQp4Q"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
> [!Video https://www.youtube-nocookie.com/embed/sDmyWJaQp4Q]
### Installation

Expand Down
11 changes: 1 addition & 10 deletions doc/helpers/StatusBar-extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,7 @@ uid: Toolkit.Helpers.StatusBarExtensions

Provides two attached properties on `Page` to control the visuals of the status bar on mobile platforms.

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/Mef71b6978s"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
> [!Video https://www.youtube-nocookie.com/embed/Mef71b6978s]
## Remarks

Expand Down
11 changes: 1 addition & 10 deletions doc/helpers/resource-extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,7 @@ uid: Toolkit.Helpers.ResourceExtensions

This extension facilitates assigning a specific `ResourceDictionary` directly to a control's style. It simplifies [lightweight styling](../lightweight-styling.md) by eliminating the necessity to declare each resource on the page explicitly, enabling the easy creation of diverse visual elements with shared styles but varied attributes. The extension also supports the reuse of resource dictionaries across different control styles, enhancing consistency and efficiency in the UI design process.

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/OwQkYSlowfU"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
> [!Video https://www.youtube-nocookie.com/embed/OwQkYSlowfU]
## Attached Properties

Expand Down
11 changes: 1 addition & 10 deletions doc/lightweight-styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,7 @@ uid: Toolkit.LightweightStyling

For general information about [lightweight styling](https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling), check out [Lightweight Styling in Uno.Themes](xref:uno.themes.lightweightstyling).

<div style="position: relative; width: 100%; padding-bottom: 56.25%;">
<iframe
src="https://www.youtube-nocookie.com/embed/5CsJHMTlNAw"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</iframe>
</div>
> [!Video https://www.youtube-nocookie.com/embed/5CsJHMTlNAw]
## Example

Expand Down
1 change: 0 additions & 1 deletion doc/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@
href: helpers/progress-extensions.md
- name: Responsive markup extension
href: helpers/responsive-extension.md
- name: StatusBar attached properties
- name: Resource Extensions
href: helpers/resource-extensions.md
- name: Selector Extensions
Expand Down

0 comments on commit ec889c3

Please sign in to comment.