Changelog

Latest changes for Webcore

Source ↗️ Report Issue ↗️

Here you can find a summary for all of our changes made for Webcore in chronological order.

v0.9.0

Introducing Astro 5.0 update with four new components: BottomNavigation, Copy, Flex, and Grid, two new blocks called DeviceMockup and GridWithIcons, along with several other improvements!
What’s new?
- ✨ Added BottomNavigation component c129bcb
- ✨ Added Copy component d2b91ef Click to copy
- ✨ Added Flex component 6db7706, f35250b, aac5d1e
- ✨ Added Grid component 75acad4
- ✨ Added DeviceMockup block 89a8d81
- ✨ Added GridWithIcons block 956e8a1
- 💄 Added responsive utility classes 8f75064
- 🏷️ Additional component types now available for import c746064
Use the BottomNavigation component to provide quick access to primary navigation items
```
    <BottomNavigation
        items={[{ name: 'Home', icon: 'home', href: '#' }, { ... }, { ... }]}
        separated={true}
        floating={true}
    />
```
- Home
- Components
- GitHub
You can now import the following types:
```
import {
    DataTableEventType,
    HeadingObject,
    ListEventType,
    PaginationEventType,
    SelectEventType
} from 'webcoreui/astro' // Also available from webcoreui/svelte and webcoreui/react
```
What has changed?
- ⬆️ Updated Astro and Svelte to 5.0 ed15e0a, 1f101e1
- ✨ Select components can now infer their value from their itemGroups prop f0b57f3
- ✨ Added HTML support for input labels b71f2e3, 78a6b0a
- ✨ Added two-day data binding for Svelte Input components 78a6b0a
- ✨ Added ability to pass data attributes to input elements d35c82b
- 💄 Improved default styles of cards and muted text ac7cb7f
- 💄 Improved Skeleton responsiveness 59ea089
- ♿️ Improved accessibility of Select and Popover 4e64b50
- 🐛 Fixed Svelte badges always rendering as button elements 1754ccb
- 🐛 Fixed icon size shrinking for Accordion with multiline text 13abb69
- 🐛 Fixed type error when using get with a single parameter 8e94c6b
We also updated our dependency to Astro 5.x, meaning you can safely remove the following config from your codebase in case they’re present:
You can remove the following config from astro.config.mjs
```
export default defineConfig({
    vite: {
        ssr: {
            noExternal: ['webcoreui']
        }
       css: {
           preprocessorOptions: {
               scss: {
                   api: 'modern-compiler'
               }
           }
       }
    },
   experimental: {
       directRenderScript: true // Enabled by default in Astro 5.x
   }
})
```
See changes
v0.8.1

Introducing two new components: Skeleton and Ribbon! We also updated Sass to the latest version which includes some breaking changes. Please read the “What has changed” section below to see the migration guide.
What’s new?
- ✨ Added Skeleton component 58cbd4f:
- ✨ Added Ribbon component 447118c
What has changed?
- 🐛 Fixed React warning with Table component b2d8aca
- 🐛 Fixed TypeScript warnings for ConditionalWrapper when extra props are used b415d12
- 🐛 Fixed a bug where icons on Button components prevented click events b415d12
- ⬆️ Updated Sass to latest version (v1.77 -> v1.80) 516d2ad
Breaking change: We updated Sass to the latest version, which means we no longer support the legacy @import rule. Please make the following changes in your Webcore project.
1. Update your Sass version in your package.json
```
"sass": "1.77.5",
"sass": "1.80.7",
```
2. Update your CSS configs to use the new @use rule
```
@import 'webcoreui/styles';
@import 'webcoreui/config';

@use 'webcoreui/styles' as *;
@use 'webcoreui/config' as *;
```
3. Update your astro.config.mjs file with the following settings
```
export default defineConfig({
    vite: {
        ssr: {
            noExternal: ['webcoreui']
        }
        css: {
            preprocessorOptions: {
                scss: {
                    api: 'modern-compiler'
                }
            }
        }
    }
})
```
See changes
v0.7.0

Introducing 5 new components, bringing the total number of Astro, Svelte, and React components to over 40! We also made some improvements to our Accordion component, and updated Astro to the latest version (v4.15 -> v4.16), without any breaking changes.
What’s new?
- ✨ Added Stepper component 4c98734, 06bd895
- ✨ Added Kbd component 2e75831: ⌘⇧K
- ✨ Added Banner component b6cc705
- ✨ Added AspectRatio component e42ec8c, 5cb1648
- ✨ Added Spoiler component d698776, 5cb1648: Click to reveal the text behind
Use the Stepper component to guide users through a series of steps
```
<Stepper items={[ { title: 'Setup' }, { title: 'Configure' } ... ]} />
```
1. SetupGet ready
2. ConfigurePreferences
3. 3
  FinishFinal steps
What has changed?
- ✨ Improve customizability of Accordion component 4ddf4ff
- ⬆️ Updated Astro to latest version (v4.15 -> v4.16)
See changes
v0.6.1

In this small release, we added multiple items per slide support for the Carousel component, added two new DOM utility function (get and on), and improved types and CSS utility classes:
- ✨ Added multiple items per slide support for Carousel a12f0bc
- ✨ Added DOM utility functions for Astro 4739898
- 🏷️ Updated types and CSS utilities d9f08a5, 4d960fd
You can now use the following utility functions in Astro
```
import { get, on } from 'webcoreui'

const element = get('.selector')        // Get a single DOM element
const element = get('.selectors', true) // Get all DOM elements with the selector

// Adding event listener
on('button', 'click', () => console.log('Button clicked.'))
```
See changes
v0.6.0

Introducing 4 new components, along with more customization options for existing components, including an option to turn any element into a modal!
What’s new?
- ✨ Added Breadcrumb component 3b23622
- ✨ Added Masonry component a677653, 3aa028c
- ✨ Added Sidebar component 495ce1e, 49d8ef4
- ✨ Added Footer component acf1121
- ✨ Added transparent modal for opening custom components 45a573b
- ✨ Added small and rounded badges 4638ed1, 1fdef66 rounded small small rounded
- 🏷️ Improved types 2cee766, 3b1b54b, f7c2c0f, d7ccb77
- 🏷️ Export component prop types 24aebdb
Breadcrumb component example:
- Home
- Docs
- Components
What has changed?
- 🧑‍💻 Unify Menu link url naming with Footer component f9e98e7
If you’re using menus, please rename the url property to href:
```
<Menu items={[{ name: 'Home', url: '/' }]} />
<Menu items={[{ name: 'Home', href: '/' }]} />
```
See changes
v0.5.0

Introducing 3 new components: Pagination, DataTable, and Carousel, along with several bug fixes!
What’s new?
- ✨ Added Pagination component 13cf23c, 60eeddd, a837f8b
- ✨ Added DataTable component 5ca8180, bd84616, ec044f1, 0e79854
- ✨ Added Carousel component c40747b, f2cb11d, c3e491f, a3cc89e
- ✨ Added table for CSS resets ff69141
- ✨ Allow Select components to keep their original values e40bb35
- ⚡️ Remove resize observer from Select components on unmount 755be14
- 💄 Add option to target Avatar groups with CSS classes d990a55
Disable automatic value update to use Select as command list or combobox
```
<Select
    value="Take an action"
    itemGroups={[ ... ]}
    updateValue={false}
/>
```
What has changed?
- 💄 Reduce <code> tags paddings e807579
- 🐛 Fixed labeled inputs not taking up the full width of their containers cdefdec
- 🐛 Fixed pagination buttons not disabled when prop set 5712336
- 🐛 Fixed errors when multiple paginate listen events are present on the same page 5712336
- 🐛 Fixed List subText alignment for links without icons 0e9b6a3
See changes
v0.4.0

Introducing 3 new components, including a highly customizable Select input! With this release, Webcore now has over 30 fully coded components for Astro, Svelte, and React!
What’s new?
- ✨ Added Select component 7c84dcb
- ✨ Added List component 4f5b3c3
- ✨ Added Group component 2e7cc32, cc2b9bd
- ✨ Added ability to select card body through props dc94487
- ✨ Added ability to disable animations 94b84e5, 3be1540
- ✨ Added onInput support for Input components 7d7a6e2
webcore.config.scss
```
// Set the following in your CSS configuration file if you need to completely disable animations
$disableAnimations: true
```
What has changed?
- 🏷️ Improved types for existing components
- ✨ Improved Modal API 5ec3df6. See the updated documentation for more info.
- 🐛 Fixed resize issues with elements when placed inside .grid 1923fd5
- 🐛 Prevent Popover to take up visible space when toggled off 79014e1
For Modals, you can now pass a configuration to your modal utility function to specify the trigger element using the trigger property:
```
button.addEventListener('click', () => modal('#my-modal'))

modal({
    trigger: '#my-button',
    modal: '#my-modal'
})
```
In Svelte and React, you can keep on passing the selector of the modal only, instead of using a configuration object:
```
<Button onClick={() => modal('#my-modal')}>Open Modal</Button>
```
See changes
v0.3.0

Introducing 4 new component, including Popover (with 12 different possible positions), Sheet (with all 4 positions), Collapsible and Textarea!
What’s new?
✨ Added Popover component 8bc0ac3, 63ce582
✨ Added Sheet component 2a5e7eb
✨ Added Collapsible component 484d1e2
✨ Added Textarea component 6e02930
✨ Added debounce utility function 63ce582
🏷️ Added types for utilities 25fca4f
Collapse changes
What has changed?
- 🐛 Fixed distorted avatar images when the aspect ratio is not 1:1 fd98d8c
- 🐛 Fixed custom icon showing up in the wrong place for Svelte Toast component 45c945c
See changes
v0.2.0

Introducing sliders and modals! With this release, we also made several improvements to our existing components.
What’s new?
- ✨ Added Slider component 39f9bf8, 98e95e7
- ✨ Added Modal component 633d4f7, c9f8f1f
- ✨ Added utility classes for flexbox 9143a5c
- ✨ Added interpolate utility functions
Use the Slider component to adjust values within a specified range
```
<Slider value={30} />
```
What has changed?
- ✨ Added support for scrollable tables e93f276
- ✨ Added additional theme example 7de1a37
- ✨ Made Rating component accept decimal numbers e6b8beb
- ✨ Accept active state for menu items 58c00e2
- ♿️ Improved components accessibility e72a8ed
- 💄 Match default font size with browser defaults 6658c96
- 💄 Adjust alert alignments 77c088f
- 🐛 Fixed React types for TimelineItem 64d9d3d
- 🐛 Fixed tooltip and timeline alignment issues 6a386ef
The includeHelperClasses CSS configuration option has been renamed to includeUtilities, and we added additional CSS utility classes for flexbox. Please check the layout documentation for more information on how to use these.
If you don't want utility classes enabled, replace the rule
```
@include setup((
   includeHelperClasses: false
   includeUtilities: false
));
```
See changes
v0.1.0

With this release, we reached a milestone for Webcore! Moving forward, we’ll use minor versioning until we reach a stable v1.0, after which we continue version updates using semantic versioning.
What’s new?
- ✨ Added support for CSS customization 84cd405
- ✨ Added base CSS mixins
Breaking change: Moving forward, you’ll need to add a webcore.config.scss file at the root of your project directory.

This will add the ability to better customize the CSS of Webcore. See our CSS configuration docs for more info on how to customize your CSS. You can now also use our custom mixins to stay in line with Webcore’s theme when building your own custom components.
What has changed?
- 💄 The includeElementStyles option has been removed from the setup mixin, and instead, element styles are added using the includeResets option.
If you don't want element styles enabled, replace the rule with includeResets
```
@include setup((
   includeElementStyles: false
   includeResets: false
));
```
v0.0.12

Introducing themes along with a custom ThemeSwitcher component! As part of this release, we also made smaller bug fixes, improved our component’s accessibility, and introduced CSS modules for proper scoping.
What’s new?
- ✨ Added ThemeSwitcher component dbf4eb6
- ✨ Added Menu component 8a60322
- ✨ Added themes 499dbd4
- ✨ Added styles for scrollbar 1b6fc71
- ✨ Icons are now importable as strings 98a35b8
- 💄 Added new CSS utility classes
You can now import SVG icons as strings from webcoreui/icons
```
import { info } from 'webcoreui/icons'
```
What has changed?
- ✨ Improved components usability, simplified logic, and fixed visual bugs 1c05443
  - The Badge, Button, and Checkbox components can now accept custom classes through the classNames prop.
- 🏷️ Made Svelte component types importable 347800b
- ♿️ Improved accessibility of components b826d00
- 🐛 Fixed improper imports causing errors when using the Input component df2a7b8
- 🐛 Fixed a bug with the Rating component when scores are not set
- 🐛 Fixed a tooltip bug where content overlaps with other elements on the page
- 💄 Introduced CSS modules to prevent style collisions 02a9199
The fill prop has been removed from the Input component. To achieve the same style, set the theme prop to fill instead:

The boxed prop of the Checkbox component has also been removed. Instead, wrap your checkbox into a Card component if you’d like to achieve the same visuals:

Checkbox with label
And boxed using the Card component.

See changes
v0.0.11

Introducing tables and inputs! With this release, Webcore now comes with a total of 20 components for Astro, Svelte, and React that you can use in your projects!
- ✨ Added Table components dad3a34
- ✨ Added Input component 1701337
See changes
v0.0.10

Introducing our biggest release yet! This release includes 6 new components and many improvements to type definitions, usability, and bug fixes!
What’s new?
- ✨ Added Progress component 1ff8653
- ✨ Added Timeline component f2a146e
- ✨ Added Toast component fec229d, 1d3eaaf, 9f116fd
- ✨ Added Tooltip component cb0ca27. Hover me to see example.
- ✨ Added Spinner component 31f334e
- ✨ Added Tabs component dc0d1dd, a269841, f55bf83
Use the Progress component to represent the completion status of a task or process
```
<Progress value={30} />
```
What has changed?
- ✨ Allow Badge component to accept HTML attributes e52c1f9
- 🏷️ Make React type definitions importable 6505075
- 🏷️ Fixed type errors for React callback function arguments 689d430
- 🐛 Fixed React component bugs dcd1645
We’ll soon move forward with minor version updates once all core components are in place and our Sass configuration reaches a more stable state.
See changes
v0.0.9

Introduction the following 5 new components to Webcore!
What’s new?
- ✨ Added Avatar component f34899d, 56cd716
- ✨ Added Checkbox component 03f4fa7, f4d4f47
- ✨ Added Radio component 8661cab
- ✨ Added Rating component d9a8138, cdaf9ed ★★★★★
- ✨ Added Switch component a56fb4e, 957534a
See changes
v0.0.8
- 💄 Improvements to CSS scoping
v0.0.7
- ✨ Added Alert and ConditionalWrapper components 6c16a19
- ✨ Added Badge component 6fe0780
- ✨ Added Svelte + React card components 1098d75
What has changed?
- ✨ Added types to Icons component and improved its usability 92c7be0
- 💄 Scoped Accordion CSS 47d5086
Introducing additional core components to Webcore
Alert for displaying important message, Badge for labels and status indicators, and ConditionalWrapper for improved code quality. This block was created using an info Alert.

We also introduced Svelte and React variants for the Card component, added TypeScript types for our Icon component, and removed dynamic imports to prevent flashes on page load + made improvements to scope CSS.
See changes
v0.0.6
- ✨ Added Icon component 74aaf8a
v0.0.5
- ✨ Added README.md for short documentation
- ✨ Added Svelte + React Accordion components 39019a0
What has changed?
- 💄 Improved Accordion usability 4b0be79
- 💄 includeFonts removed in favor of fontRegular and fontBold configuration rules c710311
Remove includeFonts and replace with fontRegular and fontBold
```
@include setup((
   includeFonts: true
    // Define paths for your fonts
   fontRegular: '/fonts/Inter-Regular.woff2',
   fontBold: '/fonts/Inter-Bold.woff2'
));
```
This release includes minor changes to the existing components to improve usability, with improvements to the way CSS works in Webcore that aims to improve developer experience and configurability.
v0.0.3

Introducing our first public release of Webcore, including the following core components and changes:
- ✨ Added Accordion component
- ✨ Added Button component
- ✨ Added Card component for Astro
- 💄 Initial setup for CSS configuration, including the addition of Transition and Media mixins.
- 💄 Introduced the following SCSS configuration options:
  - includeResets: Configuration rule to include CSS resets.
  - includeFonts: Configuration rule to include font-specific rules.
  - includeHelperClasses: Configuration rule to include utility classes.
See changes

<- Utilities Astro ->

Request improvement for this page

Changelog

v0.9.0

v0.8.1

v0.7.0

v0.6.1

v0.6.0

v0.5.0

v0.4.0

v0.3.0

v0.2.0

v0.1.0

v0.0.12

v0.0.11

v0.0.10

v0.0.9

v0.0.8

v0.0.7

v0.0.6

v0.0.5

v0.0.3