Skip to content
  • Benjamin Franzke's avatar
    [TASK] Streamline spinner web component size and animation · 1cfbf51a
    Benjamin Franzke authored
    This change performs the following optimizations:
    
    * Detach spinner from content flow using a relative+absolute
      position normalization, allowing an equivalent positioning
      to the regular backend icons.
      This is to ensure that both, <typo3-backend-spinner> and
      <typo3-backend-icon> render equally when used in inline(-block)
      containers (for example .svg-toolbar__drag-node).
      <typo3-backend-spinner> used to cause vertical alignment offsets,
      when the spinner was positioned in inline text-flow and therefore
      caused the vertical flow to cause offsets.
    
    * Add a variant="light|dark" attribute to select
      between the available TYPO3 spinner variants.
      By default the current color is now used.
    
    * Adapt sizing to inherit size from current font-size when used
      without a specific size attribute. Also apply that to the
      backend icon component to stay interchangeable.
    
    * Render spinner via SVG and only animate the spinning part
      instead of the entire shape. This is to avoid the bouncing-icon
      effect that CSS animations on the entire element cause
      (as often seen with font-awesome spinners for example).
    
    Releases: master
    Resolves: #94149
    Change-Id: I00d2e4915a0644726f78abe485fd9e276b539259
    Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/69162
    
    
    Tested-by: default avatarOliver Bartsch <bo@cedev.de>
    Tested-by: default avatarChristian Kuhn <lolli@schwarzbu.ch>
    Tested-by: default avatarcore-ci <typo3@b13.com>
    Tested-by: default avatarBenjamin Franzke <bfr@qbus.de>
    Reviewed-by: default avatarOliver Bartsch <bo@cedev.de>
    Reviewed-by: default avatarChristian Kuhn <lolli@schwarzbu.ch>
    Reviewed-by: default avatarBenjamin Franzke <bfr@qbus.de>
    1cfbf51a