feat(button-group): add component classes to ButtonGroup #23
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BalbinaK
commented
May 4, 2023
Comment on lines
-8
to
-10
| 'relative last-child:mb-0 hover:i-bg-$gray-50 active:i-bg-$bg-gray-100', | ||
| outlined.value ? 'i-border-$gray-300' : 'border-transparent', | ||
| props.selected ? 'i-bg-$gray-200 hover:i-bg-$gray-300 active:i-bg-$gray-400' : 'i-bg-$white' |
There was a problem hiding this comment.
The Finn color is different here then in Fabric Vue ButtonGroup (blue vs gray) - @adidick is this something we should fix?
There was a problem hiding this comment.
Also for Tori, the background of an active and hovered-active color is the same - petroleum-600. Is that fine?
magnuh
reviewed
May 5, 2023
magnuh
reviewed
May 5, 2023
CarolineGard
reviewed
May 5, 2023
There was a problem hiding this comment.
Great work, works well! One comment below:)
For the vertical alignment, something is wrong with the border. There should be no border-left, and instead have border-top. And no border when outlined or raised?
type: button and modifiers: vertical
type: radio and modifiers: vertical
type: radio and modifiers: raised + vertical
|
Fixed the above issues with wrapping the conditional classes in a |
CarolineGard
approved these changes
May 8, 2023
github-actions bot
pushed a commit
that referenced
this pull request
May 8, 2023
# [1.0.0-alpha.17](v1.0.0-alpha.16...v1.0.0-alpha.17) (2023-05-08) ### Features * **button-group:** add component classes to ButtonGroup ([#23](#23)) ([c9e29a9](c9e29a9))
github-actions bot
pushed a commit
that referenced
this pull request
Aug 31, 2023
# 1.0.0 (2023-08-31) ### Bug Fixes * add button classes ([#7](#7)) ([192f983](192f983)) * add classes to card component ([#31](#31)) ([acebdc3](acebdc3)) * add classes to clickable ([#29](#29)) ([c220593](c220593)) * add classes to radiobuttons component ([#27](#27)) ([1520b7a](1520b7a)) * add classes to textfield and textarea ([#13](#13)) ([d07be64](d07be64)) * add component classes to breadcrumbs ([#19](#19)) ([0a44566](0a44566)) * add component classes to modal ([#33](#33)) ([a2dfc25](a2dfc25)) * add component classes to select ([#18](#18)) ([99f5691](99f5691)) * add component classes to the toggle component ([#24](#24)) ([4526148](4526148)) * add default extractor (handles .js files) + add translation for validation ([4b32bbb](4b32bbb)) * add Finnish language ([431c62b](431c62b)) * add more translations ([2f06c7e](2f06c7e)) * Add uno styling for the alert component ([#6](#6)) ([50c21f6](50c21f6)) * **alert:** use imported instead of inline classes ([#39](#39)) ([832521b](832521b)) * bump @warp-ds/css package to get fix for select chevron ([675f07c](675f07c)) * bump component-classes ([60940a4](60940a4)) * bump fversions ([#45](#45)) ([18941af](18941af)) * bump packages ([#40](#40)) ([cd4b4ae](cd4b4ae)) * bump warp packages ([#47](#47)) ([9ff62db](9ff62db)) * **buttons:** bump component-classes to 1.0.0-alpha.116 ([#51](#51)) ([6f077c4](6f077c4)) * detect locale on server ([68ceedc](68ceedc)) * do not override props and attrs in input and textarea ([#17](#17)) ([e549203](e549203)) * **expandable:** add the same settings for info as for box prop + rename import of component classes ([1c85e36](1c85e36)) * Fixed bug with Switch always showing selected state ([#37](#37)) ([0fab7b3](0fab7b3)) * focusable is added to the component classes ([#38](#38)) ([02e5df2](02e5df2)) * import sr-only class from component-classes to Button and Breadcrumbs ([#20](#20)) ([45e67a6](45e67a6)) * **inline classes:** update inline classes for tag, tabs, steps, expandable, attention ([#46](#46)) ([71feb82](71feb82)) * load messages correctly ([b0cbf19](b0cbf19)) * modify test because of changed default aria label ([ec7579f](ec7579f)) * **package.json:** update package versions ([#48](#48)) ([d5ae45c](d5ae45c)) * **package.json:** update version for component-classes in package.json ([658c232](658c232)) * provide props to textarea ([#41](#41)) ([f5a37f1](f5a37f1)) * remove inline class from button link ([#43](#43)) ([008b445](008b445)) * Rename wInput to wTextfield and add prop validator for input types ([#58](#58)) ([9d667e2](9d667e2)) * revert "chore(release): 1.0.0-alpha.44 [skip ci]" ([d03b908](d03b908)) * stable FINN prod alpha-release ([#50](#50)) ([73b9d6d](73b9d6d)) * **stepindicator:** update version of @warp-ds/component-classes ([7914c87](7914c87)) * **steps:** fix background color issue for active step ([#42](#42)) ([1e6c7b2](1e6c7b2)) * **steps:** small fix ([836eef8](836eef8)) * **steps:** update to computed classes ([97f3b4d](97f3b4d)) * textarea default class and refactor ([#15](#15)) ([e64455d](e64455d)) * Update the box component to Warp using component-classes ([#14](#14)) ([eab3eb1](eab3eb1)) * Update to use first major versions of the css and uno warp packages ([#59](#59)) ([69bd395](69bd395)) * use css package instead of component-classes ([#52](#52)) ([625d061](625d061)) * use props for inputs and not attrs ([#26](#26)) ([ec08a63](ec08a63)) * use radioChecked class ([#28](#28)) ([e0e7200](e0e7200)) * use updated component-classes in alert ([#8](#8)) ([59227cf](59227cf)) * **w-pill:** minor changes to clean it up ([2181a74](2181a74)) * Warpified and refactored the Pill component, adding component-classes ([#22](#22)) ([3e888ae](3e888ae)) * **workflows:** set node v to lts/* and pnpm to 8 ([#44](#44)) ([c4ea6ba](c4ea6ba)) ### Features * add internationalization (i18n) ([5cb0387](5cb0387)) * **attention:** warpify attention ([#34](#34)) ([6aedb69](6aedb69)) * **button-group:** add component classes to ButtonGroup ([#23](#23)) ([c9e29a9](c9e29a9)) * **Form:** warpify forms ([#36](#36)) ([f712528](f712528)) * **slider:** warpify slider component ([#30](#30)) ([67efc75](67efc75)) * **stepindicator:** add component classes to step indicator ([de3474d](de3474d)) * **tabs:** Warpify tabs ([#32](#32)) ([2e996aa](2e996aa)) * Warpify Switch component ([#35](#35)) ([26c03fa](26c03fa)) * **workflows:** add eik aliasing script to release.yml ([#10](#10)) ([a0de9d6](a0de9d6)) ### BREAKING CHANGES * wInput has been renamed to wTextfield. This change is made to align with the other frameworks in Warp and to clarify what type of inputs the component produces.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds styling to ButtonGroup based on Warp component classes and respective tokens.
In order to fix issues with border hover and active colors not displaying properly, the styling of borders was moved from ButtonGroup to ButtonGroupItem component.
non-outlined
with selected and hovered items
raised with selected item
vertical with selected hovered item
outlined
with selected and hovered items
vertical with selected item
raised & vertical with selected item
Tori branding: