Skip to content

@ultraviolet/[email protected]

Latest
Latest

Choose a tag to compare

View all tags
@scaleway-bot scaleway-bot released this 26 Nov 09:03
· 31 commits to main since this release
@ultraviolet/[email protected]
b0d5086
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Major Changes

  • #5816 37ce3eb Thanks @lisalupi! - ! BREAKING CHANGES !
    In order to start using the new style, you will need to import new <ThemeProvider /> and import new CSS generated at build time:

    import { ThemeProvider } from "@emotion/react";
import {
  consoleLightTheme,
  ThemeProvider as ThemeProviderUV,
} from "@ultraviolet/themes";

import "@ultraviolet/ui/styles"; // Generated CSS used by components

export const App = (children) => {
  <ThemeProvider theme={consoleLightTheme}>
    <ThemeProviderUV>{children}</ThemeProviderUV>
  </ThemeProvider>;
};

  • #5816 37ce3eb Thanks @lisalupi! - ! POTENTIAL BREAKING CHANGES !
    Fixed the maxLength prop on TagList. This prop was previously implemented incorrectly and would only reduce the threshold by one when the total length exceeded maxLength.
    This change might affect the number of visible tags, particularly if you have many long tags (the default maxLength is set to 600 characters) or if you have specified a custom maxLength.

  • #5819 48cc201 Thanks @lisalupi! - Refactor all components to use vanilla-extract instead of Emotion

  • #5816 37ce3eb Thanks @lisalupi! - BREAKING CHANGE Remove all emotion animation, replace with vanilla-extract animation by default.

    import { fadeIn } from "@ultraviolet/ui"; // vanilla-extract animation

    To use animation in another context, add Default at the end of the animation name:

    import { fadeInDefault } from "@ultraviolet/ui";

    This returns a string that can be used in many different places.

    1. Emotion: create the keyframe then use it:
    import { fadeInDefault } from "@ultraviolet/ui";
import { keyframes } from "@emotion/react";

const fadeInEmotion = keyframes`${fadeInDefault}`;
const StyledDiv = styled.div`
  animation: ${fadeInEmotion} 1s ease infinite;
`;
    1. Vanilla CSS: simply add the name of the animation you want to use as a className.
    const MyComponent = () => <div className="fadeIn">Hello World!</div>;

    To customize the animation, you must overrule the default settings:

    const MyComponent = () => (
  <div className="fadeIn" style={{ animationDuration: "300ms" }}>
    Hello World!
  </div>
);

  • #5816 37ce3eb Thanks @lisalupi! - - Remove Emotion

    • Removed Breakpoint: use directly up and down

  • #5816 37ce3eb Thanks @lisalupi! - - Bullet: BREAKING CHANGE "disabled" is now a prop instead of a value of prop "sentiment"

  • #5816 37ce3eb Thanks @lisalupi! - Theme provider has been moved to @ultraviolet/themes package. @ultraviolet/ui imports it internally and export ThemeProvider and useTheme hook for convenience.

Minor Changes

Patch Changes

Assets 2
Loading