javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(item-sliding): remove unused CSS from item options (#28367)

Browse Source 
Issue number: Internal

---------

## What is the current behavior?
Item sliding has some unused CSS and no tests for safe area padding
based on the direction.

This CSS is not used:
feda7a0e96/core/src/components/item-option/item-option.scss (L20-L30)

The rendered markup for a sliding item looks like the following:

```html
<ion-item-sliding>
  <ion-item-options side="start">
    <ion-item-option>
      Archive
    </ion-item-option>
  </ion-item-options>

  <ion-item class="in-list">
    <ion-label>
      Sliding Item
    </ion-label>
  </ion-item>
</ion-item-sliding>
```

Since `ion-item-options` never gets the `in-list` class added to it, and
`ion-item` never contains options, the above CSS is never used.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removed the CSS that is not used, the correct CSS for safe area
padding has already been added here:
feda7a0e96/core/src/components/item-options/item-options.scss (L57-L67)
- Added screenshot tests to verify the safe area padding is applied to
the proper side

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

I could add additional tests that make sure there is not padding added
when opening the opposite side on each direction but since this problem
was happening when changing from `ltr` to `rtl` I did not.

[FW-5174]:
https://ionic-cloud.atlassian.net/browse/FW-5174?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
Brandy Carney
2023-10-18 12:01:31 -04:00
committed by GitHub
parent 0188289e96
commit 416bb736a1
26 changed files with 91 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/item-option/item-option.scss
View File

@ -17,18 +17,6 @@
font-family: $font-family-base;
}
:host(.in-list.item-options-end:last-child) {
@include padding-horizontal(
null, calc(.7em + var(--ion-safe-area-right))
);
}
:host(.in-list.item-options-start:first-child) {
@include padding-horizontal(
calc(.7em + var(--ion-safe-area-left)), null
);
}
:host(.ion-color) {
background: current-color(base);
color: current-color(contrast);