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.

Sign up for GitHub

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

Jump to bottom

Optimize transition-default Tailwind util to not target all properties #8571

Closed
1 of 5 tasks
jcfranco opened this issue Jan 8, 2024 · 2 comments
Closed
1 of 5 tasks

Optimize transition-default Tailwind util to not target all properties #8571

jcfranco opened this issue Jan 8, 2024 · 2 comments
Assignees
@DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library refactor Issues tied to code that needs to be significantly reworked.
Milestone
2024-03-26 - Mar ...

Comments

@jcfranco
Copy link
Member

jcfranco commented Jan 8, 2024 •
edited
Loading

Description

Our current transition-default Tailwind utility applies transitions to all properties, leading to potential performance impact. We should revisit the util to target specific properties.

As a first step, we could look into targeting a reduced set of essential/common transition properties.

Proposed Advantages

Improved performance by having browser transition relevant, or common, CSS properties.

Which Component

All components using transition-default:

  • alert
  • checkbox
  • chip
  • date-picker-day
  • date-picker-month-header
  • inline-editable
  • input-message
  • input-number
  • input-text
  • input
  • link
  • modal
  • navigation-logo
  • navigation-user
  • notice
  • pagination
  • radio-button
  • rating
  • shell-panel
  • split-button
  • tab-title
  • tile-select
  • tree-item
  • x-button (functional component)

Relevant Info

List of all animatable CSS properties


See https://vallek.github.io/animatable-css/#anim

  1. Colors

    • color
    • background-color
    • border-color
    • outline-color
    • fill
    • stroke

  2. Dimensions

    • width
    • height
    • max-width
    • max-height
    • min-width
    • min-height

  3. Margins, Padding, and Borders

    • margin
    • margin-top
    • margin-right
    • margin-bottom
    • margin-left
    • padding
    • padding-top
    • padding-right
    • padding-bottom
    • padding-left
    • border-width
    • border-top-width
    • border-right-width
    • border-bottom-width
    • border-left-width
    • border-spacing

  4. Positioning

    • top
    • right
    • bottom
    • left
    • z-index

  5. Backgrounds

    • background-size
    • background-position

  6. Fonts and Text

    • font-size
    • font-weight
    • line-height
    • letter-spacing
    • text-indent
    • text-shadow
    • word-spacing

  7. Transforms

    • transform (includes transformations like translate, scale, rotate, skew)

  8. Opacity, Visibility, and Display

    • opacity
    • visibility

  9. Filters

    • filter (includes functions like blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate, sepia)

  10. Box and Text Shadows

    • box-shadow
    • text-shadow

  11. Outline

    • outline-width
    • outline-offset

  12. Clip Paths

    • clip-path

  13. Object Position

    • object-position

  14. Flexbox and Grid

    • flex-grow
    • flex-shrink
    • flex-basis
    • grid-template-columns
    • grid-template-rows
    • grid-gap
    • grid-row-gap
    • grid-column-gap

  15. Others

    • column-count
    • column-gap
    • column-width
    • perspective
    • perspective-origin
    • scroll-margin
    • scroll-padding

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components
@jcfranco jcfranco added refactor Issues tied to code that needs to be significantly reworked. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jan 8, 2024
@github-actions github-actions bot added the calcite-components Issues specific to the @esri/calcite-components package. label Jan 8, 2024
@jcfranco jcfranco mentioned this issue Feb 21, 2024
Merged
@jcfranco jcfranco mentioned this issue Feb 28, 2024
Closed
6 tasks
jcfranco added a commit that referenced this issue Feb 29, 2024
@jcfranco
perf: update transition-default Tailwind util to only target common…
f4d016b 
…, animatable properties (#8797)

**Related Issue:** #8571 

## Summary

This updates the `transition-default` to explicitly list common,
animatable properties to the following:

* `background-color`
* `block-size`
* `border-color`
* `box-shadow`
* `color`
* `inset-block-end`
* `inset-block-start`
* `inset-inline-end`
* `inset-inline-start`
* `inset-size`
* `opacity`
* `outline-color`
* `transform`

This should improve rendering performance by omitting other props that
are unintentionally being animated (see
https://vallek.github.io/animatable-css/#anim).
@jcfranco jcfranco added this to the 2024-03-26 - Mar Release milestone Feb 29, 2024
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Feb 29, 2024
@jcfranco jcfranco self-assigned this Feb 29, 2024
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Feb 29, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned jcfranco Feb 29, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@jcfranco jcfranco added p - medium Issue is non core or affecting less that 60% of people using the library estimate - 3 A day or two of work, likely requires updates to tests. and removed needs triage Planning workflow - pending design/dev review. labels Feb 29, 2024
@geospatialem geospatialem removed their assignment Mar 6, 2024
@DitwanP
Copy link
Contributor

DitwanP commented Mar 8, 2024

🍡 Verified

@DitwanP DitwanP closed this as completed Mar 8, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Mar 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library refactor Issues tied to code that needs to be significantly reworked.
Projects
None yet
Milestone
2024-03-26 - Mar Release
Development

No branches or pull requests
3 participants
@jcfranco @geospatialem @DitwanP