Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FX-5880] Update PageHead to follow BASE #4529

Merged
merged 26 commits into from
Sep 17, 2024
Merged
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
dfad94a
Update PageHead to follow BASE
TomasSlama Sep 5, 2024
8a4fcfe
Update PageHead to follow BASE
TomasSlama Sep 6, 2024
7af9cae
Update yarn.lock
TomasSlama Sep 6, 2024
5cc1b9f
Fix RTE button
TomasSlama Sep 9, 2024
3858121
[FX-5880] Remove controls prop
AdrianContiu Sep 10, 2024
babc53c
Update stories
AdrianContiu Sep 10, 2024
8e487f1
Add loading state for title and subtitle
AdrianContiu Sep 10, 2024
1586635
Downgrade picasso-tailwind version
AdrianContiu Sep 10, 2024
2cf5ad6
Refactor PageHead
AdrianContiu Sep 11, 2024
b28fe7a
Update stories examples
AdrianContiu Sep 11, 2024
241fef4
Merge 'master' in fx-5880-page-head-2
AdrianContiu Sep 11, 2024
c8aa8d7
Change package name to PageHeadBase
AdrianContiu Sep 13, 2024
771b758
Duplicate folder
AdrianContiu Sep 13, 2024
574e646
Revert "Update PageHead to follow BASE"
AdrianContiu Sep 13, 2024
7ef296b
Revert PageHead and add PageHeadBase
AdrianContiu Sep 15, 2024
8e04421
Update snapshots
AdrianContiu Sep 15, 2024
716452f
Update Page changeset to minor
AdrianContiu Sep 16, 2024
32030aa
Remove non-exiting package from changeset
AdrianContiu Sep 16, 2024
b9005ae
Add deprecated tag to PageHead
AdrianContiu Sep 16, 2024
99d1c99
Merge 'master' in fx-5880-page-head-2
AdrianContiu Sep 16, 2024
f8f3a3f
Address review comments
AdrianContiu Sep 17, 2024
18cc928
Add changeset for picasso package
AdrianContiu Sep 17, 2024
02bd885
Fix happo test issues
AdrianContiu Sep 17, 2024
0cd7b03
Update snapshots
AdrianContiu Sep 17, 2024
fa54fdf
Update Steps story
AdrianContiu Sep 17, 2024
53b0311
Merge 'master' in fx-5880-page-head-2
AdrianContiu Sep 17, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/gold-doors-clap.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@toptal/picasso': major
---

- update `@toptal/picasso-tailwind` to `3.0.0` in peerDependencies with the latest `tailwindcss`
7 changes: 7 additions & 0 deletions .changeset/many-jeans-sleep.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@toptal/base-tailwind': major
'@toptal/picasso-tailwind': major
---

- update tailwindcss to 3.4.10
- check new TailwindCSS [features](https://tailwindcss.com/blog/tailwindcss-v3-4)
5 changes: 5 additions & 0 deletions .changeset/nice-snails-destroy.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@toptal/picasso-tabs': patch
---

- add `data-component-type='tabs'` to the root
5 changes: 5 additions & 0 deletions .changeset/selfish-zoos-brake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@toptal/picasso-rich-text-editor': patch
---

- fix spacing between buttons
8 changes: 8 additions & 0 deletions .changeset/sour-plants-call.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@toptal/picasso-button': patch
---

### PicassoButtonGroup

- increase specifity of CSS selector from `[&+&]:ml-4` to `[[data-component-type="button"]+&]:ml-4`
- fix spacing between PicassoGroup and Button
7 changes: 7 additions & 0 deletions .changeset/thirty-wasps-burn.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@toptal/picasso-page': minor
---

### PageHeadBase

- add new component `PageHeadBase` to conform with BASE.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -182,7 +182,7 @@
"react-test-renderer": "^18.2.0",
"remark-gfm": "^4.0.0",
"syncpack": "^12.3.3",
"tailwindcss": "^3.3.6",
"tailwindcss": "^3.4.10",
"thread-loader": "^4.0.2",
"ts-loader": "^9.5.1",
"tsconfig-paths-webpack-plugin": "^4.1.0",
4 changes: 2 additions & 2 deletions packages/base-tailwind/package.json
Original file line number Diff line number Diff line change
@@ -24,10 +24,10 @@
"prepublishOnly": "yarn build:package"
},
"devDependencies": {
"tailwindcss": "^3.3.6"
"tailwindcss": "^3.4.10"
},
"peerDependencies": {
"tailwindcss": "^3.3.5"
"tailwindcss": "^3.4.10"
},
"sideEffects": false,
"files": [
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ exports[`Accordion renders collapsed by default 1`] = `
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
data-component-type="button"
role="button"
tabindex="0"
@@ -175,7 +175,7 @@ exports[`Accordion renders disabled 1`] = `
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
data-component-type="button"
role="button"
tabindex="0"
4 changes: 2 additions & 2 deletions packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
Original file line number Diff line number Diff line change
@@ -42,7 +42,7 @@ exports[`Alert renders 1`] = `
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-6 py-0 px-3"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-6 py-0 px-3"
data-component-type="button"
data-testid="action-button"
role="button"
@@ -61,7 +61,7 @@ exports[`Alert renders 1`] = `
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-6 py-0 px-3"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-6 py-0 px-3"
data-component-type="button"
data-testid="action-button"
role="button"
Original file line number Diff line number Diff line change
@@ -256,7 +256,7 @@ exports[`Autocomplete static behavior renders 1`] = `
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer rounded-full p-0 w-[1.5em] h-[1.5em] border-none text-graphite hover:bg-gray active:bg-gray focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] bg-transparent"
data-component-type="button"
role="reset"
tabindex="-1"
4 changes: 2 additions & 2 deletions packages/base/Button/src/Button/__snapshots__/test.tsx.snap
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ exports[`Button disabled button as link renders disabled version 1`] = `
>
<a
aria-disabled="true"
class="font-inherit focus:outline-none base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
class="font-inherit focus:outline-none base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
data-component-type="button"
href="URL"
role="button"
@@ -31,7 +31,7 @@ exports[`Button disabled button renders disabled version 1`] = `
>
<button
aria-disabled="true"
class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-default pointer-events no-underline hover:no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
data-component-type="button"
disabled=""
role="button"
22 changes: 11 additions & 11 deletions packages/base/Button/src/ButtonBase/__snapshots__/test.tsx.snap
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
>
<span
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
data-component-type="button"
href="/"
role="button"
@@ -31,7 +31,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "butt
>
<span
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
data-component-type="button"
role="button"
tabindex="0"
@@ -55,7 +55,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
>
<a
aria-disabled="false"
class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
data-component-type="button"
href="URL"
role="button"
@@ -79,7 +79,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
>
<a
aria-disabled="true"
class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events"
class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
data-component-type="button"
href="URL"
role="button"
@@ -103,7 +103,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" compon
>
<a
aria-disabled="false"
class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
class="font-inherit focus:outline-none hover:underline text-blue visited:text-purple no-underline base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
data-component-type="button"
href=""
role="button"
@@ -127,7 +127,7 @@ exports[`ButtonBase when "as" prop is passed when "as" prop equals "a" renders B
>
<a
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
data-component-type="button"
href="/"
role="button"
@@ -151,7 +151,7 @@ exports[`ButtonBase when "disabled" prop is false renders Button and does not tr
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
data-component-type="button"
role="button"
tabindex="0"
@@ -174,7 +174,7 @@ exports[`ButtonBase when "disabled" prop is true renders Button and does not tri
>
<button
aria-disabled="true"
class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-default pointer-events"
class="base-Button base- text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-default pointer-events"
data-component-type="button"
disabled=""
role="button"
@@ -198,7 +198,7 @@ exports[`ButtonBase when "loading" prop is true renders Button with loading stat
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
data-component-type="button"
role="button"
tabindex="0"
@@ -248,7 +248,7 @@ exports[`ButtonBase when "role" prop is passed renders Button with a custom role
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
data-component-type="button"
role="custom"
tabindex="0"
@@ -271,7 +271,7 @@ exports[`ButtonBase when "titleCase" prop is true renders Button with transforme
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer"
data-component-type="button"
role="button"
tabindex="0"
2 changes: 1 addition & 1 deletion packages/base/Button/src/ButtonBase/styles.ts
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@ export const createCoreClassNames = ({
'ease-out',
'shrink-0',
'outline-none',
'[&+&]:ml-4',
'[[data-component-type="button"]+&]:ml-4',
]

if (!disabled && !loading) {
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ exports[`ButtonCheckbox renders 1`] = `
>
<label
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 px-4 text-center py-2 pr-6 pl-4"
data-component-type="button"
role="button"
tabindex="0"
8 changes: 7 additions & 1 deletion packages/base/Button/src/ButtonGroup/ButtonGroup.tsx
Original file line number Diff line number Diff line change
@@ -18,7 +18,13 @@ export const ButtonGroup = forwardRef<HTMLDivElement, Props>(
const finalClassName = twMerge(createRootClassNames(), className)

return (
<div {...rest} ref={ref} className={finalClassName} style={style}>
<div
{...rest}
ref={ref}
data-component-type='button'
className={finalClassName}
style={style}
>
{children}
</div>
)
Loading
Loading