Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#9721 - Remove tui-table classes from demo #10029

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

shiv9604
Copy link
Contributor

Fixes #9721

Changes Description:-

Migrated tui-form classes from the below pages.

  1. Dropdown Context > Context Menu Example
  2. Browser Support
  3. Filter Pipe Usage

@shiv9604 shiv9604 self-assigned this Dec 18, 2024
@shiv9604 shiv9604 requested a review from a team as a code owner December 18, 2024 20:02
@shiv9604 shiv9604 requested review from MarsiBarsi, waterplea, nsbarsukov, vladimirpotekhin and mdlufy and removed request for a team December 18, 2024 20:02
Copy link

lumberjack-bot bot commented Dec 18, 2024

Failed tests ❌

Before (main) ← Diff → After (local)

tests-kit-dropdown-context-624d8-ens-dropdown-on-right-click-chromium-retry2/01-dropdown-context.diff.png
tests-kit-dropdown-context-45008--nested-dropdown-is-clicked-chromium-retry2/04-dropdown-context.diff.png
tests-kit-dropdown-context-d7fb4-own-after-new-one-is-opened-chromium-retry2/02-dropdown-context.diff.png
tests-kit-dropdown-context-624d8-ens-dropdown-on-right-click-webkit-retry2/01-dropdown-context.diff.png
tests-kit-dropdown-context-45008--nested-dropdown-is-clicked-webkit-retry2/04-dropdown-context.diff.png
tests-kit-dropdown-context-d7fb4-own-after-new-one-is-opened-webkit-retry2/02-dropdown-context.diff.png

(updated for commit 72e9f45)

@shiv9604 shiv9604 changed the title Feature/9721 migrate tui table classes Feature/9721 migrate tui-table classes from demo Dec 18, 2024
Copy link

bundlemon bot commented Dec 18, 2024

BundleMon

Unchanged files (5)
Status Path Size Limits
demo/browser/main.(hash).js
304.3KB +10%
demo/browser/vendor.(hash).js
260.25KB +10%
demo/browser/runtime.(hash).js
43.96KB +10%
demo/browser/styles.(hash).css
20.07KB +10%
demo/browser/polyfills.(hash).js
11.18KB +10%

No change in files bundle size

Groups updated (1)
Status Path Size Limits
demo/browser/*..js
7.39MB (+3.5KB +0.05%) -

Final result: ✅

View report in BundleMon website ➡️


Current branch size history | Target branch size history

@shiv9604 shiv9604 changed the title Feature/9721 migrate tui-table classes from demo Feature/9721 Remove tui-table classes from demo Dec 18, 2024
Copy link
Contributor

github-actions bot commented Dec 18, 2024

Visit the preview URL for this PR (updated for commit 72e9f45):

https://taiga-previews-demo--pr10029-feature-9721-migrate-tui-inha1i6i.web.app

(expires Fri, 20 Dec 2024 07:17:37 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 73dddc3c665194f3e11f18c16aeb71af4c289c37

@shiv9604 shiv9604 changed the title Feature/9721 Remove tui-table classes from demo #9721 - Remove tui-table classes from demo Dec 18, 2024
Copy link

codecov bot commented Dec 18, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 66.13%. Comparing base (a9a856b) to head (72e9f45).

Additional details and impacted files
@@           Coverage Diff           @@
##             main   #10029   +/-   ##
=======================================
  Coverage   66.13%   66.13%           
=======================================
  Files        1215     1215           
  Lines       15720    15720           
  Branches     2310     2272   -38     
=======================================
  Hits        10397    10397           
- Misses       5085     5116   +31     
+ Partials      238      207   -31     
Flag Coverage Δ
summary 66.13% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Contributor

github-actions bot commented Dec 18, 2024

Playwright test results

failed  6 failed
passed  1882 passed
flaky  1 flaky
skipped  85 skipped

Details

report  Open report ↗︎
stats  1974 tests across 69 suites
duration  19 minutes, 54 seconds
commit  72e9f45

Failed tests

chromium › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › opens dropdown on right click
chromium › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › closes previous dropdown after new one is opened
chromium › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › does not close dropdown when nested dropdown is clicked
webkit › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › opens dropdown on right click
webkit › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › closes previous dropdown after new one is opened
webkit › tests/kit/dropdown-context/dropdown-context.pw.spec.ts › DropdownContext › does not close dropdown when nested dropdown is clicked

Flaky tests

webkit › tests/core/hint/hint.pw.spec.ts › TuiHint › false mode hint with delay

Skipped tests

webkit › tests/addon-commerce/input-card-group.pw.spec.ts › InputCardGroup › Examples › input card grouped with validation
webkit › tests/addon-commerce/input-card-group.pw.spec.ts › InputCardGroup › Examples › input card grouped with saved cards
webkit › tests/addon-commerce/input-card-group.pw.spec.ts › InputCardGroup › Examples › expired field should be clickable after reset of prefilled value
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › anchor links navigation works › scroll to "tui-doc-example"
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › anchor links navigation works › scroll to "tui-doc-code"
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › anchor links navigation works › scroll after click on link with anchor
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › getting started / [light mode]
webkit › tests/addon-doc/navigation.pw.spec.ts › Navigation › getting started / [dark mode]
webkit › tests/core/data-list/data-list.pw.spec.ts › DataList › Submenu
webkit › tests/core/data-list/data-list.pw.spec.ts › DataList › Form control
webkit › tests/core/data-list/data-list.pw.spec.ts › DataList › Complex
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 320x480 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 720x900 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1024x900 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Prompt
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Pristine form does not show confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Dirty form shows confirmation
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with confirmation works › Form is reset to pristine
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › A dialog and a nested dialog are open correctly
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Mobile dialog works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Dialog with directive works
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Show simple
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › 1620x1024 › Show simple + custom button
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 320x480
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 720x900
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 1024x900
webkit › tests/core/dialogs/dialogs.pw.spec.ts › Dialogs › Prompt - 1620x1024
webkit › tests/core/surface/surface.pw.spec.ts › Surface › Layers
webkit › tests/kit/carousel/carousel.pw.spec.ts › Carousel › should show next item after drag
webkit › tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts › DropdownHover › Examples › With DropdownMobile › Closes dropdown on click on overlay
webkit › tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts › DropdownHover › Examples › With DropdownMobile › Opens mobile version of dropdown on the 2nd time click
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › change selected range on click › click on the beginning of the track changes only nearest (left) slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › change selected range on click › click on the end of the track changes only nearest (right) slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › change selected range on click › click between two thumbs triggers only nearest thumb
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › pressing of Arrow Right increases by one step (after focus on right slider)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › pressing of Arrow Right increases by one step (after focus on left slider)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › pressing of Arrow Left decreases by one step (after setting right thumb active via click)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › cannot set left thumb more than right thumb (by Arrow Right)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › basic range (from 0 to 1000 with 250 steps). Initial value [0, 250] › cannot set right thumb less than left thumb (by ArrowLeft)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › ArrowUp increases value of the focused slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › ArrowDown decreases value of the focused slider
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › cannot set position of the LEFT slider MORE THAN position of the RIGHT slider (by ArrowUp)
webkit › tests/kit/range/range.pw.spec.ts › TuiRange › examples page › keyboard interactions › range with keySteps (from 0 to 1M) with 8 steps. Initial value [0, 100_000] › cannot set position of the RIGHT slider LESS THAN position of the LEFT slider (by ArrowDown)
webkit › tests/kit/slider/slider.pw.spec.ts › Slider › programmatically change value › ngModel › decrease value by 1 step
webkit › tests/kit/slider/slider.pw.spec.ts › Slider › programmatically change value › ngModel › increase value by 1 step
webkit › tests/kit/slider/slider.pw.spec.ts › Slider › programmatically change value › ngModel › increase value by 2 steps
webkit › tests/kit/tabs/tabs.pw.spec.ts › Tabs › Examples › complex › no extra margin after the last tab
webkit › tests/kit/tabs/tabs.pw.spec.ts › Tabs › Examples › complex › shows only a single dropdown for the nested item (with [tuiDropdown]) inside more section
webkit › tests/layout/navigation.pw.spec.ts › Navigation › Show settings in aside
webkit › tests/layout/navigation.pw.spec.ts › Navigation › Show hint in aside
webkit › tests/layout/navigation.pw.spec.ts › Navigation › A12y
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is visible when the input is focused
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is configured for s size
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is configured for m size
webkit › tests/legacy/input-time/input-time.pw.spec.ts › InputTime › API › items are passed › the dropdown is configured for l size
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=s
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=m
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › Multiselect inside dialog with different textfield sizes › multiselect inside dialog with tuiTextfieldSize=l
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › does not overflow arrow icon by many tags
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › multi-select with data list with label
webkit › tests/legacy/multi-select/multi-select.pw.spec.ts › MultiSelect › Examples › multi-select with data list without label

Copy link
Collaborator

@waterplea waterplea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! A few minor comments

@@ -2,12 +2,34 @@ import {NgForOf} from '@angular/common';
import {Component, inject} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
TuiTable,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TuiTable is enough, it's already a constant with all other standalone directives:
https://github.com/taiga-family/taiga-ui/blob/main/projects/addon-table/components/table/table.ts

Copy link
Contributor Author

@shiv9604 shiv9604 Dec 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh, I see! Thanks for informing me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved!

border-inline-end: none;
}

[tuiTd] {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's also remove border-block-start form [tuiTh] so it looks more like it used to.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, header border is appearing

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved!

}

td {
inline-size: 18.75rem;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it not under [tuiTd] above?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was existing code so I didn't touch that, Let me transform to attribute selector under [tuiTd].

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved!

imports: [TuiDemo],
imports: [
TuiDemo,
TuiTable,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved!

@@ -2,6 +2,14 @@ import {NgForOf} from '@angular/common';
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {
TuiTable,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved!

@shiv9604 shiv9604 force-pushed the feature/9721-migrate-tui-table-classes branch from 165a82c to 72e9f45 Compare December 19, 2024 07:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

Successfully merging this pull request may close these issues.

🐞 - Demo should not use any of "tui-" classes other than spacings
3 participants