DOCSEARCHbyAlgolia
Submit Docs

Warp Design System

website·Indexed 29 days ago

https://warp-ds.github.io/css-docs/

A comprehensive design system providing UI components and CSS utilities across multiple platforms, including React, Vue, Android, and Web Elements. It features a wide array of components such as Buttons, Text Fields, Tabs, and Checkboxes, alongside a dedicated icon library and CSS utility classes for layout, interactivity, and animation.

Tokens
75.1K
Snippets
547
Records
627
Agent score
74%

What's inside Warp

  1. Overview of the Combobox component

    A Combobox is a combination of a text input and a list of suggestions. Unlike a select menu, the user is not strictly limited to the provided list; they can enter custom values, although the application can be configured to validate that the final value comes from the list.

  4. Configure TextArea visual options

    Use the optional prop to indicate the field is not required, and the placeholder prop to provide a hint about the expected format. Note: Placeholders should not replace visible labels.
    // Mark as optional
<TextArea label="Description" optional />

// Add a placeholder hint
<TextArea label="Description" placeholder="Lorem ipsum dolor sit amet" />

  5. Handle TextArea validation and help text

    To indicate a validation error, set the invalid prop to true. This is typically paired with the helpText prop to provide the user with specific feedback about the error.
    <TextArea 
  label="Description" 
  invalid 
  helpText="Maximum 200 characters" 
/>

  6. Use WarpElement to prevent FOUC and FOUT in custom elements

    To avoid Flash of Unstyled Content (FOUC) and Flash of Unstyled Text (FOUT), custom elements should extend the WarpElement base class. WarpElement extends PodiumElement (which extends LitElement) and automatically handles style application based on the environment: on the server, it uses CSS @import statements; on the client, it uses top-level await to fetch CSS files and create CSSStyleSheet objects before rendering.

  7. Understand how UnoCSS generates atomic CSS

    UnoCSS is an atomic CSS engine that dynamically generates utility classes by scanning HTML and template files for used class names. Unlike traditional frameworks that provide a large set of predefined classes, UnoCSS generates only the specific CSS rules required by the project on-the-fly. This results in a minimal final CSS bundle size, faster load times, and improved web application performance.

  9. Warp Web updates for React, Vue, and Elements

    Recent updates to the Warp web libraries include:

    • TypeScript Support: Now available across packages.
    • Internationalization (i18n): All icons for React, Vue, and Elements now support i18n.
    • Elements Improvements: Added individual imports for elements icons, a fix for Server-Side Rendering (SSR), and improved icon sizing.
    • Accessibility: Implemented various a11y improvements across components based on accessibility team feedback.
    • Eik Support: Now available for React, Vue, and Elements.

  10. Apply core principles for data visualization

    When creating visualizations for customer-facing products, adhere to these four high-level principles:

    1. Answer real questions: Avoid visualizing data for the sake of it; ensure the information is useful and actionable.
    2. Present data honestly: Maintain transparency and truthfulness to build user trust.
    3. Prioritize clarity over aesthetics: The primary goal is to create insight; beauty is a secondary bonus.
    4. Ensure accessibility: Provide information in multiple ways so all users can benefit.

  11. Fetch and search Combobox options asynchronously

    When implementing client-side search or fetching options from an API, use the disableStaticFiltering prop to prevent the component from filtering the options list automatically. The developer is responsible for managing the search term state, performing the API call/filtering, and rendering the resulting options list.
    function Example() {
  const [value, setValue] = React.useState('');
  // Assume useDebouncedSearch handles API calls to return an array of { value: string }
  const characters = useDebouncedSearch(value, 300);

  return (
    <Combobox
      label="Star Wars character"
      disableStaticFiltering
      matchTextSegments
      openOnFocus
      value={value}
      onChange={(val) => setValue(val)}
      onSelect={(val) => setValue(val)}
      options={characters}
    />
  );
}

  12. Remove a border style

    Use the border-none utility to remove an existing border style from an element. This is frequently used to override styles applied at smaller breakpoints.
    <div class="border-4 border-none">01</div>