feat(tabs): warpify tabs #34

CarolineGard · 2023-05-15T10:31:42Z

This PR includes:

Warpify Tabs
Remove contained as an option for tabs: This decision was made by design while no/very few teams are currently using it and it's not part of the current and future design.
Style changes according to new design: e.g. grey border on hover, no underline on hover
Temporary solution for handling the number of grid columns: adding classes dynamically causes issues as it prevents the CSS class to load properly from the drive

… children

design decision that contained tabs should no longer be a choice

AnnaRybkina · 2023-05-19T06:13:07Z

packages/tabs/src/component-tab.tsx

-  ...rest
-}: any) => ({
-  tab: cn({
+const setup = ({ className, isActive, setActive, ...rest }: any) => ({


I would really prefer to either fix eslint config for the repo or switch off local formatting. I do like the changes though but it keeps the focus away from the actual changes.

packages/tabs/src/component-tabs.tsx

packages/tabs/src/component-tab.tsx

AnnaRybkina

Great work 💪 I left some minor comments but leave those are up to you to decide if the suggestions make sense 😁

Maybe this one is worth fixing as contained is removed

# [1.0.0-alpha.25](v1.0.0-alpha.24...v1.0.0-alpha.25) (2023-05-22) ### Bug Fixes * make sure to style text for links as buttons ([#35](#35)) ([96aa46c](96aa46c)) ### Features * **tabs:** warpify tabs ([#34](#34)) ([ce210d2](ce210d2))

# [1.0.0-alpha.25](v1.0.0-alpha.24...v1.0.0-alpha.25) (2023-05-24) ### Bug Fixes * make sure to style text for links as buttons ([#35](#35)) ([96aa46c](96aa46c)) * warpify modal ([#36](#36)) ([5d0b084](5d0b084)) ### Features * **tabs:** warpify tabs ([#34](#34)) ([ce210d2](ce210d2))

# [1.0.0-alpha.25](v1.0.0-alpha.24...v1.0.0-alpha.25) (2023-05-25) ### Bug Fixes * make sure to style text for links as buttons ([#35](#35)) ([96aa46c](96aa46c)) * warpify modal ([#36](#36)) ([5d0b084](5d0b084)) ### Features * add component classes to the combobox ([#38](#38)) ([232bf60](232bf60)) * **tabs:** warpify tabs ([#34](#34)) ([ce210d2](ce210d2))

# [1.0.0-alpha.25](v1.0.0-alpha.24...v1.0.0-alpha.25) (2023-05-26) ### Bug Fixes * make sure to style text for links as buttons ([#35](#35)) ([96aa46c](96aa46c)) * warpify modal ([#36](#36)) ([5d0b084](5d0b084)) ### Features * add component classes to the combobox ([#38](#38)) ([232bf60](232bf60)) * **attention:** warpify attention ([#37](#37)) ([61f6895](61f6895)) * **tabs:** warpify tabs ([#34](#34)) ([ce210d2](ce210d2))

# [1.0.0-alpha.25](v1.0.0-alpha.24...v1.0.0-alpha.25) (2023-05-29) ### Bug Fixes * make sure to style text for links as buttons ([#35](#35)) ([96aa46c](96aa46c)) * warpify modal ([#36](#36)) ([5d0b084](5d0b084)) ### Features * add component classes to the combobox ([#38](#38)) ([232bf60](232bf60)) * **attention:** warpify attention ([#37](#37)) ([61f6895](61f6895)) * **tabs:** warpify tabs ([#34](#34)) ([ce210d2](ce210d2)) * Warpified Switch component ([#39](#39)) ([20eddea](20eddea))

# [1.0.0-alpha.25](v1.0.0-alpha.24...v1.0.0-alpha.25) (2023-05-30) ### Bug Fixes * make sure to style text for links as buttons ([#35](#35)) ([96aa46c](96aa46c)) * Move react specific switch track classes to component-classes ([#40](#40)) ([a024fb5](a024fb5)) * warpify modal ([#36](#36)) ([5d0b084](5d0b084)) ### Features * add component classes to the combobox ([#38](#38)) ([232bf60](232bf60)) * **attention:** warpify attention ([#37](#37)) ([61f6895](61f6895)) * **tabs:** warpify tabs ([#34](#34)) ([ce210d2](ce210d2)) * Warpified Switch component ([#39](#39)) ([20eddea](20eddea))

# [1.0.0-alpha.25](v1.0.0-alpha.24...v1.0.0-alpha.25) (2023-06-01) ### Bug Fixes * **alert:** use imported instead of inline classes ([#41](#41)) ([c8c8da2](c8c8da2)) * make sure to style text for links as buttons ([#35](#35)) ([96aa46c](96aa46c)) * Move react specific switch track classes to component-classes ([#40](#40)) ([a024fb5](a024fb5)) * warpify modal ([#36](#36)) ([5d0b084](5d0b084)) ### Features * add component classes to the combobox ([#38](#38)) ([232bf60](232bf60)) * **attention:** warpify attention ([#37](#37)) ([61f6895](61f6895)) * **tabs:** warpify tabs ([#34](#34)) ([ce210d2](ce210d2)) * Warpified Switch component ([#39](#39)) ([20eddea](20eddea))

# [1.0.0-alpha.25](v1.0.0-alpha.24...v1.0.0-alpha.25) (2023-06-01) ### Bug Fixes * **alert:** use imported instead of inline classes ([#41](#41)) ([c8c8da2](c8c8da2)) * **changelog:** remove repeated changes ([#42](#42)) ([41b4d98](41b4d98)) * make sure to style text for links as buttons ([#35](#35)) ([96aa46c](96aa46c)) * Move react specific switch track classes to component-classes ([#40](#40)) ([a024fb5](a024fb5)) * warpify modal ([#36](#36)) ([5d0b084](5d0b084)) ### Features * add component classes to the combobox ([#38](#38)) ([232bf60](232bf60)) * **attention:** warpify attention ([#37](#37)) ([61f6895](61f6895)) * **tabs:** warpify tabs ([#34](#34)) ([ce210d2](ce210d2)) * Warpified Switch component ([#39](#39)) ([20eddea](20eddea))

# [1.0.0-alpha.25](v1.0.0-alpha.24...v1.0.0-alpha.25) (2023-06-01) ### Bug Fixes * **alert:** use imported instead of inline classes ([#41](#41)) ([c8c8da2](c8c8da2)) * **changelog:** remove repeated changes ([#42](#42)) ([41b4d98](41b4d98)) * make sure to style text for links as buttons ([#35](#35)) ([96aa46c](96aa46c)) * Move react specific switch track classes to component-classes ([#40](#40)) ([a024fb5](a024fb5)) * **releases:** trigger release of 1.0.0-alpha.25 ([d99c1f4](d99c1f4)) * warpify modal ([#36](#36)) ([5d0b084](5d0b084)) ### Features * add component classes to the combobox ([#38](#38)) ([232bf60](232bf60)) * **attention:** warpify attention ([#37](#37)) ([61f6895](61f6895)) * **tabs:** warpify tabs ([#34](#34)) ([ce210d2](ce210d2)) * Warpified Switch component ([#39](#39)) ([20eddea](20eddea))

# 1.0.0 (2023-08-30) ### Bug Fixes * add common css ([37b6d7e](37b6d7e)) * add component classes to Breadcrumbs ([#23](#23)) ([9818cba](9818cba)) * add component classes to select ([#21](#21)) ([8a7632c](8a7632c)) * add Finnish language ([77a32c0](77a32c0)) * add fix for button ([f4527d4](f4527d4)) * add missing classes to textarea and refactor ([#20](#20)) ([4116c3f](4116c3f)) * add more translations ([a8f57a6](a8f57a6)) * add placeholder to texarea ([cebd307](cebd307)) * add translation for "magnifying glass" used in affix ([41d6774](41d6774)) * add type module ([c96d22c](c96d22c)) * Add Warp component-classes to the box component ([#19](#19)) ([e172165](e172165)) * Add Warp component-classes to the Pill component ([#28](#28)) ([0db49ac](0db49ac)) * **alert:** don't use dynamic classes ([#8](#8)) ([85a136d](85a136d)) * **alert:** use imported instead of inline classes ([#41](#41)) ([c8c8da2](c8c8da2)) * **alert:** use negative and positive variants instead of critical and success ([#9](#9)) ([82aa7ec](82aa7ec)) * apply new tokens to textfield and textarea ([#16](#16)) ([59b3ec8](59b3ec8)) * build storybook with vite instead of webpack ([#44](#44)) ([f569d2a](f569d2a)) * bump @warp-ds/css package to get fix for select chevron component class ([0cb53a2](0cb53a2)) * bump component classes ([#46](#46)) ([8e33518](8e33518)) * bump packages ([#43](#43)) ([5e064e7](5e064e7)) * bump versions ([#47](#47)) ([a347969](a347969)) * **buttons:** bump component-classes to 1.0.0-alpha.116 ([#60](#60)) ([b483bcd](b483bcd)) * **card:** apply component classes to card component ([#33](#33)) ([a0937a8](a0937a8)) * **changelog:** remove repeated changes ([#42](#42)) ([41b4d98](41b4d98)) * classes for toggle ([#26](#26)) ([65211a7](65211a7)) * **components:** update component classes ([#49](#49)) ([7a445d2](7a445d2)) * detect locale on server ([1ffbc50](1ffbc50)) * **expandable:** bump component classes package ([f508125](f508125)) * **expandable:** change single quote to quote ([1a8816e](1a8816e)) * **expandable:** merge alpha with branch ([78a9236](78a9236)) * export button, and input components ([#18](#18)) ([3cc5894](3cc5894)) * extract supportedLocales to avoid to define it twice ([73a81f6](73a81f6)) * fix broken docs after vite upgrade ([#29](#29)) ([6f65554](6f65554)) * import and load messages in component to avoid issues with dynamic import ([4aeadf0](4aeadf0)) * **index.ts:** export expandable, box and select from packages/index.ts ([#30](#30)) ([7b1e21c](7b1e21c)) * make sure to style text for links as buttons ([#35](#35)) ([96aa46c](96aa46c)) * Move react specific switch track classes to component-classes ([#40](#40)) ([a024fb5](a024fb5)) * only support 'en' and 'nb' for now ([3e78b12](3e78b12)) * **packages:** use className and style in TextField and Select ([#50](#50)) ([fdfe96a](fdfe96a)) * radio buttons classes ([#31](#31)) ([3a5ca84](3a5ca84)) * **releases:** trigger release of 1.0.0-alpha.25 ([d99c1f4](d99c1f4)) * remove background from checkbox/toggle ([#51](#51)) ([f0eba8e](f0eba8e)) * remove common.css and use safelist ([#14](#14)) ([60c6607](60c6607)) * secondary button prop is not true by default ([#56](#56)) ([d82680a](d82680a)) * stable FINN prod alpha-release ([#59](#59)) ([0733c47](0733c47)) * **step:** hide outer lines on horizontal variant of steps ([#62](#62)) ([a345319](a345319)) * **stepsindicator:** update version of @warp-ds/component-classes ([09d9022](09d9022)) * Styling alert component with tokens ([#5](#5)) ([9748c5f](9748c5f)) * trigger release of 1.0.0-alpha.38 ([a275d63](a275d63)) * upgrade storybook ([#27](#27)) ([d0ba4b1](d0ba4b1)) * use correct padding for small buttons ([a054d29](a054d29)) * use css packages instead of component-classes ([#55](#55)) ([64d45d3](64d45d3)) * use process.env.NMP_LANGUAGE if available if SSR ([a7bba9c](a7bba9c)) * use updated component-classes in alert component ([#15](#15)) ([b4c1b9a](b4c1b9a)) * warpify modal ([#36](#36)) ([5d0b084](5d0b084)) ### Features * add button styling ([#7](#7)) ([bf2e9e1](bf2e9e1)) * add component classes to the combobox ([#38](#38)) ([232bf60](232bf60)) * add internationalization ([4ffec64](4ffec64)) * **attention:** warpify attention ([#37](#37)) ([61f6895](61f6895)) * **expandable:** add warp component classes to expandable ([581ecdf](581ecdf)) * **expandable:** bump warp versions containing new tokens and component classes ([21c9074](21c9074)) * **stepindicator:** add component classes for stepindicator ([6de4822](6de4822)) * **tabs:** warpify tabs ([#34](#34)) ([ce210d2](ce210d2)) * Warpified Switch component ([#39](#39)) ([20eddea](20eddea)) * **workflows:** add eik aliasing script to realease.yml ([#17](#17)) ([ce4604a](ce4604a))

CarolineGard added 2 commits May 12, 2023 15:38

feat(tabs): warpify tabs

9a8e768

fix(tabs): make the columns work correctly depending on the number of…

672b4b8

… children

CarolineGard requested review from magnuh, AnnaRybkina and BalbinaK May 15, 2023 10:31

CarolineGard marked this pull request as draft May 16, 2023 11:57

fix(tabs): remove the contained prop

177041b

design decision that contained tabs should no longer be a choice

CarolineGard marked this pull request as ready for review May 17, 2023 07:07

CarolineGard added 4 commits May 17, 2023 09:52

fix(tabs): remove unused style

e66bcac

fix(tabs): add todo comment

d3d1cbf

fix(tabs): merge alpha into branch

f891e4d

fix(tabs): import gridLayout from component-classes

2347e4b

AnnaRybkina reviewed May 19, 2023

View reviewed changes

packages/tabs/src/component-tabs.tsx Outdated Show resolved Hide resolved

AnnaRybkina reviewed May 19, 2023

View reviewed changes

packages/tabs/src/component-tab.tsx Outdated Show resolved Hide resolved

AnnaRybkina reviewed May 19, 2023

View reviewed changes

packages/tabs/src/component-tab.tsx Outdated Show resolved Hide resolved

AnnaRybkina approved these changes May 19, 2023

View reviewed changes

CarolineGard added 2 commits May 21, 2023 20:40

fix(tabs): small changes

6d6695b

fix(tabs): merge with alpha

ef03770

CarolineGard merged commit ce210d2 into alpha May 22, 2023

CarolineGard deleted the add-tabs branch May 22, 2023 06:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(tabs): warpify tabs #34

feat(tabs): warpify tabs #34

CarolineGard commented May 15, 2023 •

edited

Loading

AnnaRybkina May 19, 2023 •

edited

Loading

AnnaRybkina left a comment •

edited

Loading

feat(tabs): warpify tabs #34

feat(tabs): warpify tabs #34

Conversation

CarolineGard commented May 15, 2023 • edited Loading

AnnaRybkina May 19, 2023 • edited Loading

Choose a reason for hiding this comment

AnnaRybkina left a comment • edited Loading

Choose a reason for hiding this comment

CarolineGard commented May 15, 2023 •

edited

Loading

AnnaRybkina May 19, 2023 •

edited

Loading

AnnaRybkina left a comment •

edited

Loading