Tremor • Changelog

???? Our main launch is right here: className publicity and full swap to Tailwind CSS

This main launch is step one in the direction of a production-ready model of Tremor. Over the previous few months, now we have rewritten the library to make it match for the longer term. We added the long-awaited publicity of className (#75) and assist for different HTML attributes, enabling you to overwrite or lengthen our root kinds with Tailwind CSS.

The enhancements on this launch resulted in eliminated properties (see migration information beneath). This additionally implies that Tailwind CSS has now turn into a prerequisite to utilizing Tremor at full capability (together with our Blocks).

• Should you use Tremor in an current venture take away the Tremor stylesheet import within the _app.js / _app.tsx file.

• `tailwind.config.js`: With this launch, you could add the trail to the Tremor package deal within the content material part in your Tailwind CSS configuration. Should you use Tremor in an current venture, take away the Tremor stylesheet import within the _app.js / _app.tsx file.

  Motion: Add ‘./node_modules/@tremor/**/*.{js,ts,jsx,tsx}’ in your `tailwind.config.js` content material part.

  Consideration: See Installation Guideline for extra.

• Breaking AreaChart, LineChart, BartChart, DonutChart: dataKey has been changed with index.

  Motion: Substitute <AreaChart dataKey=”date” /> with <AreaChart index=”date” />

• Breaking marginTop has been eliminated. To set margins with Tailwind CSS, use className as an alternative.

  Motion: Substitute marginTop=”mt-4″ with className=”mt-4″

• Breaking peak has been eliminated. To set peak with Tailwind CSS, use className as an alternative.

  Motion: Substitute peak=”h-72″ with className=”h-72″ or className=”h-[500px]”

• Breaking yAxisWidth prop has been modified to soak up a numeric pixel worth as an alternative of a Tailwind utility.

  Motion: Substitute yAxisWidth=”w-12″ with yAxisWidth= { 48 }

• Breaking maxWidth has been eliminated. To set a most width with Tailwind CSS, use className as an alternative.

  Motion: Substitute maxWidth=”max-w-md” with className=”max-w-md”

• Breaking spaceX has been eliminated. To set the area between objects, use className as an alternative.

  Motion: Substitute spaceX=”space-x-3″ with className=”space-x-3″

• Breaking truncate has been eliminated. To truncate textual content, use className as an alternative.

  Motion: Substitute truncate={ true } with className=”truncate”

• Breaking ColGrid: has been renamed to Grid

  Motion: Substitute <ColGrid></ColGrid> with <Grid></Grid>

• Breaking Monitoring: has been renamed to Tracker

  Motion: Substitute <Monitoring /> with <Tracker />

• Breaking Dropdown, SelectBox, MultiSelectBox, TabList, Toggle: The kind of the worth property has been modified to string .

  Motion: Solid the enter for worth to string

• Breaking Accordion, Card: shadow eliminated. Use className as an alternative. Be aware that we offer a shadow by default. To take away shadows altogether, use className=”shadow-none”

  Motion: Substitute <Card shadow={ true }></Card> with <Card className=”shadow”></Card>

• Breaking Badge, BadgeDelta, Callout, Button: textual content has been eliminated. Please use youngsters as an alternative. #81

  Motion: Substitute <Badge textual content=”Your Textual content” /> with <Badge>Your Textual content</Badge>

• Breaking Card: hFull has been eliminated. Use className as an alternative.

  Motion: Substitute <Card hFull={ true }></Card> with <Card className=”h-full”></Card>

• Breaking Desk, Metric: textAlignment has been eliminated. Use className as an alternative. #135, #295, #318

  Motion: Substitute <TableHeaderCell textAlignment=”text-left”></TableHeaderCell> with <TableHeaderCell className=”text-left”></TableHeaderCell>

• Breaking Grid: gapX and gapY has been eliminated. Use className as an alternative.

  Motion: Substitute <Grid gapX=”gap-x-6″></Grid> with <Grid className=”gap-x-6″></Grid>

• Breaking Block: This element has been eliminated. Use a `div` as an alternative.

  Motion: Substitute <Block truncate=”true”></Block> with <div className=”truncate”></div>

• Breaking Footer: This element has been eliminated. Use a `div` with a border as an alternative.

  Motion: Substitute <Footer peak=”h-20″></Footer> with <div className=”h-20 mt-6 pt-4 border-t border-slate-200″></div>