Icon sizes and CircledIcon xl size #656

mattias800 · 2023-11-02T16:17:06Z

Introduce the concept of icon sizes.
There are two sizes for now, medium and xl.
SVG:s ending with "xl" will be size xl. Everything else is medium.
Components can now use types MediumIcon and XlIcon to require the correct icon size.
CircledIcon is the first to use this, for its new size variant xl.
Components that use CircledIcon have been updated with prop icon: MediumIcon instead of IconDefinition.
Add new lighthouse-xl icon.

Version

Published prerelease version: v19.0.0-next.47

Changelog

💥 Breaking Change

@stenajs-webui/core, @stenajs-webui/elements, @stenajs-webui/panels
- Some redesign fixes #604 (@mattias800)

🐛 Bug Fix

Add prerelease step for next branch #602 (@lindskogen)
@stenajs-webui/elements, @stenajs-webui/panels
- Icon sizes and CircledIcon xl size #656 (@mattias800)
- Add rail menu focus outline #658 (@mattias800)
- Styling NavBarUserButton #626 (@lindskogen)
- Redesign Collapsible #620 (@mattias800)
@stenajs-webui/elements
- Switch focus outline colors for buttons #657 (@lindskogen)
- Update button icon sizes and visual center #652 (@mattias800)
- Arrow icon fix #648 (@mattias800)
- Update svg icon script to flatten transforms #649 (@lindskogen)
- Some more icons #646 (@mattias800)
- Redesign tags #643 (@mattias800)
- More icons #640 (@mattias800)
- New icon: running person #639 (@mattias800)
- Redesign result list padding #637 (@mattias800)
- Remove duplicated icon and rename inprogress to in-progress #633 (@lindskogen)
- Add passenger type icons #632 (@mattias800)
- Vehicle type icons #631 (@mattias800)
- Add icon categories support #630 (@AugustasFriend @mattias800)
- Redesign chip #629 (@mattias800)
- Restore menu button cursor pointer #627 (@lindskogen)
- Add new icons and redesign some other ones #625 (@AugustasFriend)
- Add new stena line slash icon #610 (@AugustasFriend)
- Add new modified icons #607 (@AugustasFriend @mattias800)
- Prevent ButtonGroup to grow more than its content #608 (@esepato)
- Add two new icons #605 (@AugustasFriend)
- New CircledIcon component #599 (@mattias800)
- Brand redesign banner #596 (@mattias800)
- Add download pdf icon #592 (@AugustasFriend)
- Add new stena icons #590 (@AugustasFriend)
@stenajs-webui/forms, @stenajs-webui/panels, @stenajs-webui/theme
- Color fix for snackskal and TextInputButton #654 (@mattias800)
- Redesign NavBarSearchField #612 (@mattias800)
@stenajs-webui/panels, @stenajs-webui/tooltip
- Move Button in ActionMenuButton outside of Popover #655 (@AugustasFriend)
@stenajs-webui/calendar, @stenajs-webui/forms, @stenajs-webui/panels, @stenajs-webui/theme
- New component: TextInputButton #653 (@mattias800)
@stenajs-webui/modal, @stenajs-webui/select, @stenajs-webui/theme
- Update design of select #650 (@mattias800)
@stenajs-webui/forms, @stenajs-webui/theme
- New component: LabelledTextInput #647 (@mattias800)
- TextInput height increase to 36px #645 (@mattias800)
@stenajs-webui/elements, @stenajs-webui/panels, @stenajs-webui/theme
- Refactor buttons and fix height #644 (@mattias800)
@stenajs-webui/core, @stenajs-webui/elements, @stenajs-webui/forms, @stenajs-webui/theme
- Add new RadioButtonBox #642 (@mattias800)
@stenajs-webui/elements, @stenajs-webui/filter
- More icon categories #638 (@mattias800)
@stenajs-webui/elements, @stenajs-webui/forms, @stenajs-webui/select, @stenajs-webui/theme
- Add missing focus outline and remove inset shadows #636 (@mattias800)
@stenajs-webui/elements, @stenajs-webui/forms, @stenajs-webui/panels, @stenajs-webui/theme
- Redesign focus highlight #635 (@mattias800)
@stenajs-webui/core, @stenajs-webui/elements, @stenajs-webui/filter, @stenajs-webui/forms, @stenajs-webui/theme
- Redesign filter checkbox #634 (@mattias800)
@stenajs-webui/core, @stenajs-webui/panels
- Bottom items in SidebarMenu #628 (@mattias800)
@stenajs-webui/panels
- Sticky header in SidebarMenu #617 (@mattias800 @lindskogen)
- Pass through props to menu button #624 (@lindskogen)
- Spread all props into RailMenuLink #618 (@lindskogen)
@stenajs-webui/modal, @stenajs-webui/panels
- Mobile improvements in Drawer #623 (@lindskogen)
@stenajs-webui/forms
- Make checkbox forward className prop #622 (@lindskogen)
@stenajs-webui/grid
- Update StandardTable to allow easy ways to reduce text size #621 (@mattias800 @lindskogen)
@stenajs-webui/elements, @stenajs-webui/filter, @stenajs-webui/modal, @stenajs-webui/panels
- Redesign notifications #619 (@mattias800)
@stenajs-webui/filter, @stenajs-webui/modal
- Floating SearchFilterDrawer #616 (@mattias800)
@stenajs-webui/elements, @stenajs-webui/theme
- Todays batch of redesign updates #615 (@mattias800)
- - Buttons are now round. #583 (@mattias800)
@stenajs-webui/elements, @stenajs-webui/grid-export, @stenajs-webui/panels
- New rail for SidebarMenu #613 (@mattias800 @lindskogen)
@stenajs-webui/core, @stenajs-webui/elements, @stenajs-webui/forms, @stenajs-webui/panels, @stenajs-webui/theme
- TabMenu and misc updates #611 (@mattias800)
@stenajs-webui/calendar, @stenajs-webui/elements, @stenajs-webui/filter, @stenajs-webui/forms, @stenajs-webui/grid-export, @stenajs-webui/grid, @stenajs-webui/panels, @stenajs-webui/theme
- More small redesign changes #609 (@mattias800)
@stenajs-webui/core, @stenajs-webui/elements, @stenajs-webui/filter, @stenajs-webui/modal, @stenajs-webui/panels, @stenajs-webui/theme
- Lots of redesign updates #606 (@mattias800)
@stenajs-webui/core, @stenajs-webui/elements, @stenajs-webui/panels, @stenajs-webui/theme
- Redesign ButtonGroup and ToggleButton #603 (@mattias800)
@stenajs-webui/theme
- Update UI colors to match brand #600 (@mattias800)
- Update mussla color #598 (@mattias800)
- - Use new blue colors. #584 (@mattias800)
@stenajs-webui/filter
- Brand redesign SearchFilter #595 (@mattias800)
@stenajs-webui/elements, @stenajs-webui/panels, @stenajs-webui/theme, @stenajs-webui/tooltip
- Redesign ActionMenu and introduce MenuButton #591 (@mattias800)
@stenajs-webui/elements, @stenajs-webui/modal, @stenajs-webui/panels
- Nav bar and sidebar menu redesign #588 (@mattias800)

⚠️ Pushed to `next`

Merge branch 'master' into next (@lindskogen)
@stenajs-webui/calendar, @stenajs-webui/core, @stenajs-webui/elements, @stenajs-webui/filter, @stenajs-webui/forms, @stenajs-webui/grid-export, @stenajs-webui/grid, @stenajs-webui/input-mask, @stenajs-webui/modal, @stenajs-webui/panels, @stenajs-webui/redux, @stenajs-webui/select, @stenajs-webui/theme, @stenajs-webui/tooltip
- Merge remote-tracking branch 'origin/master' into next (@mattias800)

Authors: 4

Augustas Eidikis (@AugustasFriend)
Johan Lindskogen (@lindskogen)
Markus Patoka (@esepato)
Mattias Andersson (@mattias800)

- There are two sizes for now, medium and xl. - SVG:s ending with "xl" will be size xl. Everything else is medium. - Components can now use types `MediumIcon` and `XlIcon` to require the correct icon size. - CircledIcon is the first to use this, for its new size=xl. - Components that use CircledIcon now requires `icon: MediumIcon` instead of `IconDefinition`. - Add new lighthouse-xl icon.

github-actions · 2023-11-02T16:20:19Z

Size Change: 0 B

Total Size: 318 kB

ℹ️ View Unchanged

Filename	Size
`packages/calendar/dist/index.es.js`	15.3 kB
`packages/calendar/dist/index.js`	12.9 kB
`packages/core/dist/index.es.js`	5.2 kB
`packages/core/dist/index.js`	4.81 kB
`packages/elements/dist/index.es.js`	90.1 kB
`packages/elements/dist/index.js`	87.9 kB
`packages/filter/dist/index.es.js`	3.87 kB
`packages/filter/dist/index.js`	3.27 kB
`packages/forms/dist/index.es.js`	8.15 kB
`packages/forms/dist/index.js`	7.49 kB
`packages/grid-export/dist/index.es.js`	2.05 kB
`packages/grid-export/dist/index.js`	1.99 kB
`packages/grid/dist/index.es.js`	16.7 kB
`packages/grid/dist/index.js`	13.9 kB
`packages/input-mask/dist/index.es.js`	814 B
`packages/input-mask/dist/index.js`	734 B
`packages/modal/dist/index.es.js`	3.42 kB
`packages/modal/dist/index.js`	3.09 kB
`packages/panels/dist/index.es.js`	7.24 kB
`packages/panels/dist/index.js`	6.37 kB
`packages/redux/dist/index.es.js`	3.06 kB
`packages/redux/dist/index.js`	2.75 kB
`packages/select/dist/index.es.js`	4.12 kB
`packages/select/dist/index.js`	3.69 kB
`packages/theme/dist/index.es.js`	1.96 kB
`packages/theme/dist/index.js`	2.02 kB
`packages/tooltip/dist/index.es.js`	2.92 kB
`packages/tooltip/dist/index.js`	2.72 kB

_{compressed-size-action}

lindskogen

Very nice!

mattias800 requested review from lindskogen, nikteg, esepato and AugustasFriend November 2, 2023 16:17

mattias800 added 4 commits November 2, 2023 17:20

- Fix import statement in generated icon files.

a362e9e

Merge remote-tracking branch 'origin/next' into feature/xl-circled-icon

743c761

- New fixed lighthouse-xl icon.

d2f7b45

- Small fix.

0f47c1f

lindskogen approved these changes Nov 3, 2023

View reviewed changes

mattias800 merged commit 2abc475 into next Nov 3, 2023
6 checks passed

mattias800 deleted the feature/xl-circled-icon branch November 3, 2023 10:52

This was referenced Nov 10, 2023

Fix broken NavBarButton styles #668

Merged

Redesign ValueTable for Brand update #672

Merged

Set ValueTable label to bold #673

Merged

Update Label design #675

Merged

This was referenced Nov 22, 2023

Add TextInputButton small size for compact table cells #676

Merged

Re-implement (Action)MenuButton success and loading states #677

Merged

Make MenuButton iconOnly round #678

Merged

Align SearchFilterChips #679

Merged

ActionMenuButton fixes #680

Merged

This was referenced Nov 27, 2023

Danger button background, spacing and more! #681

Merged

Keycard icons #684

Merged

Change textinput button height #685

Merged

This was referenced Dec 15, 2023

Update icons #693

Merged

Add ability to search in icons in stories #694

Merged

add two more icons #696

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Icon sizes and CircledIcon xl size #656

Icon sizes and CircledIcon xl size #656

mattias800 commented Nov 2, 2023 •

edited by lindskogen

Loading

github-actions bot commented Nov 2, 2023 •

edited

Loading

lindskogen left a comment

Icon sizes and CircledIcon xl size #656

Icon sizes and CircledIcon xl size #656

Conversation

mattias800 commented Nov 2, 2023 • edited by lindskogen Loading

Version

💥 Breaking Change

🐛 Bug Fix

⚠️ Pushed to next

Authors: 4

github-actions bot commented Nov 2, 2023 • edited Loading

lindskogen left a comment

Choose a reason for hiding this comment

mattias800 commented Nov 2, 2023 •

edited by lindskogen

Loading

⚠️ Pushed to `next`

github-actions bot commented Nov 2, 2023 •

edited

Loading