diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml index acfa44d699..53d09a68aa 100644 --- a/.github/workflows/build.yaml +++ b/.github/workflows/build.yaml @@ -15,6 +15,7 @@ permissions: jobs: build: + name: πŸ—οΈ Build TypeScript Project uses: OutSystems/ui-components.github-reusable-workflows/.github/workflows/ts-build-project.yaml@7ffd7f90f6e5016bd92d0e050d2516084b99c2f6 #v0.2.5 with: github-ref: ${{ github.ref }} diff --git a/.github/workflows/manage-docs.yaml b/.github/workflows/manage-docs.yaml index 7f22cc8a53..f061af7d32 100644 --- a/.github/workflows/manage-docs.yaml +++ b/.github/workflows/manage-docs.yaml @@ -24,7 +24,7 @@ jobs: is-real-osui-repo: ${{ steps.check-is-real-osui-repo.outputs.isIt }} steps: - - name: Check if it's outsystems-ui real repository + - name: πŸ”Ž Check if it's outsystems-ui real repository id: check-is-real-osui-repo run: | echo "isIt=${{ github.event.repository.name == 'outsystems-ui' }}" >> "$GITHUB_OUTPUT" @@ -32,26 +32,26 @@ jobs: run-lint: runs-on: ubuntu-latest steps: - - name: Azure Login + - name: πŸ”‘ Azure Login uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-login@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 - - name: Get GitHub Token from Azure Key Vault + - name: πŸ”Ž Get GitHub Token from Azure Key Vault id: get-github-token uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-keyvault-get@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 with: key-name: o11odc-github-gitpersonal-token-prd - - name: Checkout into ${{ inputs.branch-name }} + - name: πŸ“₯ Checkout into ${{ inputs.branch-name }} uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: ref: ${{ inputs.branch-name }} token: ${{ steps.get-github-token.outputs.az-keyvault-value }} - - name: Install project dependencies + - name: πŸ•ΈοΈ Install project dependencies if: ${{ inputs.run-lint == true }} run: npm install - - name: Run build + - name: πŸ—οΈ Run build if: ${{ inputs.run-lint == true }} run: npm run build @@ -60,22 +60,22 @@ jobs: runs-on: ubuntu-latest steps: - - name: Azure Login + - name: πŸ”‘ Azure Login uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-login@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 - - name: Get GitHub Token from Azure Key Vault + - name: πŸ”Ž Get GitHub Token from Azure Key Vault id: get-github-token uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-keyvault-get@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 with: key-name: o11odc-github-gitpersonal-token-prd - - name: Checkout into ${{ inputs.branch-name }} + - name: πŸ“₯ Checkout into ${{ inputs.branch-name }} uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: ref: ${{ inputs.branch-name }} token: ${{ steps.get-github-token.outputs.az-keyvault-value }} - - name: Create new deploy-docs branch based on ${{ inputs.branch-name }} + - name: πŸ“¦ Create new deploy-docs branch based on ${{ inputs.branch-name }} run: | git checkout -b deploy-docs git push -u origin deploy-docs @@ -85,36 +85,36 @@ jobs: runs-on: ubuntu-latest steps: - - name: Azure Login + - name: πŸ”‘ Azure Login uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-login@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 - - name: Get GitHub Token from Azure Key Vault + - name: πŸ”Ž Get GitHub Token from Azure Key Vault id: get-github-token uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-keyvault-get@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 with: key-name: o11odc-github-gitpersonal-token-prd - - name: Configure Git with the UiComponentsBot Token + - name: πŸ”§ Configure Git with the UiComponentsBot Token run: | git config --global user.email "sa_git_uicomponents@outsystems.com" git config --global user.name "UiComponentsBot" - - name: Checkout into deploy-docs + - name: πŸ“₯ Checkout into deploy-docs uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: ref: deploy-docs token: ${{ steps.get-github-token.outputs.az-keyvault-value }} - - name: Install project dependencies + - name: πŸ•ΈοΈ Install project dependencies run: npm install - - name: Install graphviz + - name: πŸ“¦ Install graphviz run: sudo apt install -y graphviz - - name: Generate documentation + - name: πŸ—οΈ Generate documentation run: npm run docs - - name: Perform git commit + - name: πŸ“€ Perform git commit uses: ./.github/os-git-actions/manual-commit/ with: branch: deploy-docs @@ -126,28 +126,28 @@ jobs: runs-on: ubuntu-latest steps: - - name: Azure Login + - name: πŸ”‘ Azure Login uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-login@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 - - name: Get GitHub Token from Azure Key Vault + - name: πŸ”Ž Get GitHub Token from Azure Key Vault id: get-github-token uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-keyvault-get@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 with: key-name: o11odc-github-gitpersonal-token-prd - - name: Checkout into deploy-docs + - name: πŸ“₯ Checkout into deploy-docs uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: ref: deploy-docs token: ${{ steps.get-github-token.outputs.az-keyvault-value }} - - name: Get osuidocs Token from Azure Key Vault + - name: πŸ”Ž Get osuidocs Token from Azure Key Vault id: get-osuidocs-token uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-keyvault-get@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 with: key-name: o11odc-github-osuidocs-token-prd - - name: Push documentation files into github page + - name: πŸ“€ Push documentation files into github page if: ${{ needs.check-repo.outputs.is-real-osui-repo == 'true' }} uses: GuillaumeFalourd/copy-push-files@758ee05c45fbd682b62908f2373bf070077a1e43 # v1 with: @@ -163,12 +163,12 @@ jobs: if: ${{ inputs.delete-created-branch == true }} steps: - - name: Checkout branch dev + - name: πŸ“₯ Checkout branch dev uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: ref: dev - - name: Delete branch deploy-docs + - name: πŸ—‘οΈ Delete branch deploy-docs shell: bash run: | git push origin -d deploy-docs diff --git a/.github/workflows/manage-npm.yaml b/.github/workflows/manage-npm.yaml index bc6164909a..2909807d15 100644 --- a/.github/workflows/manage-npm.yaml +++ b/.github/workflows/manage-npm.yaml @@ -16,6 +16,10 @@ on: type: boolean default: true +permissions: + contents: read + id-token: write + jobs: check-repo: runs-on: ubuntu-latest @@ -24,7 +28,7 @@ jobs: is-real-osui-repo: ${{ steps.check-is-real-osui-repo.outputs.isIt }} steps: - - name: Check if it's outsystems-ui real repository + - name: πŸ”Ž Check if it's outsystems-ui real repository id: check-is-real-osui-repo run: | echo "isIt=${{ github.event.repository.name == 'outsystems-ui' }}" >> "$GITHUB_OUTPUT" @@ -33,27 +37,27 @@ jobs: runs-on: ubuntu-latest steps: - - name: Azure Login + - name: πŸ”‘ Azure Login uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-login@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 - - name: Get GitHub Token + - name: πŸ”Ž Get GitHub Token id: get-github-token uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-keyvault-get@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 with: key-name: o11odc-github-gitpersonal-token-prd - - name: Checkout into ${{ inputs.branch-name }} + - name: πŸ“₯ Checkout into ${{ inputs.branch-name }} uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: ref: ${{ inputs.branch-name }} token: ${{ steps.get-github-token.outputs.az-keyvault-value }} - - name: Install project dependencies + - name: πŸ•ΈοΈ Install project dependencies if: ${{ inputs.run-lint == true }} run: | npm install - - name: Run build + - name: πŸ—οΈ Run build if: ${{ inputs.run-lint == true }} run: | npm run build @@ -63,22 +67,22 @@ jobs: runs-on: ubuntu-latest steps: - - name: Azure Login + - name: πŸ”‘ Azure Login uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-login@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 - - name: Get GitHub Token from Azure Key Vault + - name: πŸ”Ž Get GitHub Token from Azure Key Vault id: get-github-token uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-keyvault-get@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 with: key-name: o11odc-github-gitpersonal-token-prd - - name: Checkout into ${{ inputs.branch-name }} + - name: πŸ“₯ Checkout into ${{ inputs.branch-name }} uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: ref: ${{ inputs.branch-name }} token: ${{ steps.get-github-token.outputs.az-keyvault-value }} - - name: Create new deploy-npm branch based on ${{ inputs.branch-name }} + - name: πŸ“¦ Create new deploy-npm branch based on ${{ inputs.branch-name }} run: | git checkout -b deploy-npm git push -u origin deploy-npm @@ -88,43 +92,43 @@ jobs: runs-on: ubuntu-latest steps: - - name: Azure Login + - name: πŸ”‘ Azure Login uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-login@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 - - name: Get GitHub Token from Azure Key Vault + - name: πŸ”Ž Get GitHub Token from Azure Key Vault id: get-github-token uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-keyvault-get@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 with: key-name: o11odc-github-gitpersonal-token-prd - - name: Configure Git with the UiComponentsBot Token + - name: πŸ”§ Configure Git with the UiComponentsBot Token run: | git config --global user.email "sa_git_uicomponents@outsystems.com" git config --global user.name "UiComponentsBot" - - name: Checkout into deploy-npm + - name: πŸ“₯ Checkout into deploy-npm uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: ref: deploy-npm token: ${{ steps.get-github-token.outputs.az-keyvault-value }} - - name: Install project dependencies + - name: πŸ•ΈοΈ Install project dependencies run: | npm install - - name: Remove dist folder from .gitignore + - name: πŸ—‘οΈ Remove dist folder from .gitignore run: | gulp removeDistFromGitIgnore - - name: Compile into production mode + - name: πŸ—οΈ Compile into production mode run: | npm run build - - name: Clean files and folders + - name: 🧹 Clean files and folders run: | gulp prepareToDeploy - - name: Commit, remove gitignore and commit again! + - name: πŸ“€ Commit, remove gitignore and commit again! run: | git add . git commit -m 'OK to Deploy into NPM. [skip ci]' @@ -141,16 +145,16 @@ jobs: runs-on: ubuntu-latest steps: - - name: Azure Login + - name: πŸ”‘ Azure Login uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-login@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 - - name: Get GitHub Token from Azure Key Vault + - name: πŸ”Ž Get GitHub Token from Azure Key Vault id: get-github-token uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-keyvault-get@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 with: key-name: o11odc-github-gitpersonal-token-prd - - name: Checkout into deploy-npm + - name: πŸ“₯ Checkout into deploy-npm uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: ref: deploy-npm @@ -158,20 +162,14 @@ jobs: - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0 with: - node-version: 16 + node-version: 20 registry-url: https://registry.npmjs.org/ - - - name: Get NPM Token from Azure Key Vault - id: get-npm-token - uses: OutSystems/rd.github-reusable-workflows/.github/actions/az-keyvault-get@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 - with: - key-name: o11odc-github-npm-token-prd - - - name: Publish new version to NPM + - name: πŸ”„ Ensure Latest npm + run: npm install -g npm@latest + shell: bash + - name: πŸš€ Publish new version to NPM if: ${{ needs.check-repo.outputs.is-real-osui-repo == 'true' }} - run: npm publish - env: - NODE_AUTH_TOKEN: ${{ steps.get-npm-token.outputs.az-keyvault-value }} + run: npm publish --provenance delete-branch: needs: publish-npm @@ -179,12 +177,12 @@ jobs: if: ${{ inputs.delete-created-branch == true }} steps: - - name: Checkout branch dev + - name: πŸ“₯ Checkout branch dev uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: ref: dev - - name: Delete branch deploy-npm + - name: πŸ—‘οΈ Delete branch deploy-npm shell: bash run: | git push origin -d deploy-npm diff --git a/.github/workflows/pre-release.yaml b/.github/workflows/pre-release.yaml index d0fdf436bd..90f7448761 100644 --- a/.github/workflows/pre-release.yaml +++ b/.github/workflows/pre-release.yaml @@ -22,6 +22,7 @@ permissions: jobs: create-release-candidate: + name: πŸ“¦ Create Release Candidate uses: OutSystems/ui-components.github-reusable-workflows/.github/workflows/pre-release.yaml@7ffd7f90f6e5016bd92d0e050d2516084b99c2f6 #v0.2.5 with: new-version: ${{ inputs.new-version }} diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index 04882e39bd..bed10198ea 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -22,6 +22,7 @@ permissions: jobs: set-release-latest: + name: 🏷️ Set Release as Latest uses: OutSystems/ui-components.github-reusable-workflows/.github/workflows/release.yaml@7ffd7f90f6e5016bd92d0e050d2516084b99c2f6 #v0.2.5 with: new-version: ${{ inputs.new-version }} diff --git a/.github/workflows/validate-pr-labels.yaml b/.github/workflows/validate-pr-labels.yaml index f8d04e04c0..9110e503b1 100644 --- a/.github/workflows/validate-pr-labels.yaml +++ b/.github/workflows/validate-pr-labels.yaml @@ -14,4 +14,5 @@ permissions: jobs: check-label: + name: πŸ”Ž Validate PR Labels uses: OutSystems/rd.github-reusable-workflows/.github/workflows/validate-pr-labels.yaml@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 diff --git a/.github/workflows/validate-pr-title.yaml b/.github/workflows/validate-pr-title.yaml index d8eb7c2f9a..92c76803b4 100644 --- a/.github/workflows/validate-pr-title.yaml +++ b/.github/workflows/validate-pr-title.yaml @@ -14,6 +14,7 @@ permissions: jobs: check-title: + name: πŸ”Ž Validate PR Title uses: OutSystems/rd.github-reusable-workflows/.github/workflows/validate-pr-title.yaml@9d497d1c5bc6e355aa8f4663539e6b75c212f6b4 #v2.0.7 with: validate-semVer: false diff --git a/README.md b/README.md index d5dc46ff68..807d91f26f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# OutSystems UI Β· v2.25.0 +# OutSystems UI Β· v2.26.0 ![GitHub License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg) diff --git a/gulp/ProjectSpecs/DefaultSpecs.js b/gulp/ProjectSpecs/DefaultSpecs.js index 6e22bfe8d7..22847cbc6e 100644 --- a/gulp/ProjectSpecs/DefaultSpecs.js +++ b/gulp/ProjectSpecs/DefaultSpecs.js @@ -21,7 +21,7 @@ const constants = { // Store the default project specifications const specs = { - "version": "2.25.0", + "version": "2.26.0", "name": "OutSystems UI", "description": "", "url": "Website:\n β€’ https://www.outsystems.com/outsystems-ui", diff --git a/gulp/Tasks/ScssTanspile.js b/gulp/Tasks/ScssTranspile.js similarity index 100% rename from gulp/Tasks/ScssTanspile.js rename to gulp/Tasks/ScssTranspile.js diff --git a/gulp/Tasks/TsTanspile.js b/gulp/Tasks/TsTranspile.js similarity index 100% rename from gulp/Tasks/TsTanspile.js rename to gulp/Tasks/TsTranspile.js diff --git a/gulpfile.js b/gulpfile.js index f1e8c43657..4566e07058 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -6,9 +6,9 @@ const fs = require('fs'); // Get dependencies tasks const createScssFile = require('./gulp/Tasks/CreateScssFile'); -const cssTranspile = require('./gulp/Tasks/ScssTanspile'); +const cssTranspile = require('./gulp/Tasks/ScssTranspile'); const project = require('./gulp/ProjectSpecs/DefaultSpecs'); -const tsTranspile = require('./gulp/Tasks/TsTanspile'); +const tsTranspile = require('./gulp/Tasks/TsTranspile'); const updatetVersion = require('./gulp/Tasks/UpdateVersion'); const ptdNpm = require('./gulp/Tasks/PrepareToDeployNpm'); const gitIgnoreUpdate = require('./gulp/Tasks/GitIgnoreUpdate'); diff --git a/package.json b/package.json index 82c326b070..676a988d85 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "outsystems-ui", - "version": "2.25.0", + "version": "2.26.0", "description": "OutSystems UI Framework", "license": "BSD-3-Clause", "scripts": { diff --git a/src/scripts/OSFramework/OSUI/Constants.ts b/src/scripts/OSFramework/OSUI/Constants.ts index be6fdfcf4e..2c51580876 100644 --- a/src/scripts/OSFramework/OSUI/Constants.ts +++ b/src/scripts/OSFramework/OSUI/Constants.ts @@ -166,7 +166,7 @@ namespace OSFramework.OSUI.Constants { export const OSPlatform = '<->platformType<->'; /* OSUI Version */ - export const OSUIVersion = '2.25.0'; + export const OSUIVersion = '2.26.0'; /* Constant to be used across project as the zero value*/ export const ZeroValue = 0; diff --git a/src/scripts/OSFramework/OSUI/Pattern/Notification/scss/_notification.scss b/src/scripts/OSFramework/OSUI/Pattern/Notification/scss/_notification.scss index 823cb70001..fa0c646574 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Notification/scss/_notification.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/Notification/scss/_notification.scss @@ -17,7 +17,9 @@ padding: var(--space-m); pointer-events: none; position: fixed; - transition: transform 300ms ease-out, opacity 300ms ease-out; + transition: + transform 300ms ease-out, + opacity 300ms ease-out; user-select: none; width: var(--notification-width); z-index: var(--osui-notification-layer); @@ -174,10 +176,10 @@ } /// -.android[data-status-bar-height] { +.android { .layout-native { .osui-notification--is-open { - margin-top: var(--status-bar-height); + margin-top: #{android-safe-area-top()}; } } } diff --git a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss index 0925e94bd0..f3493f64b2 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss @@ -56,6 +56,11 @@ } } +// layer exception when a popup is open on the same screen +html:has(.popup-backdrop) .osui-overflow-menu__balloon { + z-index: var(--layer-global-off-canvas); +} + .tablet, .phone { .osui-overflow-menu { diff --git a/src/scripts/OSFramework/OSUI/Pattern/SectionIndex/SectionIndex.ts b/src/scripts/OSFramework/OSUI/Pattern/SectionIndex/SectionIndex.ts index 8ccb594800..b9c73eb874 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/SectionIndex/SectionIndex.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/SectionIndex/SectionIndex.ts @@ -201,7 +201,8 @@ namespace OSFramework.OSUI.Patterns.SectionIndex { // Check if overlay is enabled => If StatusBar is enabled and if is iOS device /* With the introduction of the ios-bounce the overflow container change from the .active-screen into .content */ if ( - Helper.Dom.Attribute.Has(document.body, GlobalEnum.HTMLAttributes.StatusBar) && + (Helper.Dom.Attribute.Has(document.body, GlobalEnum.HTMLAttributes.StatusBar) || + !!window.statusbar?.visible) && Helper.DeviceInfo.GetOperatingSystem() === GlobalEnum.MobileOS.IOS ) { this._mainScrollContainerElement = Helper.Dom.ClassSelector( diff --git a/src/scripts/OSFramework/OSUI/Pattern/SectionIndex/scss/_sectionindex.scss b/src/scripts/OSFramework/OSUI/Pattern/SectionIndex/scss/_sectionindex.scss index d81dd63ddc..611f829f00 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/SectionIndex/scss/_sectionindex.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/SectionIndex/scss/_sectionindex.scss @@ -5,7 +5,7 @@ /// .osui-section-index { - --top-position: calc(var(--header-size) + var(--header-size-content) + var(--status-bar-height)); + --top-position: calc(var(--header-size) + var(--header-size-content) + #{android-safe-area-top()}); display: flex; flex-direction: column; position: relative; diff --git a/src/scripts/OSFramework/OSUI/Pattern/SectionIndexItem/SectionIndexItem.ts b/src/scripts/OSFramework/OSUI/Pattern/SectionIndexItem/SectionIndexItem.ts index b3b3ba8e4d..1c6c212af8 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/SectionIndexItem/SectionIndexItem.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/SectionIndexItem/SectionIndexItem.ts @@ -176,7 +176,8 @@ namespace OSFramework.OSUI.Patterns.SectionIndexItem { // Check if overlay is enabled => If StatusBar is enabled and if is iOS device /* With the introduction of the ios-bounce the overflow container change from the .active-screen into .content */ if ( - Helper.Dom.Attribute.Has(document.body, GlobalEnum.HTMLAttributes.StatusBar) && + (Helper.Dom.Attribute.Has(document.body, GlobalEnum.HTMLAttributes.StatusBar) || + !!window.statusbar?.visible) && Helper.DeviceInfo.GetOperatingSystem() === GlobalEnum.MobileOS.IOS ) { this._mainScrollContainerElement = Helper.Dom.ClassSelector( diff --git a/src/scripts/OSFramework/OSUI/Pattern/Sidebar/scss/_sidebar.scss b/src/scripts/OSFramework/OSUI/Pattern/Sidebar/scss/_sidebar.scss index 90fbdc01fb..2e1bab228a 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Sidebar/scss/_sidebar.scss +++ b/src/scripts/OSFramework/OSUI/Pattern/Sidebar/scss/_sidebar.scss @@ -163,10 +163,10 @@ } /// -.android[data-status-bar-height] { +.android { .layout-native { .osui-sidebar { - padding-top: var(--status-bar-height); + padding-top: #{android-safe-area-top()}; } } } diff --git a/src/scripts/OutSystems/OSUI/Utils/Network.ts b/src/scripts/OutSystems/OSUI/Utils/Network.ts index c58d794fbe..3ebb229180 100644 --- a/src/scripts/OutSystems/OSUI/Utils/Network.ts +++ b/src/scripts/OutSystems/OSUI/Utils/Network.ts @@ -20,9 +20,14 @@ namespace OutSystems.OSUI.Utils.Network { // This method can't implement the CreateApiResponse method since it's defined as a function in SS let typeofConnection = 'webbrowser'; - if (navigator.connection !== undefined && navigator.connection.type !== undefined) { - //In a mobile device - typeofConnection = navigator.connection.type; + if (navigator.onLine) { + if (navigator.connection?.type) { + typeofConnection = navigator.connection.type; + } else { + typeofConnection = 'unknown'; + } + } else { + typeofConnection = 'none'; } return typeofConnection; diff --git a/src/scripts/OutSystems/OSUI/Utils/PreviewInDevices/OnPostMessage.ts b/src/scripts/OutSystems/OSUI/Utils/PreviewInDevices/OnPostMessage.ts index f718005b47..3c301bd2ba 100644 --- a/src/scripts/OutSystems/OSUI/Utils/PreviewInDevices/OnPostMessage.ts +++ b/src/scripts/OutSystems/OSUI/Utils/PreviewInDevices/OnPostMessage.ts @@ -51,7 +51,7 @@ namespace OutSystems.OSUI.Utils.PreviewInDevices { // Adds the is phone class to apply the correct styling // because platform is replacing phone with tablet when we rotate the phone device document.body.classList.add('is-phone'); - document.body.setAttribute('data-status-bar-height', `${notchValue}px`); + document.body.setAttribute('style', `--safe-area-inset-top: ${notchValue}px`); document.head.appendChild(style); } diff --git a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts index 234a824f70..a3d07b2c63 100644 --- a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts +++ b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickr.ts @@ -97,13 +97,15 @@ namespace Providers.OSUI.Datepicker.Flatpickr { return; case OSFramework.OSUI.GlobalEnum.Keycodes.Enter: - case OSFramework.OSUI.GlobalEnum.Keycodes.Space: + case OSFramework.OSUI.GlobalEnum.Keycodes.Space: { e.preventDefault(); // Set the currentDate at the Datepicker - this.provider.setDate(this.provider.now, true); + const currentDatetime = new Date(); + this.provider.setDate(currentDatetime, true); // Trigger the jumpIntoDate! this.jumpIntoToday(); break; + } } } @@ -248,7 +250,8 @@ namespace Providers.OSUI.Datepicker.Flatpickr { * @memberof Providers.OSUI.DatePicker.Flatpickr.AbstractFlatpickr */ protected jumpIntoToday(): void { - this.provider.jumpToDate(this.provider.now); + const currentDatetime = new Date(); + this.provider.jumpToDate(currentDatetime, true); } /** diff --git a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/RangeDate/FlatpickrRangeDate.ts b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/RangeDate/FlatpickrRangeDate.ts index 766e2104de..f752e03efd 100644 --- a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/RangeDate/FlatpickrRangeDate.ts +++ b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/RangeDate/FlatpickrRangeDate.ts @@ -97,7 +97,6 @@ namespace Providers.OSUI.Datepicker.Flatpickr.RangeDate { */ protected todayBtnClick(event: MouseEvent): void { event.preventDefault(); - this.jumpIntoToday(); } diff --git a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/SingleDate/FlatpickrSingleDate.ts b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/SingleDate/FlatpickrSingleDate.ts index 507167d812..ca65271393 100644 --- a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/SingleDate/FlatpickrSingleDate.ts +++ b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/SingleDate/FlatpickrSingleDate.ts @@ -100,7 +100,8 @@ namespace Providers.OSUI.Datepicker.Flatpickr.SingleDate { protected todayBtnClick(event: MouseEvent): void { event.preventDefault(); // Set the currentDate at the Datepicker - this.provider.setDate(this.provider.now, true); + const currentDatetime = new Date(); + this.provider.setDate(currentDatetime, true); // Trigger the jumpIntoDate! this.jumpIntoToday(); } diff --git a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelectEnum.ts b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelectEnum.ts index 0591cfd084..6000decdd5 100644 --- a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelectEnum.ts +++ b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelectEnum.ts @@ -5,7 +5,7 @@ namespace Providers.OSUI.Dropdown.VirtualSelect.Enum { */ export enum ProviderInfo { Name = 'VirtualSelect', - Version = '1.1.2', + Version = '1.1.3', } /** diff --git a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/README.md b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/README.md index 0a83c86f7d..1935ca3716 100644 --- a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/README.md +++ b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/README.md @@ -1,3 +1,3 @@ -# VirtualSelect Β· ![virtualselect version](https://img.shields.io/badge/version-v1.1.2-informational) +# VirtualSelect Β· ![virtualselect version](https://img.shields.io/badge/version-v1.1.3-informational) All info about this Provider here. diff --git a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect.scss b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect.scss index 480aec551a..2cd1aa2e37 100644 --- a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect.scss +++ b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect.scss @@ -636,6 +636,10 @@ body { .vscomp-wrapper { z-index: var(--layer-global-off-canvas); } + + &:has(.osui-notification--is-open) .vscomp-wrapper { + z-index: var(--layer-global-instant-interaction); + } } } diff --git a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect_lib.scss b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect_lib.scss index fc9dbd6ac4..b15ace9b63 100644 --- a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect_lib.scss +++ b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/scss/_virtualselect_lib.scss @@ -1,5 +1,5 @@ /*! - * Virtual Select v1.1.2 + * Virtual Select v1.1.3 * https://sa-si-dev.github.io/virtual-select * Licensed under MIT (https://github.com/sa-si-dev/virtual-select/blob/master/LICENSE) */ diff --git a/src/scss/00-abstract/_functions.scss b/src/scss/00-abstract/_functions.scss index e69de29bb2..96a1c62c1e 100644 --- a/src/scss/00-abstract/_functions.scss +++ b/src/scss/00-abstract/_functions.scss @@ -0,0 +1,16 @@ +//// +/// @group Functions +/// Global Functions + +/// Returns the safe area value with fallback for both env() and CSS variable +/// @param {String} $side - The side (top, right, bottom, left) +/// @return {String} - The max() expression with env() and CSS variable fallback +@function safe-area($side) { + @return unquote('max(env(safe-area-inset-#{$side}), var(--safe-area-inset-#{$side}, 0px))'); +} + +/// Returns the safe area top value for specifically for Android devices. +/// @return {String} - The max() expression with current variable and new CSS variable +@function android-safe-area-top() { + @return unquote('max(var(--status-bar-height), var(--safe-area-inset-top, 0px))'); +} diff --git a/src/scss/01-foundations/_root.scss b/src/scss/01-foundations/_root.scss index a366783a19..ed531a36d6 100644 --- a/src/scss/01-foundations/_root.scss +++ b/src/scss/01-foundations/_root.scss @@ -82,14 +82,18 @@ --bottom-bar-size: #{$bottom-bar-size}; --footer-height: #{$footer-height}; - /*! Set the StatusBar variable that will be overwritten when it will be enable due to miss calculations! */ - --status-bar-height: 0px; - /*! iOS Safe Areas (Notch Support) */ - --os-safe-area-top: env(safe-area-inset-top); - --os-safe-area-right: env(safe-area-inset-right); - --os-safe-area-bottom: env(safe-area-inset-bottom); - --os-safe-area-left: env(safe-area-inset-left); + /*! Before MABS12, the insets were obtained via env(safe-area-inset-*) + for iOS, as for Android the values were reported incorrectly. + From MABS12 onwards, the native shell is injecting the CSS variables + "--safe-area-inset-*". + To ensure retro-compatibility, we use max() to get the highest value + between env() and the CSS variable. + */ + --os-safe-area-top: #{safe-area(top)}; + --os-safe-area-right: #{safe-area(right)}; + --os-safe-area-bottom: #{safe-area(bottom)}; + --os-safe-area-left: #{safe-area(left)}; /*! Layer System */ --layer-system-scale: 5; diff --git a/src/scss/02-layout/_header-layout-native.scss b/src/scss/02-layout/_header-layout-native.scss index 8bb35f30a8..bc3b0125b9 100644 --- a/src/scss/02-layout/_header-layout-native.scss +++ b/src/scss/02-layout/_header-layout-native.scss @@ -115,16 +115,14 @@ /// .android { - &[data-status-bar-height] { - .layout-native { - &.hide-header-on-scroll .header { - top: calc(-1 * (var(--header-size) + var(--status-bar-height))); - } + .layout-native { + &.hide-header-on-scroll .header { + top: calc(-1 * (var(--header-size) + #{android-safe-area-top()})); + } - .header, - .app-menu { - padding-top: var(--status-bar-height); - } + .header, + .app-menu { + padding-top: #{android-safe-area-top()}; } } } diff --git a/src/scss/02-layout/_login.scss b/src/scss/02-layout/_login.scss index 2c5f8f1d10..de045ff66f 100644 --- a/src/scss/02-layout/_login.scss +++ b/src/scss/02-layout/_login.scss @@ -59,8 +59,8 @@ // Responsive -------------------------------------------------------------------- /// -.android[data-status-bar-height] .layout-native .login-screen { - padding-top: var(--status-bar-height); +.android .layout-native .login-screen { + padding-top: #{android-safe-area-top()}; } /// diff --git a/src/scss/02-layout/_menu-layout-native.scss b/src/scss/02-layout/_menu-layout-native.scss index dabc3d93e1..87bacf838b 100644 --- a/src/scss/02-layout/_menu-layout-native.scss +++ b/src/scss/02-layout/_menu-layout-native.scss @@ -65,12 +65,12 @@ .tablet { .layout-native { .landscape { - &.android[data-status-bar-height] { + &.android { &.layout-side { &.aside-expandable { .app-menu-content { padding-top: calc( - var(--header-size) + var(--header-size-content) + var(--status-bar-height) + var(--header-size) + var(--header-size-content) + #{android-safe-area-top()} ); } } diff --git a/src/scss/02-layout/_menu.scss b/src/scss/02-layout/_menu.scss index 1e2d357c49..17971c0051 100644 --- a/src/scss/02-layout/_menu.scss +++ b/src/scss/02-layout/_menu.scss @@ -195,17 +195,16 @@ /// .android { - &[data-status-bar-height] { - &.portrait { - .app-menu-content { - padding-top: var(--status-bar-height); - } + &.portrait { + .app-menu-content { + padding-top: #{android-safe-area-top()}; } + } - &.landscape { - .app-menu-content { - padding-left: var(--status-bar-height); - } + &.landscape { + .app-menu-content { + padding-left: max(var(--os-safe-area-left), var(--safe-area-status-bar, 0px)); + padding-right: max(var(--os-safe-area-right), 0px); } } } diff --git a/src/scss/03-widgets/_feedback-message.scss b/src/scss/03-widgets/_feedback-message.scss index 890a1d43d1..ef028099ed 100644 --- a/src/scss/03-widgets/_feedback-message.scss +++ b/src/scss/03-widgets/_feedback-message.scss @@ -73,8 +73,8 @@ div.feedback-message-warning { } } -.android[data-status-bar-height] .feedback-message { - padding-top: calc(var(--status-bar-height) + var(--space-base)); +.android .feedback-message { + padding-top: calc(#{android-safe-area-top()} + var(--space-base)); } // IsRTL ------------------------------------------------------------------------- diff --git a/src/scss/04-patterns/01-adaptive/_master-detail.scss b/src/scss/04-patterns/01-adaptive/_master-detail.scss index d8e45c7267..063fc93205 100644 --- a/src/scss/04-patterns/01-adaptive/_master-detail.scss +++ b/src/scss/04-patterns/01-adaptive/_master-detail.scss @@ -166,10 +166,10 @@ } } - &.android[data-status-bar-height] { + &.android { .layout-native { .split-right { - padding-top: calc(var(--header-size) + var(--status-bar-height)); + padding-top: calc(var(--header-size) + #{android-safe-area-top()}); } } } @@ -183,11 +183,11 @@ } } -.android[data-status-bar-height] { +.android { .layout-native { .split-right-close { left: 16px; - top: calc(var(--status-bar-height) + 10px); + top: calc(#{android-safe-area-top()} + 10px); } } } diff --git a/src/scss/04-patterns/02-content/_section.scss b/src/scss/04-patterns/02-content/_section.scss index 2c62bf8498..73ba70c245 100644 --- a/src/scss/04-patterns/02-content/_section.scss +++ b/src/scss/04-patterns/02-content/_section.scss @@ -52,18 +52,18 @@ // Responsive -------------------------------------------------------------------- /// -.android[data-status-bar-height] { +.android { .section-group { &.is--sticky { .section-title { - top: calc(var(--section-top-position) + var(--status-bar-height)); + top: calc(var(--section-top-position) + #{android-safe-area-top()}); } } } } /// -.ios[data-status-bar-height] { +.ios { .section-group { &.is--sticky { .section-title { diff --git a/src/scss/04-patterns/03-interaction/_lightbox-image.scss b/src/scss/04-patterns/03-interaction/_lightbox-image.scss index e4c52c746c..74a80c1964 100644 --- a/src/scss/04-patterns/03-interaction/_lightbox-image.scss +++ b/src/scss/04-patterns/03-interaction/_lightbox-image.scss @@ -92,9 +92,9 @@ // Responsive -------------------------------------------------------------------- /// -.android[data-status-bar-height] { +.android { .pswp__top-bar { - top: var(--status-bar-height); + top: #{android-safe-area-top()}; } } diff --git a/src/scss/10-deprecated/_notification-deprecated.scss b/src/scss/10-deprecated/_notification-deprecated.scss index e33c036e53..bb69629237 100644 --- a/src/scss/10-deprecated/_notification-deprecated.scss +++ b/src/scss/10-deprecated/_notification-deprecated.scss @@ -98,10 +98,10 @@ } } -.android[data-status-bar-height] { +.android { .layout-native { .notification--visible { - margin-top: var(--status-bar-height); + margin-top: #{android-safe-area-top()}; } } } @@ -120,7 +120,7 @@ .layout-native { .notification--visible { - margin-top: var(--status-bar-height); + margin-top: #{android-safe-area-top()}; } } } diff --git a/src/scss/10-deprecated/_section-index-deprecated.scss b/src/scss/10-deprecated/_section-index-deprecated.scss index dfe92060f0..c0daa3760e 100644 --- a/src/scss/10-deprecated/_section-index-deprecated.scss +++ b/src/scss/10-deprecated/_section-index-deprecated.scss @@ -52,12 +52,12 @@ // Responsive --------------------------------------------------------------------------- /// -.android[data-status-bar-height] { +.android { .layout-native { .section-index { &.is--sticky { top: calc( - var(--header-size) + var(--header-size-content) + var(--top-position) + var(--status-bar-height) + var(--header-size) + var(--header-size-content) + var(--top-position) + #{android-safe-area-top()} ); } } diff --git a/src/scss/10-deprecated/_sidebar-deprecated.scss b/src/scss/10-deprecated/_sidebar-deprecated.scss index 82756c85e8..85c971d90b 100644 --- a/src/scss/10-deprecated/_sidebar-deprecated.scss +++ b/src/scss/10-deprecated/_sidebar-deprecated.scss @@ -67,10 +67,10 @@ } } -.android[data-status-bar-height] { +.android { .layout-native { .sidebar { - padding-top: var(--status-bar-height); + padding-top: #{android-safe-area-top()}; } } } diff --git a/src/scss/O11.OutSystemsUI.scss b/src/scss/O11.OutSystemsUI.scss index e2c050ef61..9e3989c5b6 100644 --- a/src/scss/O11.OutSystemsUI.scss +++ b/src/scss/O11.OutSystemsUI.scss @@ -17,7 +17,7 @@ PS: This comment block will not be visible in the compiled version! =============================================================================== */ /*! -OutSystems UI 2.25.0 β€’ O11 Platform +OutSystems UI 2.26.0 β€’ O11 Platform Website: β€’ https://www.outsystems.com/outsystems-ui GitHub: diff --git a/src/scss/ODC.OutSystemsUI.scss b/src/scss/ODC.OutSystemsUI.scss index f3fd2a63ea..e136030d1b 100644 --- a/src/scss/ODC.OutSystemsUI.scss +++ b/src/scss/ODC.OutSystemsUI.scss @@ -17,7 +17,7 @@ PS: This comment block will not be visible in the compiled version! =============================================================================== */ /*! -OutSystems UI 2.25.0 β€’ ODC Platform +OutSystems UI 2.26.0 β€’ ODC Platform Website: β€’ https://www.outsystems.com/outsystems-ui GitHub: