DOCSEARCHbyAlgolia
Submit Docs

Trendyol Baklava Design System

repository·next·Indexed 23 days ago

https://github.com/trendyol/baklava

A framework-agnostic design system by Trendyol providing consistent UI/UX through native web components. It can be used in Vue, React, Angular, or vanilla web projects via CDN or package installation. Baklava includes a default theme, a built-in dark theme, and support for custom theming via CSS variables. The system provides integration examples for Next.js App Router SSR and input masking libraries like Maskito and IMask.

Tokens
59K
Snippets
150
Records
383
Agent score
79%

What's inside Baklava

  2. Use the bl-popover component

    next

    The bl-popover component displays informative or interactive content in a floating container positioned relative to a target element.

    Key Behaviors:

    • Manual Trigger: Popovers do not open automatically. You must call the .show() method via JavaScript.
    • Singleton Behavior: Only one popover is visible at a time. Showing a new popover automatically closes others, unless they are nested.
    • Viewport Awareness: Popovers automatically flip positions (e.g., from bottom to top) to stay within the viewport.
    • Dismissal: Popovers close when the Escape key is pressed or when the user clicks outside the popover and its target.
    • Top Layer Rendering: Uses the native Popover API to render in the browser's top layer, preventing clipping by overflow: hidden or stacking context issues.

    Note: For non-interactive, text-only informative content, use the Tooltip component instead.

  4. Enable RTL support for bl-drawer

    next

    The bl-drawer supports Right-to-Left (RTL) text direction. When RTL mode is enabled, the drawer slides in from the left side instead of the right.

    To enable RTL, set the dir="rtl" attribute on a parent element or the <html> tag. This will affect the drawer's positioning and layout.

    <!-- RTL Example -->
<div dir="rtl">
  <bl-button onclick="document.getElementById('drawer-rtl').open = true">فتح القائمة</bl-button>
  <bl-drawer id="drawer-rtl" caption="الإعدادات">
    <div style="padding: 16px;">
      <h3>لوحة الإعدادات</h3>
      <p>هذا مثال لمحتوى القائمة في وضع RTL.</p>
    </div>
  </bl-drawer>
</div>

  5. How the `inline` variant works and its validation

    next

    The inline variant is designed specifically to be used within text content (e.g., inside a <p> tag).

    Validation: The component performs a runtime check. If an inline link is used without a text sibling in its parent element, a warning will be logged to the console: bl-link: Inline variant should be used within a text container. Example: <p>Text with <bl-link variant='inline'>a link</bl-link> inside.</p>

    <!-- ✅ Correct Usage -->
<p>
  This is a paragraph with an
  <bl-link href="/about" variant="inline">About Page</bl-link>
  link in the text.
</p>

<!-- ⚠️ Incorrect Usage (Triggers Warning) -->
<div>
  <bl-link href="/about" variant="inline">About Page</bl-link>
</div>

  6. How auto-expansion and character counting work in bl-textarea

    next

    The bl-textarea component provides two advanced interaction modes:

    Auto-expansion

    By setting the expand attribute to true, the textarea will automatically increase its height as the user enters text.

    • You can limit this growth by setting the max-row attribute.
    • When expand is active, the default manual vertical resizing behavior is disabled.

    Character Counting and Validation

    By setting character-count to true, an active character count becomes visible.

    • If maxlength is provided, the counter displays the current count relative to the limit (e.g., 10 / 100).
    • If the count exceeds maxlength, the textarea enters an invalid state, and the character counter will highlight this issue.
    • minlength validation is surfaced on the character count once the user loses focus for the first time.

  7. Stepper constraints and visual rules

    next

    When designing your stepper implementation, keep the following rules in mind:

    • Capacity: A maximum of 9 items can be included in a single stepper.
    • Visual States: Items support default, active, success, and error states.
    • Visual Types: The stepper can be rendered as dot, number, or icon.
    • Connecting Lines: Lines between completed steps are dark, while lines between incomplete steps are light.
    • Accessibility: The component includes a dedicated focus state for keyboard and assistive technology navigation.

  8. Handle indeterminate state in bl-checkbox

    next

    The indeterminate state is independent of the checked state.

    • Use Case: It is primarily used for parent/child selection patterns where a parent checkbox represents whether all children are selected.
    • Behavior: A checkbox can be both checked and indeterminate at the same time. However, a checkbox cannot be both checked and indeterminate unless it is in the indeterminate state initially; user interaction will typically resolve the state.
    • Note: The checked state changes are ignored by the component while the indeterminate state is active, unless a user interaction occurs.

  9. Enable Row Selection in bl-table

    next

    To allow users to select rows, add the selectable attribute to the <bl-table> component.

    • Single Selection: Use selectable without the multiple attribute.
    • Multiple Selection: Add the multiple attribute to allow selecting more than one row.
    • Handling Selection: Listen for the @bl-row-select event. The event's detail property contains the selected values (typically an array of selection keys).
    • Controlled Selection: Use the selected attribute (passed as a JSON string) to programmatically set or sync the currently selected rows.

  10. Understand Baklava core requirements

    next

    Baklava is a web component-based design system built using Lit and distributed as ECMAScript Modules (ESM). It relies on the following web standards:

    • Custom Elements API: For defining custom element behavior.
    • Shadow DOM: For encapsulated styles and layout.
    • HTML Templates: For defining reusable component templates.
    • JavaScript Runtime: Requires support for ES6 or later.

  11. Apply themes in a limited scope

    next

    Since Baklava themes use CSS variables, you can apply them to specific parts of your document rather than the entire :root. This is useful for creating sections with different color schemes or applying dark mode only to specific components like a header.

    Note: Setting a variable on a parent element affects all Baklava components inside it. To target only a specific component, apply the variable directly to that component's selector.

    <header class="dark-theme">
  <!-- Dark mode components -->
  <bl-button>Menu</bl-button>
</header>

<main>
  <!-- Light mode components -->
  <bl-button>Content</bl-button>
</main>

  12. RTL Support for bl-tooltip

    next

    The bl-tooltip component supports Right-to-Left (RTL) text direction. To enable RTL mode, set the dir="rtl" attribute on a parent element or the <html> tag. The tooltip will respect the directionality of its container.

    <div dir="rtl">
  <bl-tooltip placement="left">
    <bl-button slot="tooltip-trigger" icon="info">مساعدة</bl-button>
    انقر هنا لمزيد من المعلومات حول هذه الميزة
  </bl-tooltip>
</div>