From 6d8d9a40c0236c25845f6486d99342332eb7fec7 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Thu, 5 Dec 2024 12:04:16 +0100 Subject: [PATCH 01/36] Update tailwindcss and @tailwindcss/forms We need tailwindcss >= 3.3.0 for the RTL support through logical properties (start/end) --- package.json | 2 +- packages/postcss-preset/package.json | 2 +- .../package.json | 2 +- packages/tailwindcss-preset/package.json | 2 +- packages/ui-library/package.json | 4 +- .../ui-library/src/components/root/style.css | 65 ++++-- yarn.lock | 204 ++++++------------ 7 files changed, 125 insertions(+), 156 deletions(-) diff --git a/package.json b/package.json index 774ecc8814b..365ef67097d 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@babel/core": "^7.18.5", "@slack/webhook": "^5.0.2", "@tailwindcss/container-queries": "^0.1.1", - "@tailwindcss/forms": "^0.5.2", + "@tailwindcss/forms": "^0.5.9", "@wordpress/dependency-extraction-webpack-plugin": "^4.28.0", "@wordpress/scripts": "^26.16.0", "@yoast/babel-preset": "^1.1.1", diff --git a/packages/postcss-preset/package.json b/packages/postcss-preset/package.json index 4efeb260e5c..a972771215c 100644 --- a/packages/postcss-preset/package.json +++ b/packages/postcss-preset/package.json @@ -10,7 +10,7 @@ "autoprefixer": "^10.4.7", "cssnano": "^5.0.17", "postcss-import": "^14.0.2", - "tailwindcss": "^3.2.4" + "tailwindcss": "^3.4.16" }, "peerDependencies": { "postcss": "^8.4.19" diff --git a/packages/related-keyphrase-suggestions/package.json b/packages/related-keyphrase-suggestions/package.json index 6ed52811d13..090dc071b1e 100644 --- a/packages/related-keyphrase-suggestions/package.json +++ b/packages/related-keyphrase-suggestions/package.json @@ -62,7 +62,7 @@ "puppeteer": "^23.6.0", "storybook": "^8.3.6", "style-loader": "^4.0.0", - "tailwindcss": "^3.4.14" + "tailwindcss": "^3.4.16" }, "dependencies": { "@heroicons/react": "^1.0.6", diff --git a/packages/tailwindcss-preset/package.json b/packages/tailwindcss-preset/package.json index 5b09e786590..8288c7b6985 100644 --- a/packages/tailwindcss-preset/package.json +++ b/packages/tailwindcss-preset/package.json @@ -9,6 +9,6 @@ "peerDependencies": { "@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/forms": "^0.5.3", - "tailwindcss": "^3.2.4" + "tailwindcss": "^3.3.7" } } diff --git a/packages/ui-library/package.json b/packages/ui-library/package.json index fb2c510a367..50078373fff 100644 --- a/packages/ui-library/package.json +++ b/packages/ui-library/package.json @@ -50,7 +50,7 @@ "@storybook/react-webpack5": "^7.6.17", "@storybook/theming": "^7.6.17", "@tailwindcss/container-queries": "^0.1.1", - "@tailwindcss/forms": "^0.5.3", + "@tailwindcss/forms": "^0.5.9", "@wordpress/jest-preset-default": "^8.0.1", "@yoast/browserslist-config": "^1.2.3", "@yoast/jest-preset": "^1.0.1", @@ -69,7 +69,7 @@ "puppeteer": "^17.1.3", "storybook": "^7.6.17", "style-loader": "^3.3.4", - "tailwindcss": "^3.2.4" + "tailwindcss": "^3.4.16" }, "dependencies": { "@headlessui/react": "^1.7.8", diff --git a/packages/ui-library/src/components/root/style.css b/packages/ui-library/src/components/root/style.css index 1b98893f38d..4cc0ccd584d 100644 --- a/packages/ui-library/src/components/root/style.css +++ b/packages/ui-library/src/components/root/style.css @@ -2,7 +2,7 @@ * Tailwind CSS preflight, but scoped to the Yoast root class. * This is added to the base layer by design. * - * Source: https://github.com/tailwindlabs/tailwindcss/blob/v3.1.2/src/css/preflight.css + * Source: https://raw.githubusercontent.com/tailwindlabs/tailwindcss/refs/tags/v3.4.16/src/css/preflight.css * Changed `html` and `body` to affect the `.yst-root` instead. */ @layer base { @@ -31,19 +31,30 @@ 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. + 5. Use the user's configured `sans` font-feature-settings by default. + 6. Use the user's configured `sans` font-variation-settings by default. + 7. Disable tap highlights on iOS */ - line-height: 1.5; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ + &, + :host { + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -moz-tab-size: 4; /* 3 */ + tab-size: 4; /* 3 */ + font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ + font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */ + font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */ + -webkit-tap-highlight-color: transparent; /* 7 */ + } /* 1. Remove the margin in all browsers. */ - margin: 0; /* 1 */ + & { + margin: 0; /* 1 */ + } /* 1. Add the correct height in Firefox. @@ -98,8 +109,10 @@ } /* - 1. Use the user's configured `mono` font family by default. - 2. Correct the odd `em` font sizing in all browsers. + 1. Use the user's configured `mono` font-family by default. + 2. Use the user's configured `mono` font-feature-settings by default. + 3. Use the user's configured `mono` font-variation-settings by default. + 4. Correct the odd `em` font sizing in all browsers. */ code, @@ -107,7 +120,9 @@ samp, pre { font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */ - font-size: 1em; /* 2 */ + font-feature-settings: theme('fontFamily.mono[1].fontFeatureSettings', normal); /* 2 */ + font-variation-settings: theme('fontFamily.mono[1].fontVariationSettings', normal); /* 3 */ + font-size: 1em; /* 4 */ } /* @@ -162,9 +177,12 @@ select, textarea { font-family: inherit; /* 1 */ + font-feature-settings: inherit; /* 1 */ + font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ + letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ @@ -185,9 +203,9 @@ */ button, - [type='button'], - [type='reset'], - [type='submit'] { + input:where([type='button']), + input:where([type='reset']), + input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ @@ -299,6 +317,14 @@ padding: 0; } + /* + Reset default styling for dialogs. + */ + + dialog { + padding: 0; + } + /* Prevent resizing textareas horizontally by default. */ @@ -315,7 +341,7 @@ input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ - color: theme('colors.gray.500', #9ca3af); /* 2 */ + color: theme('colors.gray.400', #9ca3af); /* 2 */ } /* @@ -330,6 +356,7 @@ /* Make sure disabled buttons don't get the pointer cursor. */ + :disabled { cursor: default; } @@ -361,6 +388,12 @@ max-width: 100%; height: auto; } + + /* Make elements with the HTML hidden attribute stay hidden by default */ + + [hidden]:where(:not([hidden="until-found"])) { + display: none; + } } } @@ -453,7 +486,7 @@ } svg path { - stroke-width: inherit; - } + stroke-width: inherit; + } } } diff --git a/yarn.lock b/yarn.lock index f20d2c35353..5faeb09e595 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6516,17 +6516,10 @@ resolved "https://registry.yarnpkg.com/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz#9a759ce2cb8736a4c6a0cb93aeb740573a731974" integrity sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA== -"@tailwindcss/forms@^0.5.2": - version "0.5.2" - resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.2.tgz#4ef45f9916dcb37838cbe7fecdcc4ba7a7c2ab59" - integrity sha512-pSrFeJB6Bg1Mrg9CdQW3+hqZXAKsBrSG9MAfFLKy1pVA4Mb4W7C0k7mEhlmS2Dfo/otxrQOET7NJiJ9RrS563w== - dependencies: - mini-svg-data-uri "^1.2.3" - -"@tailwindcss/forms@^0.5.3": - version "0.5.3" - resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.3.tgz#e4d7989686cbcaf416c53f1523df5225332a86e7" - integrity sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q== +"@tailwindcss/forms@^0.5.9": + version "0.5.9" + resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.9.tgz#b495c12575d6eae5865b2cbd9876b26d89f16f61" + integrity sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg== dependencies: mini-svg-data-uri "^1.2.3" @@ -9683,16 +9676,7 @@ acorn-jsx@^5.3.2: resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937" integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ== -acorn-node@^1.8.2: - version "1.8.2" - resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8" - integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A== - dependencies: - acorn "^7.0.0" - acorn-walk "^7.0.0" - xtend "^4.0.2" - -acorn-walk@^7.0.0, acorn-walk@^7.1.1, acorn-walk@^7.2.0: +acorn-walk@^7.1.1, acorn-walk@^7.2.0: version "7.2.0" resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc" integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA== @@ -9712,7 +9696,7 @@ acorn@^6.0.7: resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f" integrity sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA== -acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.1: +acorn@^7.1.1, acorn@^7.4.1: version "7.4.1" resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== @@ -11471,6 +11455,13 @@ braces@^3.0.1, braces@^3.0.2, braces@~3.0.2: dependencies: fill-range "^7.0.1" +braces@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789" + integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA== + dependencies: + fill-range "^7.1.1" + brcast@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/brcast/-/brcast-2.0.2.tgz#2db16de44140e418dc37fab10beec0369e78dcef" @@ -12395,7 +12386,7 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4: +color-name@^1.0.0, color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== @@ -14056,11 +14047,6 @@ define-property@^2.0.2: is-descriptor "^1.0.2" isobject "^3.0.1" -defined@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" - integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM= - defu@^6.1.3: version "6.1.4" resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.4.tgz#4e0c9cf9ff68fe5f3d7f2765cc1a012dfdcb0479" @@ -14202,15 +14188,6 @@ detect-port@^1.3.0: address "^1.0.1" debug "4" -detective@^5.2.1: - version "5.2.1" - resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034" - integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw== - dependencies: - acorn-node "^1.8.2" - defined "^1.0.0" - minimist "^1.2.6" - devtools-protocol@0.0.1036444: version "0.0.1036444" resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.1036444.tgz#a570d3cdde61527c82f9b03919847b8ac7b1c2b9" @@ -16724,6 +16701,13 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +fill-range@^7.1.1: + version "7.1.1" + resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292" + integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg== + dependencies: + to-regex-range "^5.0.1" + finalhandler@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32" @@ -21173,7 +21157,7 @@ jiti@^1.20.0: resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d" integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q== -jiti@^1.21.0: +jiti@^1.21.6: version "1.21.6" resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268" integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w== @@ -21805,11 +21789,6 @@ lilconfig@^2.0.5: resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.5.tgz#19e57fd06ccc3848fd1891655b5a447092225b25" integrity sha512-xaYmXZtTHPAw5m+xLN8ab9C+3a8YmV3asNSPOATITbtwrfbwaLJj8h66H1WMIpALCkqsIzK3h7oQ+PdX+LQ9Eg== -lilconfig@^2.0.6: - version "2.0.6" - resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4" - integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg== - lilconfig@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52" @@ -21825,6 +21804,11 @@ lilconfig@^3.1.1: resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.1.tgz#9d8a246fa753106cfc205fd2d77042faca56e5e3" integrity sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ== +lilconfig@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4" + integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw== + line-height@^0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/line-height/-/line-height-0.3.1.tgz#4b1205edde182872a5efa3c8f620b3187a9c54c9" @@ -22590,6 +22574,14 @@ micromatch@^4.0.5: braces "^3.0.2" picomatch "^2.3.1" +micromatch@^4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202" + integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA== + dependencies: + braces "^3.0.3" + picomatch "^2.3.1" + mime-db@1.46.0, "mime-db@>= 1.43.0 < 2", mime-db@^1.28.0: version "1.46.0" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.46.0.tgz#6267748a7f799594de3cbc8cde91def349661cee" @@ -24686,7 +24678,7 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== -picocolors@^1.1.0: +picocolors@^1.1.0, picocolors@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== @@ -25054,7 +25046,7 @@ postcss-discard-overridden@^6.0.2: resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-6.0.2.tgz#4e9f9c62ecd2df46e8fdb44dc17e189776572e2d" integrity sha512-j87xzI4LUggC5zND7KdjsI25APtyMuynXZSujByMaav2roV6OZX+8AaCUcZSWqckZpjAjRyFDdpqybgjFO0HJQ== -postcss-import@^14.0.2, postcss-import@^14.1.0: +postcss-import@^14.0.2: version "14.1.0" resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0" integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw== @@ -25072,13 +25064,6 @@ postcss-import@^15.1.0: read-cache "^1.0.0" resolve "^1.1.7" -postcss-js@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00" - integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ== - dependencies: - camelcase-css "^2.0.1" - postcss-js@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2" @@ -25086,7 +25071,7 @@ postcss-js@^4.0.1: dependencies: camelcase-css "^2.0.1" -postcss-load-config@^3.0.0, postcss-load-config@^3.1.4: +postcss-load-config@^3.0.0: version "3.1.4" resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855" integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg== @@ -25094,7 +25079,7 @@ postcss-load-config@^3.0.0, postcss-load-config@^3.1.4: lilconfig "^2.0.5" yaml "^1.10.2" -postcss-load-config@^4.0.1: +postcss-load-config@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3" integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ== @@ -25411,14 +25396,7 @@ postcss-modules-values@^4.0.0: dependencies: icss-utils "^5.0.0" -postcss-nested@6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735" - integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w== - dependencies: - postcss-selector-parser "^6.0.10" - -postcss-nested@^6.0.1: +postcss-nested@^6.2.0: version "6.2.0" resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131" integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ== @@ -25823,14 +25801,6 @@ postcss-selector-parser@^3.0.0: indexes-of "^1.0.1" uniq "^1.0.1" -postcss-selector-parser@^6.0.10: - version "6.0.10" - resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d" - integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w== - dependencies: - cssesc "^3.0.0" - util-deprecate "^1.0.2" - postcss-selector-parser@^6.0.11: version "6.0.13" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b" @@ -25865,7 +25835,7 @@ postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9: cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-selector-parser@^6.1.1: +postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2: version "6.1.2" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de" integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg== @@ -25986,7 +25956,7 @@ postcss@^8.4.14: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^8.4.18, postcss@^8.4.19: +postcss@^8.4.19: version "8.4.19" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc" integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA== @@ -26004,15 +25974,6 @@ postcss@^8.4.21, postcss@^8.4.5: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^8.4.23, postcss@^8.4.47: - version "8.4.47" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365" - integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ== - dependencies: - nanoid "^3.3.7" - picocolors "^1.1.0" - source-map-js "^1.2.1" - postcss@^8.4.32, postcss@^8.4.33: version "8.4.35" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7" @@ -26022,6 +25983,15 @@ postcss@^8.4.32, postcss@^8.4.33: picocolors "^1.0.0" source-map-js "^1.0.2" +postcss@^8.4.47: + version "8.4.47" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365" + integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ== + dependencies: + nanoid "^3.3.7" + picocolors "^1.1.0" + source-map-js "^1.2.1" + prebuild-install@^5.3.3: version "5.3.6" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.6.tgz#7c225568d864c71d89d07f8796042733a3f54291" @@ -26532,11 +26502,6 @@ quick-lru@^4.0.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== -quick-lru@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" - integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== - raf@^3.4.0, raf@^3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" @@ -27872,7 +27837,7 @@ resolve@^1.22.1: path-parse "^1.0.7" supports-preserve-symlinks-flag "^1.0.0" -resolve@^1.22.2, resolve@^1.22.4, resolve@^1.22.8: +resolve@^1.22.4, resolve@^1.22.8: version "1.22.8" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d" integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw== @@ -29742,7 +29707,7 @@ stylis@^3.4.0, stylis@^3.5.0: resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== -sucrase@^3.32.0: +sucrase@^3.35.0: version "3.35.0" resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263" integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA== @@ -29954,62 +29919,33 @@ table@^6.8.1: string-width "^4.2.3" strip-ansi "^6.0.1" -tailwindcss@^3.2.4: - version "3.2.4" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250" - integrity sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ== - dependencies: - arg "^5.0.2" - chokidar "^3.5.3" - color-name "^1.1.4" - detective "^5.2.1" - didyoumean "^1.2.2" - dlv "^1.1.3" - fast-glob "^3.2.12" - glob-parent "^6.0.2" - is-glob "^4.0.3" - lilconfig "^2.0.6" - micromatch "^4.0.5" - normalize-path "^3.0.0" - object-hash "^3.0.0" - picocolors "^1.0.0" - postcss "^8.4.18" - postcss-import "^14.1.0" - postcss-js "^4.0.0" - postcss-load-config "^3.1.4" - postcss-nested "6.0.0" - postcss-selector-parser "^6.0.10" - postcss-value-parser "^4.2.0" - quick-lru "^5.1.1" - resolve "^1.22.1" - -tailwindcss@^3.4.14: - version "3.4.14" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.14.tgz#6dd23a7f54ec197b19159e91e3bb1e55e7aa73ac" - integrity sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA== +tailwindcss@^3.4.16: + version "3.4.16" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.16.tgz#35a7c3030844d6000fc271878db4096b6a8d2ec9" + integrity sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw== dependencies: "@alloc/quick-lru" "^5.2.0" arg "^5.0.2" - chokidar "^3.5.3" + chokidar "^3.6.0" didyoumean "^1.2.2" dlv "^1.1.3" - fast-glob "^3.3.0" + fast-glob "^3.3.2" glob-parent "^6.0.2" is-glob "^4.0.3" - jiti "^1.21.0" - lilconfig "^2.1.0" - micromatch "^4.0.5" + jiti "^1.21.6" + lilconfig "^3.1.3" + micromatch "^4.0.8" normalize-path "^3.0.0" object-hash "^3.0.0" - picocolors "^1.0.0" - postcss "^8.4.23" + picocolors "^1.1.1" + postcss "^8.4.47" postcss-import "^15.1.0" postcss-js "^4.0.1" - postcss-load-config "^4.0.1" - postcss-nested "^6.0.1" - postcss-selector-parser "^6.0.11" - resolve "^1.22.2" - sucrase "^3.32.0" + postcss-load-config "^4.0.2" + postcss-nested "^6.2.0" + postcss-selector-parser "^6.1.2" + resolve "^1.22.8" + sucrase "^3.35.0" tannin@^1.2.0: version "1.2.0" @@ -32156,7 +32092,7 @@ xmlchars@^2.2.0: resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb" integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw== -xtend@^4.0.0, xtend@^4.0.2, xtend@~4.0.1: +xtend@^4.0.0, xtend@~4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ== From 99329f8f19be818ee5b63f80bce4bb0aa3a40996 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Thu, 5 Dec 2024 14:19:18 +0100 Subject: [PATCH 02/36] Refactor Autocomplete element * introduce `onClear` function to have a distinction between `null` value or clear intent from the user * move to classes for easier overrides * fix the big empty space after the input * using start/end for better RTL support * add some boolean variables to try and make it a bit clearer to what is going on --- .../autocomplete/docs/with-nullable.md | 2 + .../src/elements/autocomplete/index.js | 61 ++++++++++++------- .../src/elements/autocomplete/stories.js | 1 + .../src/elements/autocomplete/style.css | 21 +++++-- 4 files changed, 60 insertions(+), 25 deletions(-) diff --git a/packages/ui-library/src/elements/autocomplete/docs/with-nullable.md b/packages/ui-library/src/elements/autocomplete/docs/with-nullable.md index 6e89535d998..20679edb430 100644 --- a/packages/ui-library/src/elements/autocomplete/docs/with-nullable.md +++ b/packages/ui-library/src/elements/autocomplete/docs/with-nullable.md @@ -1 +1,3 @@ Allow empty values with reset button `X` or deleting the option and clicking outside the field. +You should also provide the screen reader text `clearButtonScreenReaderText` for accessibility. +If not supplying an `onClear` function, it defaults to call `onChange` with the value `null`. diff --git a/packages/ui-library/src/elements/autocomplete/index.js b/packages/ui-library/src/elements/autocomplete/index.js index df6fab335f4..5fe11eebf01 100644 --- a/packages/ui-library/src/elements/autocomplete/index.js +++ b/packages/ui-library/src/elements/autocomplete/index.js @@ -6,6 +6,7 @@ import { constant } from "lodash"; import PropTypes from "prop-types"; import React, { forwardRef, Fragment, useCallback } from "react"; import { useSvgAria } from "../../hooks"; +import Button from "../button"; import { ValidationInput } from "../validation"; // Render Combobox.Button as a div always. @@ -52,27 +53,27 @@ const optionPropType = { Option.propTypes = optionPropType; /** - * - * @param {Function} onChange Change callback. + * @param {Function} onClear Clear callback. * @param {Object} svgAriaProps SVG aria props. * @param {string} screenReaderText Screen reader text. * @returns {JSX.Element} Select component. */ -const ClearSelection = ( { onChange, svgAriaProps, screenReaderText } ) => { - const clear = useCallback( ( e ) => { +const ClearSelection = ( { onClear, svgAriaProps, screenReaderText } ) => { + const handleClear = useCallback( ( e ) => { e.preventDefault(); - onChange( null ); - }, [ onChange ] ); + onClear( null ); + }, [ onClear ] ); - return ; + return ( + + ); }; ClearSelection.propTypes = { - onChange: PropTypes.func.isRequired, + onClear: PropTypes.func.isRequired, svgAriaProps: PropTypes.object.isRequired, screenReaderText: PropTypes.string.isRequired, }; @@ -87,10 +88,14 @@ ClearSelection.propTypes = { * @param {JSX.node} [labelSuffix] Optional label suffix. * @param {Function} onChange Change callback. * @param {Function} onQueryChange Query change callback. + * @param {Function} [onClear] Clear callback. * @param {Object} [validation] The validation state. * @param {string} [placeholder] Input placeholder. * @param {string} [className] CSS class. * @param {Object} [buttonProps] Any extra props for the button. + * @param {string} [clearButtonScreenReaderText] Screen reader text for the clear button. + * @param {boolean} [nullable=false] Allow nullable values. + * @param {boolean} [disabled=false] Disable the autocomplete. * @param {Object} [props] Any extra props. * @returns {JSX.Element} Select component. */ @@ -104,16 +109,21 @@ const Autocomplete = forwardRef( ( { labelSuffix, onChange, onQueryChange, + onClear, validation, placeholder, className, buttonProps, clearButtonScreenReaderText, + nullable, disabled, ...props }, ref ) => { const getDisplayValue = useCallback( constant( selectedLabel ), [ selectedLabel ] ); const svgAriaProps = useSvgAria(); + const showClearSelection = nullable && selectedLabel; + const showSelectorIcon = ! validation?.message; + const showActionContainer = showClearSelection || showSelectorIcon; return ( - { props.nullable && selectedLabel && - - } - { ! validation?.message && ( - + { showActionContainer && ( +
+ { showClearSelection && ( + <> + +
+ + ) } + { showSelectorIcon && ( + + ) } +
) } Date: Tue, 10 Dec 2024 09:06:45 +0100 Subject: [PATCH 03/36] Fix loading button RTL --- packages/ui-library/src/elements/button/index.js | 2 +- packages/ui-library/src/elements/button/style.css | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/ui-library/src/elements/button/index.js b/packages/ui-library/src/elements/button/index.js index 7ef4a25c9dc..42cb4e85724 100644 --- a/packages/ui-library/src/elements/button/index.js +++ b/packages/ui-library/src/elements/button/index.js @@ -57,7 +57,7 @@ const Button = forwardRef( ( { ) } { ...props } > - { isLoading && } + { isLoading && } { children } ) ); diff --git a/packages/ui-library/src/elements/button/style.css b/packages/ui-library/src/elements/button/style.css index f0002050a86..fc235957a80 100644 --- a/packages/ui-library/src/elements/button/style.css +++ b/packages/ui-library/src/elements/button/style.css @@ -137,5 +137,11 @@ focus:yst-ring-0; } + + .yst-button--loading { + @apply + yst--ms-1 + yst-me-2; + } } } From 857b77317ce6f951a3971259cf2c93587e1d4239 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 09:07:58 +0100 Subject: [PATCH 04/36] Fix checkbox RTL --- packages/ui-library/src/elements/checkbox/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-library/src/elements/checkbox/style.css b/packages/ui-library/src/elements/checkbox/style.css index 1b265961b21..bda4de3b2e5 100644 --- a/packages/ui-library/src/elements/checkbox/style.css +++ b/packages/ui-library/src/elements/checkbox/style.css @@ -25,7 +25,7 @@ } .yst-checkbox__label { - @apply yst-ml-3; + @apply yst-ms-3; } } } From 32bf5f614a3cd36e63b45a6365257ebdc77d11e6 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Thu, 5 Dec 2024 14:21:35 +0100 Subject: [PATCH 05/36] Fix validation input icon placement * top-2.5 is 0.625rem, meaning it is positioned slightly more to the top now * this makes it centered with the default input height --- packages/ui-library/src/elements/validation/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-library/src/elements/validation/style.css b/packages/ui-library/src/elements/validation/style.css index fcdcd10174c..66ebe0a7f53 100644 --- a/packages/ui-library/src/elements/validation/style.css +++ b/packages/ui-library/src/elements/validation/style.css @@ -76,7 +76,7 @@ } .yst-validation-input__icon { - @apply yst-absolute yst-top-[0.6875rem] yst-right-2.5 yst-w-5 yst-h-5; + @apply yst-absolute yst-top-2.5 yst-right-2.5 yst-w-5 yst-h-5; } /* Validation message */ From 86b5089fde322254b73639b7d0228219d632dd51 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 10:16:12 +0100 Subject: [PATCH 06/36] Fix file input RTL --- packages/ui-library/src/elements/file-input/style.css | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/ui-library/src/elements/file-input/style.css b/packages/ui-library/src/elements/file-input/style.css index d5bf1ded45b..f9bafe821e6 100644 --- a/packages/ui-library/src/elements/file-input/style.css +++ b/packages/ui-library/src/elements/file-input/style.css @@ -1,6 +1,6 @@ @layer components { - .yst-root { - .yst-file-input { + .yst-root { + .yst-file-input { @apply yst-w-full yst-px-6 @@ -73,15 +73,11 @@ } .yst-file-input__labels { - @apply yst-inline-block yst-font-normal yst-text-slate-800; + @apply yst-inline-flex yst-font-normal yst-text-slate-800; } .yst-file-input__select-label { @apply yst-rounded-md yst-font-medium; } - } - - [dir=rtl] .yst-root .yst-file-input__labels { - @apply yst-flex-row-reverse; } } From c5f3e6968817a6281b2cb12944bfc552a5f18364 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 10:19:26 +0100 Subject: [PATCH 07/36] Fix radio RTL --- packages/ui-library/src/elements/radio/style.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/ui-library/src/elements/radio/style.css b/packages/ui-library/src/elements/radio/style.css index 7c5e270ffc0..8063cfe7631 100644 --- a/packages/ui-library/src/elements/radio/style.css +++ b/packages/ui-library/src/elements/radio/style.css @@ -5,6 +5,7 @@ } /* Variants */ + .yst-radio--disabled { .yst-radio__input, .yst-radio__label, @@ -23,6 +24,7 @@ .yst-radio__input { @apply yst-sr-only; + &:checked + .yst-radio__content { .yst-radio__label { @apply yst-border-transparent yst-ring-2 yst-ring-primary-500; @@ -31,7 +33,7 @@ .yst-radio__check { @apply yst-visible; } - + } &:focus + .yst-radio__content { @@ -46,7 +48,7 @@ @apply yst-ring-offset-1 yst-ring-[3px]; } } - } + } } .yst-radio__content { @@ -58,7 +60,7 @@ yst-flex yst-h-14 yst-w-14 - yst-ml-0 + yst-ms-0 yst-justify-center yst-items-center yst-text-base @@ -78,7 +80,7 @@ yst-invisible yst-absolute yst-top-0.5 - yst-right-0.5 + yst-end-0.5 yst-h-5 yst-w-5 yst-text-primary-600; @@ -98,7 +100,7 @@ } .yst-radio__label { - @apply yst-ml-3; + @apply yst-ms-3; } } } From 522c3dd3817c35566763475db66bd67003be2c83 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 08:50:33 +0100 Subject: [PATCH 08/36] Fix select RTL --- packages/ui-library/src/elements/select/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-library/src/elements/select/style.css b/packages/ui-library/src/elements/select/style.css index b424c3260c0..452287cc707 100644 --- a/packages/ui-library/src/elements/select/style.css +++ b/packages/ui-library/src/elements/select/style.css @@ -18,7 +18,7 @@ yst-leading-6 yst-py-2 yst-px-3 - yst-text-left + yst-text-start yst-text-slate-800 yst-bg-white yst-ring-1 @@ -38,7 +38,7 @@ } .yst-select__button-icon { - @apply yst-absolute yst-top-2.5 yst-right-2.5 yst-text-slate-400 yst-pointer-events-none yst-w-5 yst-h-5; + @apply yst-absolute yst-top-2.5 yst-end-2.5 yst-text-slate-400 yst-pointer-events-none yst-w-5 yst-h-5; } .yst-select__options { From 20be8ec4cec3bb930074392fec67f49896d8c958 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 10:30:36 +0100 Subject: [PATCH 09/36] Fix skeleton loader story RTL --- packages/ui-library/src/elements/skeleton-loader/stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-library/src/elements/skeleton-loader/stories.js b/packages/ui-library/src/elements/skeleton-loader/stories.js index cc110a4480a..c3b002552d7 100644 --- a/packages/ui-library/src/elements/skeleton-loader/stories.js +++ b/packages/ui-library/src/elements/skeleton-loader/stories.js @@ -15,7 +15,7 @@ export const Factory = { export const Profile = { render: ( args ) => (
-
+
From 7d9ea1c32d8a1d7b4dbd27b8614a7f8df78285e3 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 10:37:39 +0100 Subject: [PATCH 10/36] Fix table RTL --- packages/ui-library/src/elements/table/index.js | 2 +- packages/ui-library/src/elements/table/style.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ui-library/src/elements/table/index.js b/packages/ui-library/src/elements/table/index.js index abd7517ad3b..bb13ef9ebc1 100644 --- a/packages/ui-library/src/elements/table/index.js +++ b/packages/ui-library/src/elements/table/index.js @@ -54,7 +54,7 @@ Row.propTypes = { */ const Header = ( { children, className = "", ...props } ) => ( { children } diff --git a/packages/ui-library/src/elements/table/style.css b/packages/ui-library/src/elements/table/style.css index 9f1f4b3719c..1885ffbaf45 100644 --- a/packages/ui-library/src/elements/table/style.css +++ b/packages/ui-library/src/elements/table/style.css @@ -5,11 +5,11 @@ } .yst-table-header { - @apply first:yst-rounded-tl-lg last:yst-rounded-tr-lg; + @apply first:yst-rounded-ss-lg last:yst-rounded-se-lg; } .yst-table-row:last-of-type .yst-table-cell { - @apply first:yst-rounded-bl-lg last:yst-rounded-br-lg; + @apply first:yst-rounded-es-lg last:yst-rounded-ee-lg; } } } From 1a1008828a8df4445564bacb9f1e6b7facb4f59b Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 11:20:52 +0100 Subject: [PATCH 11/36] Refactor tag input style * use rem instead of px * use Tailwind instead of CSS --- packages/ui-library/src/elements/tag-input/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ui-library/src/elements/tag-input/style.css b/packages/ui-library/src/elements/tag-input/style.css index b1a3f9128c2..70925b98fc3 100644 --- a/packages/ui-library/src/elements/tag-input/style.css +++ b/packages/ui-library/src/elements/tag-input/style.css @@ -54,10 +54,9 @@ } .yst-tag-input__tag { - min-height: 20px; - padding-inline-end: 0.125rem; - @apply + yst-min-h-[1.25rem] /* Badge is 1rem + 0.125rem top & bottom padding = 1.25rem */ + yst-pe-0.5 yst-gap-0.5 yst-cursor-pointer focus:yst-outline-none From 46482fb5e6e792730d2645651e6b4770b09c32cf Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 11:44:01 +0100 Subject: [PATCH 12/36] Fix toast description RTL * fix stylesheet whitespace --- .../ui-library/src/elements/toast/index.js | 2 +- .../ui-library/src/elements/toast/style.css | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/ui-library/src/elements/toast/index.js b/packages/ui-library/src/elements/toast/index.js index 07e0594eac9..424dd25ce01 100644 --- a/packages/ui-library/src/elements/toast/index.js +++ b/packages/ui-library/src/elements/toast/index.js @@ -58,7 +58,7 @@ const Description = ( { className = "", } ) => { return isArray( description ) ? ( -
    +
      { description.map( ( text, index ) => (
    • { text }
      • ) ) } diff --git a/packages/ui-library/src/elements/toast/style.css b/packages/ui-library/src/elements/toast/style.css index 189ff7ec3d9..cfb6d806df3 100644 --- a/packages/ui-library/src/elements/toast/style.css +++ b/packages/ui-library/src/elements/toast/style.css @@ -1,12 +1,13 @@ @layer components { - .yst-root { + .yst-root { - .yst-toast { - @apply + .yst-toast { + @apply yst-w-80 yst-max-w-full yst-overflow-y-auto - yst-p-4 yst-bg-white + yst-p-4 + yst-bg-white yst-shadow-lg yst-rounded-lg yst-ring-1 @@ -14,10 +15,10 @@ yst-ring-opacity-5 yst-z-20 yst-pointer-events-auto; - } + } - .yst-toast--large { - @apply yst-w-96; - } - } + .yst-toast--large { + @apply yst-w-96; + } + } } From 1738b8c7222601edc3d46270d43a5b9b2c8f03a7 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 11:59:50 +0100 Subject: [PATCH 13/36] Refactor toggle RTL * using modifier so it works too if the RTL is put ON the yst-root class --- packages/ui-library/src/elements/toggle/style.css | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/ui-library/src/elements/toggle/style.css b/packages/ui-library/src/elements/toggle/style.css index 04e4750cc5d..d30186f50df 100644 --- a/packages/ui-library/src/elements/toggle/style.css +++ b/packages/ui-library/src/elements/toggle/style.css @@ -26,7 +26,7 @@ @apply yst-bg-primary-500; .yst-toggle__handle { - @apply yst-translate-x-5; + @apply yst-translate-x-5 rtl:yst--translate-x-5; } } @@ -81,11 +81,4 @@ @apply yst-text-slate-500; } } - - /* RTL styles */ - [dir=rtl] .yst-root { - .yst-toggle--checked .yst-toggle__handle { - @apply yst--translate-x-5; - } - } } From 7e826650a20e7ff517c751264c13cf75764ce906 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 12:08:27 +0100 Subject: [PATCH 14/36] Fix tooltip RTL --- .../ui-library/src/elements/tooltip/style.css | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/ui-library/src/elements/tooltip/style.css b/packages/ui-library/src/elements/tooltip/style.css index 71c5f7af228..c5145dbd464 100644 --- a/packages/ui-library/src/elements/tooltip/style.css +++ b/packages/ui-library/src/elements/tooltip/style.css @@ -19,15 +19,16 @@ @apply yst--translate-x-1/2 rtl:yst-translate-x-1/2 yst--translate-y-full - yst-left-1/2 + yst-start-1/2 yst-top-0 yst--mt-3; /* Negative margin to move the tooltip up */ /* Style properties for the tooltip arrow */ + &::before { @apply yst-content-[''] yst-absolute - yst-left-1/2 + yst-start-1/2 yst-top-full /* Arrow positioned at the bottom of the tooltip */ yst--translate-x-1/2 rtl:yst-translate-x-1/2 @@ -43,15 +44,16 @@ @apply yst--translate-x-1/2 rtl:yst-translate-x-1/2 yst--translate-y-0 - yst-left-1/2 + yst-start-1/2 yst-top-full yst-mt-3; /* Style properties for the tooltip arrow */ + &::before { @apply yst-content-[''] yst-absolute - yst-left-1/2 + yst-start-1/2 yst-bottom-full /* Arrow positioned at the top of the tooltip */ yst--translate-x-1/2 rtl:yst-translate-x-1/2 @@ -65,43 +67,45 @@ .yst-tooltip--right { @apply yst--translate-x-0 yst--translate-y-1/2 - yst-left-full + yst-start-full yst-top-1/2 - yst-ml-3; + yst-ms-3; /* Style properties for the tooltip arrow */ + &::before { @apply yst-content-[''] yst-absolute - yst-right-full /* Arrow positioned at the left of the tooltip */ + yst-end-full /* Arrow positioned at the left of the tooltip */ yst-top-1/2 yst--translate-y-1/2 yst-border-8 - yst-border-l-transparent + yst-border-s-transparent yst-border-t-transparent yst-border-b-transparent - yst-border-r-gray-800; + yst-border-e-gray-800; } } .yst-tooltip--left { @apply yst--translate-y-1/2 - yst-right-full + yst-end-full yst-top-1/2 - yst-mr-3; + yst-me-3; /* Style properties for the tooltip arrow */ + &::before { @apply yst-content-[''] yst-absolute - yst-left-full /* Arrow positioned at the right of the tooltip */ + yst-start-full /* Arrow positioned at the right of the tooltip */ yst-top-1/2 yst--translate-y-1/2 yst-border-8 - yst-border-r-transparent + yst-border-e-transparent yst-border-t-transparent yst-border-b-transparent - yst-border-l-gray-800; + yst-border-s-gray-800; } } } From 8280e3cb39f9f78e302bc58aec4af3b48bfb43ca Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 08:59:48 +0100 Subject: [PATCH 15/36] Fix validation RTL --- packages/ui-library/src/elements/validation/style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/ui-library/src/elements/validation/style.css b/packages/ui-library/src/elements/validation/style.css index 66ebe0a7f53..58abb8e2598 100644 --- a/packages/ui-library/src/elements/validation/style.css +++ b/packages/ui-library/src/elements/validation/style.css @@ -32,7 +32,7 @@ .yst-validation-input--success { .yst-validation-input__input { @apply - yst-pr-10 + yst-pe-10 yst-ring-green-300 focus:yst-ring-green-500 focus-within:yst-ring-green-500; @@ -42,7 +42,7 @@ .yst-validation-input--info { .yst-validation-input__input { @apply - yst-pr-10 + yst-pe-10 yst-ring-blue-300 focus:yst-ring-blue-500 focus-within:yst-ring-blue-500; @@ -52,7 +52,7 @@ .yst-validation-input--warning { .yst-validation-input__input { @apply - yst-pr-10 + yst-pe-10 yst-ring-amber-300 focus:yst-ring-amber-500 focus-within:yst-ring-amber-500; @@ -62,7 +62,7 @@ .yst-validation-input--error { .yst-validation-input__input { @apply - yst-pr-10 + yst-pe-10 yst-ring-red-300 focus:yst-ring-red-500 focus-within:yst-ring-red-500; @@ -76,7 +76,7 @@ } .yst-validation-input__icon { - @apply yst-absolute yst-top-2.5 yst-right-2.5 yst-w-5 yst-h-5; + @apply yst-absolute yst-top-2.5 yst-end-2.5 yst-w-5 yst-h-5; } /* Validation message */ From a5c7fc36eee43ec018170aa99632f0c4c678e51e Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 12:33:48 +0100 Subject: [PATCH 16/36] Fix storybook preview HTML dir The portals rely on the HTML dir being accurate. This useEffect updates it. Removing the need for the dir on the Root --- packages/ui-library/.storybook/preview.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/ui-library/.storybook/preview.js b/packages/ui-library/.storybook/preview.js index 0c3cccfdc19..01ed60faa4a 100644 --- a/packages/ui-library/.storybook/preview.js +++ b/packages/ui-library/.storybook/preview.js @@ -1,3 +1,4 @@ +import { useEffect } from "react"; import Root from "../src/components/root"; import "./style.css"; @@ -72,11 +73,17 @@ const preview = { }, }, decorators: [ - ( Story, context ) => ( - - - - ), + ( Story, context ) => { + useEffect( () => { + document.documentElement.setAttribute( "dir", context.globals.dir ); + }, [ context.globals.dir ] ); + + return ( + + + + ); + }, ], }; From 6bfbc43bb7841c2554a487897563d6c2a5e851c2 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 12:20:02 +0100 Subject: [PATCH 17/36] Fix feature upsell RTL * plus no more negative margin without card text --- packages/ui-library/src/components/feature-upsell/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-library/src/components/feature-upsell/index.js b/packages/ui-library/src/components/feature-upsell/index.js index a760dee368b..4f1f2abad3f 100644 --- a/packages/ui-library/src/components/feature-upsell/index.js +++ b/packages/ui-library/src/components/feature-upsell/index.js @@ -45,7 +45,7 @@ const FeatureUpsell = ( { children, shouldUpsell = true, className = "", variant rel="noopener" { ...cardProps } > - + { cardText }
From b36c1a144eeae6ce8dfde23a0a461753006a3f29 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 10:30:24 +0100 Subject: [PATCH 18/36] Fix file import RTL --- packages/ui-library/src/components/file-import/stories.js | 2 +- packages/ui-library/src/components/file-import/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-library/src/components/file-import/stories.js b/packages/ui-library/src/components/file-import/stories.js index 044995e2a82..98f69a5021b 100644 --- a/packages/ui-library/src/components/file-import/stories.js +++ b/packages/ui-library/src/components/file-import/stories.js @@ -167,7 +167,7 @@ export const Success = { SEO data successfully imported! However, there were some slight problems with the following data: -
    +
    • This went wrong
    • This also went wrong
    diff --git a/packages/ui-library/src/components/file-import/style.css b/packages/ui-library/src/components/file-import/style.css index dd3b114faf7..3385bdfe9e6 100644 --- a/packages/ui-library/src/components/file-import/style.css +++ b/packages/ui-library/src/components/file-import/style.css @@ -15,7 +15,7 @@ } .yst-file-import__feedback-header { - @apply yst-flex yst-items-start yst-space-x-4; + @apply yst-flex yst-items-start yst-space-x-4 rtl:yst-space-x-reverse; } .yst-file-import__feedback-figure { From e7e44ca241ef919070112aca76b1f9488d8cf814 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 12:34:30 +0100 Subject: [PATCH 19/36] Fix modal close RTL --- packages/ui-library/src/components/modal/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-library/src/components/modal/style.css b/packages/ui-library/src/components/modal/style.css index 6fd1114f2be..84ced92210d 100644 --- a/packages/ui-library/src/components/modal/style.css +++ b/packages/ui-library/src/components/modal/style.css @@ -33,7 +33,7 @@ } .yst-modal__close { - @apply yst-block yst-absolute yst-top-4 yst-right-4; + @apply yst-block yst-absolute yst-top-4 yst-end-4; } .yst-modal__close-button { From 564d61c281c6f6d774c1450b447c592e36ddcc43 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Mon, 9 Dec 2024 16:35:56 +0100 Subject: [PATCH 20/36] Fix notifications bottom-left in RTL E.g. more like bottom-start in the newer language --- .../src/components/notifications/style.css | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/ui-library/src/components/notifications/style.css b/packages/ui-library/src/components/notifications/style.css index 4da911c1f03..44716e36c81 100644 --- a/packages/ui-library/src/components/notifications/style.css +++ b/packages/ui-library/src/components/notifications/style.css @@ -1,30 +1,30 @@ @layer components { - .yst-root { + .yst-root { - .yst-notifications { - max-width: calc(100vw - 4rem); /* 100vw - top and left of 2rem = 4rem. */ - max-height: calc(100vh - 4rem); /* 100vh - ( top of 2rem * 2 ) = 4rem. */ - @apply yst-fixed yst-w-full yst-z-20 yst-pointer-events-none yst-flex yst-flex-col yst-space-y-4; - } + .yst-notifications { + max-width: calc(100vw - 4rem); /* 100vw - top and left of 2rem = 4rem. */ + max-height: calc(100vh - 4rem); /* 100vh - ( top of 2rem * 2 ) = 4rem. */ + @apply yst-fixed yst-w-full yst-z-20 yst-pointer-events-none yst-flex yst-flex-col yst-space-y-4; + } - .yst-notifications--bottom-center { - @apply yst-bottom-8 yst-items-center; - } + .yst-notifications--bottom-center { + @apply yst-bottom-8 yst-items-center; + } - .yst-notifications--bottom-left { - @apply yst-bottom-8 yst-left-8; - } + .yst-notifications--bottom-left { + @apply yst-bottom-8 yst-start-8; + } - .yst-notifications--top-center { - @apply yst-top-8 yst-items-center; - } + .yst-notifications--top-center { + @apply yst-top-8 yst-items-center; + } .yst-notification--large { @apply yst-w-96; } - .yst-notification__icon { - @apply yst-w-5 yst-h-5; - } - } + .yst-notification__icon { + @apply yst-w-5 yst-h-5; + } + } } From 29a31ca9735e8003c957147db42ea92d005f2920 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Mon, 9 Dec 2024 16:48:00 +0100 Subject: [PATCH 21/36] Fix pagination RTL * border radius * spacing (border overlap) --- packages/ui-library/src/components/pagination/index.js | 4 ++-- packages/ui-library/src/components/pagination/style.css | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/ui-library/src/components/pagination/index.js b/packages/ui-library/src/components/pagination/index.js index 64008a56e1c..6aceb546546 100644 --- a/packages/ui-library/src/components/pagination/index.js +++ b/packages/ui-library/src/components/pagination/index.js @@ -45,7 +45,7 @@ const Pagination = ( { return (
@@ -46,7 +46,7 @@ const ScoreListItemContent = ( { score } ) => ( - { score.amount } + { score.amount } ); @@ -82,7 +82,7 @@ const ScoreListItem = ( { score, idSuffix } ) => {
  • { score.links.view && ( - + ) }
    • ); From f7b2ff41851fd9629b2392a96408b76a4e6aa2be Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 10 Dec 2024 16:37:06 +0100 Subject: [PATCH 29/36] Fix FTC RTL --- .../first-time-configuration-steps.js | 8 ++++---- .../tailwind-components/base/alert.js | 2 +- .../tailwind-components/base/combo-box.js | 10 +++++----- .../tailwind-components/base/image-select.js | 2 +- .../tailwind-components/base/single-select.js | 8 ++++---- .../tailwind-components/base/text-input.js | 4 ++-- .../configuration-stepper-buttons.js | 2 +- .../tailwind-components/helpers/index.js | 2 +- .../tailwind-components/step-header.js | 2 +- .../tailwind-components/stepper.js | 6 +++--- .../tailwind-components/steps/finish/finish-step.js | 4 ++-- .../steps/social-profiles/social-field-array.js | 2 +- 12 files changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/js/src/first-time-configuration/first-time-configuration-steps.js b/packages/js/src/first-time-configuration/first-time-configuration-steps.js index 3468f1150e8..89c631cd9a9 100644 --- a/packages/js/src/first-time-configuration/first-time-configuration-steps.js +++ b/packages/js/src/first-time-configuration/first-time-configuration-steps.js @@ -473,7 +473,7 @@ export default function FirstTimeConfigurationSteps() { stepId={ STEPS.optimizeSeoData } beforeGo={ beforeEditing } isVisible={ showEditButton } - additionalClasses={ "yst-ml-auto" } + additionalClasses="yst-ms-auto" > { __( "Edit", "wordpress-seo" ) } @@ -502,7 +502,7 @@ export default function FirstTimeConfigurationSteps() { stepId={ STEPS.siteRepresentation } beforeGo={ beforeEditing } isVisible={ showEditButton } - additionalClasses={ "yst-ml-auto" } + additionalClasses="yst-ms-auto" > { __( "Edit", "wordpress-seo" ) } @@ -532,7 +532,7 @@ export default function FirstTimeConfigurationSteps() { stepId={ STEPS.socialProfiles } beforeGo={ beforeEditing } isVisible={ showEditButton } - additionalClasses={ "yst-ml-auto" } + additionalClasses="yst-ms-auto" > { __( "Edit", "wordpress-seo" ) } @@ -557,7 +557,7 @@ export default function FirstTimeConfigurationSteps() { stepId={ STEPS.personalPreferences } beforeGo={ beforeEditing } isVisible={ showEditButton } - additionalClasses={ "yst-ml-auto" } + additionalClasses="yst-ms-auto" > { __( "Edit", "wordpress-seo" ) } diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/alert.js b/packages/js/src/first-time-configuration/tailwind-components/base/alert.js index d5b37538d39..68342fb1bbe 100644 --- a/packages/js/src/first-time-configuration/tailwind-components/base/alert.js +++ b/packages/js/src/first-time-configuration/tailwind-components/base/alert.js @@ -42,7 +42,7 @@ export default function Alert( { type, children, className } ) { return (
    { icon } -
    +
    { children }
    diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js b/packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js index 9f27e34ef01..7367e353c7f 100644 --- a/packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js +++ b/packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js @@ -90,22 +90,22 @@ export default function YoastComboBox( { id, value, label, onChange, onQueryChan - { ( filteredOptions.length > 0 ) && ( - { isLoading &&
    { __( "Loading...", "wordpress-seo" ) }
    } + { isLoading &&
    { __( "Loading...", "wordpress-seo" ) }
    } { filteredOptions.map( ( option ) => ( { option.label } { ( selected || value.value === option.value ) && ( diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/image-select.js b/packages/js/src/first-time-configuration/tailwind-components/base/image-select.js index 862bfa2db76..bd7d461254a 100644 --- a/packages/js/src/first-time-configuration/tailwind-components/base/image-select.js +++ b/packages/js/src/first-time-configuration/tailwind-components/base/image-select.js @@ -79,7 +79,7 @@ export default function ImageSelect( {

    - + { addButtonChildren }

    From 2ae5056f3f6ee36ebe5533b496152a13523269cc Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Wed, 11 Dec 2024 16:27:12 +0100 Subject: [PATCH 30/36] Fix general page RTL * collapsible (alerts) * notices close * notices content padding/indent --- packages/js/src/general/components/collapsible.js | 2 +- packages/js/src/general/components/notice.js | 4 ++-- .../components/__snapshots__/notifications.test.js.snap | 2 +- .../general/components/__snapshots__/problems.test.js.snap | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/js/src/general/components/collapsible.js b/packages/js/src/general/components/collapsible.js index 535e4c23b85..7fbcf846989 100644 --- a/packages/js/src/general/components/collapsible.js +++ b/packages/js/src/general/components/collapsible.js @@ -13,7 +13,7 @@ export const Collapsible = ( { label, children } ) => { { ( { open } ) => (
    - +
    { label }
    { title &&
    } { isDismissable && -
    +
    } diff --git a/packages/js/src/settings/routes/site-representation.js b/packages/js/src/settings/routes/site-representation.js index d8a707d9597..6bf3bbd540f 100644 --- a/packages/js/src/settings/routes/site-representation.js +++ b/packages/js/src/settings/routes/site-representation.js @@ -262,7 +262,7 @@ const SiteRepresentation = () => { id="input-wpseo_social-mastodon_url" label={ __( "Mastodon", "wordpress-seo" ) } placeholder={ __( "E.g. https://mastodon.social/@yoast", "wordpress-seo" ) } - labelSuffix={ isPremium && Premium } + labelSuffix={ isPremium && Premium } isDummy={ ! isPremium } description={ <> { __( "Get your site verified in your Mastodon profile.", "wordpress-seo" ) } @@ -314,7 +314,7 @@ const SiteRepresentation = () => { ) ) } { /* eslint-disable-next-line react/jsx-no-bind */ } @@ -325,7 +325,7 @@ const SiteRepresentation = () => { { __( "Additional organization info", "wordpress-seo" ) } - { isPremium && Premium } + { isPremium && Premium } } description={ __( "Enrich your organization's profile by providing more in-depth information. The more details you share, the better Google understands your website.", "wordpress-seo" ) } > @@ -411,7 +411,7 @@ const SiteRepresentation = () => { { __( "Organization identifiers", "wordpress-seo" ) } - { isPremium && Premium } + { isPremium && Premium } } description={ __( "Please tell us more about your organization’s identifiers. This information will help Google to display accurate and helpful details about your organization.", "wordpress-seo" ) } > diff --git a/packages/js/src/settings/routes/templates/post-type.js b/packages/js/src/settings/routes/templates/post-type.js index 5cd1c70355e..c09fde9d45e 100644 --- a/packages/js/src/settings/routes/templates/post-type.js +++ b/packages/js/src/settings/routes/templates/post-type.js @@ -320,7 +320,7 @@ const PostType = ( { name, label, singularLabel, hasArchive, hasSchemaArticleTyp name={ `wpseo_titles.page-analyse-extra-${ name }` } id={ `input-wpseo_titles-page-analyse-extra-${ name }` } label={ __( "Add custom fields to page analysis", "wordpress-seo" ) } - labelSuffix={ isPremium && Premium } + labelSuffix={ isPremium && Premium } description={ <> { customFieldsDescription }
    diff --git a/packages/js/src/shared-admin/components/premium-upsell-list.js b/packages/js/src/shared-admin/components/premium-upsell-list.js index ecc231bfa3e..fcc04ed9a43 100644 --- a/packages/js/src/shared-admin/components/premium-upsell-list.js +++ b/packages/js/src/shared-admin/components/premium-upsell-list.js @@ -31,7 +31,7 @@ export const PremiumUpsellList = ( { premiumLink, premiumUpsellConfig, isPromoti "Yoast SEO Premium" ) } -
      +
        { getPremiumBenefits().map( ( benefit, index ) => (
      • { createInterpolateElement( benefit, { strong: } ) } diff --git a/packages/js/src/shared-admin/components/unsaved-changes-modal.js b/packages/js/src/shared-admin/components/unsaved-changes-modal.js index e410118f836..40d5dc2cc3e 100644 --- a/packages/js/src/shared-admin/components/unsaved-changes-modal.js +++ b/packages/js/src/shared-admin/components/unsaved-changes-modal.js @@ -28,7 +28,7 @@ export const UnsavedChangesModal = ( { isOpen, onClose = noop, onDiscard = noop, >
    -
    +
    { title } diff --git a/packages/js/tests/settings/__snapshots__/search.test.js.snap b/packages/js/tests/settings/__snapshots__/search.test.js.snap index 1070ec1d4d6..90e307628a2 100644 --- a/packages/js/tests/settings/__snapshots__/search.test.js.snap +++ b/packages/js/tests/settings/__snapshots__/search.test.js.snap @@ -54,7 +54,7 @@ exports[`Search modal should open 1`] = ` > ⌘K From 6a223e397a039d62b9710126825947321a01d524 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Mon, 16 Dec 2024 16:50:40 +0100 Subject: [PATCH 33/36] Fix editor --- packages/js/src/components/MetaboxButton.js | 7 +++++-- packages/js/src/components/WooCommerceUpsell.js | 2 +- .../js/src/components/contentAnalysis/Results.js | 2 +- .../modals/InternalLinkingSuggestionsUpsell.js | 2 +- packages/js/src/components/modals/KeywordUpsell.js | 2 +- .../src/components/modals/PremiumSEOAnalysisModal.js | 2 +- .../components/ai-fix-assessments-upsell.js | 4 ++-- .../ai-generate-titles-and-descriptions-upsell.js | 4 ++-- .../js/src/shared-admin/components/video-flow.js | 2 +- .../ai-fix-assessments-upsell.test.js.snap | 6 +++--- ...erate-titles-and-descriptions-upsell.test.js.snap | 12 ++++++------ 11 files changed, 24 insertions(+), 21 deletions(-) diff --git a/packages/js/src/components/MetaboxButton.js b/packages/js/src/components/MetaboxButton.js index 8be24fc7a7f..02de58d090b 100644 --- a/packages/js/src/components/MetaboxButton.js +++ b/packages/js/src/components/MetaboxButton.js @@ -12,7 +12,8 @@ import PropTypes from "prop-types"; const MetaboxButtonText = ( { className, ...props } ) => ( (
    @@ -92,7 +92,7 @@ export const AiFixAssessmentsUpsell = ( { target="_blank" ref={ initialFocus } > - + { upsellLabel } { diff --git a/packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js b/packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js index fe44297ea44..e832d05525b 100644 --- a/packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js +++ b/packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js @@ -50,7 +50,7 @@ export const AiGenerateTitlesAndDescriptionsUpsell = ( { thumbnail={ thumbnail } wistiaEmbedPermission={ wistiaEmbedPermission } /> - Beta + Beta
    @@ -105,7 +105,7 @@ export const AiGenerateTitlesAndDescriptionsUpsell = ( { target="_blank" ref={ initialFocus } > - + { upsellLabel } { diff --git a/packages/js/src/shared-admin/components/video-flow.js b/packages/js/src/shared-admin/components/video-flow.js index 60130b356ff..18f93958a1c 100644 --- a/packages/js/src/shared-admin/components/video-flow.js +++ b/packages/js/src/shared-admin/components/video-flow.js @@ -91,7 +91,7 @@ export const VideoFlow = ( { videoId, thumbnail, wistiaEmbedPermission } ) => {
    ) } { ( wistiaEmbedPermission.value && videoFlow === VIDEO_FLOW.isPlaying ) && ( -
    +
    { videoId === null && } { videoId !== null &&
    }
    diff --git a/packages/js/tests/shared-admin/components/__snapshots__/ai-fix-assessments-upsell.test.js.snap b/packages/js/tests/shared-admin/components/__snapshots__/ai-fix-assessments-upsell.test.js.snap index e8ba1f077ae..1d6ecc4acf9 100644 --- a/packages/js/tests/shared-admin/components/__snapshots__/ai-fix-assessments-upsell.test.js.snap +++ b/packages/js/tests/shared-admin/components/__snapshots__/ai-fix-assessments-upsell.test.js.snap @@ -12,7 +12,7 @@ exports[`AiFixAssessmentsUpsell renders the component correctly 1`] = ` class="yst-relative yst-w-full yst-h-0 yst-pt-[56.25%] yst-overflow-hidden yst-rounded-md yst-drop-shadow-md yst-bg-white" >
    Beta @@ -93,7 +93,7 @@ exports[`AiFixAssessmentsUpsell renders the component correctly 1`] = ` >
    Beta @@ -91,7 +91,7 @@ exports[`AiGenerateTitlesAndDescriptionsUpsell renders the component correctly f >
    Beta @@ -213,7 +213,7 @@ exports[`AiGenerateTitlesAndDescriptionsUpsell renders the component correctly f >
    @@ -103,7 +103,7 @@ export const AlgoliaIntegration = ( { __( "(Opens in a new browser tab)", "wordpress-seo" ) } - + }

    @@ -133,7 +133,7 @@ export const AlgoliaIntegration = ( { target="_blank" > { __( "Unlock with Premium", "wordpress-seo" ) } diff --git a/packages/js/src/integrations-page/simple-integration.js b/packages/js/src/integrations-page/simple-integration.js index fda85bd9a7c..c62850ad159 100644 --- a/packages/js/src/integrations-page/simple-integration.js +++ b/packages/js/src/integrations-page/simple-integration.js @@ -34,7 +34,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => { } - { ( integration.isNew ) && { __( "New", "wordpress-seo" ) } } + { ( integration.isNew ) && { __( "New", "wordpress-seo" ) } }
    @@ -47,7 +47,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => { return (
  • { usp }
    • @@ -66,7 +66,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => { __( "(Opens in a new browser tab)", "wordpress-seo" ) } - + }
    @@ -83,7 +83,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => { target="_blank" > { __( "Unlock with Premium", "wordpress-seo" ) } diff --git a/packages/js/src/integrations-page/toggleable-integration.js b/packages/js/src/integrations-page/toggleable-integration.js index b8503933e0d..ded8eb9dca3 100644 --- a/packages/js/src/integrations-page/toggleable-integration.js +++ b/packages/js/src/integrations-page/toggleable-integration.js @@ -79,8 +79,8 @@ export const ToggleableIntegration = ( { } - { ( ! isNetworkControlEnabled && isMultisiteAvailable ) && { __( "Network Disabled", "wordpress-seo" ) } } - { ( isNetworkControlEnabled && integration.isNew ) && { __( "New", "wordpress-seo" ) } } + { ( ! isNetworkControlEnabled && isMultisiteAvailable ) && { __( "Network Disabled", "wordpress-seo" ) } } + { ( isNetworkControlEnabled && integration.isNew ) && { __( "New", "wordpress-seo" ) } }
    @@ -100,7 +100,7 @@ export const ToggleableIntegration = ( { __( "(Opens in a new browser tab)", "wordpress-seo" ) } - + }

    @@ -122,7 +122,7 @@ export const ToggleableIntegration = ( { target="_blank" > { __( "Unlock with Premium", "wordpress-seo" ) } diff --git a/packages/js/src/integrations-page/woocommerce-integration.js b/packages/js/src/integrations-page/woocommerce-integration.js index 1b4dadee99e..7f99f3551aa 100644 --- a/packages/js/src/integrations-page/woocommerce-integration.js +++ b/packages/js/src/integrations-page/woocommerce-integration.js @@ -75,7 +75,7 @@ export const WoocommerceIntegration = ( { target="_blank" > { sprintf( From 8a479d77a5e726da0410d90aeffe7801c9e6338a Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 17 Dec 2024 14:31:34 +0100 Subject: [PATCH 35/36] Fix support page RTL --- packages/js/src/support/app.js | 10 +++++----- packages/js/src/support/components/resource-card.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/js/src/support/app.js b/packages/js/src/support/app.js index 32e18b7ef7b..dfdb72cf9ae 100644 --- a/packages/js/src/support/app.js +++ b/packages/js/src/support/app.js @@ -83,7 +83,7 @@ export const App = () => { return (
    -
    +
    @@ -113,7 +113,7 @@ export const App = () => { target="_blank" > { title } - + @@ -210,7 +210,7 @@ export const App = () => { { ...premiumUpsellConfig } >
    -
    +

    { __( "Our support team is here to answer any questions you may have. Fill out the (pop-up) contact form, and we'll get back to you as soon as possible!", "wordpress-seo" ) }

    { { ! isPremium && -
    +
    - + ); From 9a5f5e6cf9386ecde5ed59e3f14e51de119f09c4 Mon Sep 17 00:00:00 2001 From: Igor <35524806+igorschoester@users.noreply.github.com> Date: Tue, 24 Dec 2024 13:25:00 +0100 Subject: [PATCH 36/36] Pagination: always direction LTR Due to numbers being LTR * enforce direction in CS * remove RTL exceptions * wrapping text in a element, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo --- packages/ui-library/src/components/pagination/display-text.js | 4 ++-- packages/ui-library/src/components/pagination/index.js | 4 ++-- packages/ui-library/src/components/pagination/style.css | 4 +++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/ui-library/src/components/pagination/display-text.js b/packages/ui-library/src/components/pagination/display-text.js index f9a56e523e6..b99033c61a3 100644 --- a/packages/ui-library/src/components/pagination/display-text.js +++ b/packages/ui-library/src/components/pagination/display-text.js @@ -8,9 +8,9 @@ import React from "react"; * @returns {JSX.Element} The element. */ const DisplayText = ( { current, total } ) => ( -
    + { current } / { total } -
    +     ); DisplayText.displayName = "Pagination.DisplayText"; diff --git a/packages/ui-library/src/components/pagination/index.js b/packages/ui-library/src/components/pagination/index.js index 6aceb546546..7414379e28f 100644 --- a/packages/ui-library/src/components/pagination/index.js +++ b/packages/ui-library/src/components/pagination/index.js @@ -47,7 +47,7 @@ const Pagination = ( { ); diff --git a/packages/ui-library/src/components/pagination/style.css b/packages/ui-library/src/components/pagination/style.css index c6a5a075aa8..7975ea88018 100644 --- a/packages/ui-library/src/components/pagination/style.css +++ b/packages/ui-library/src/components/pagination/style.css @@ -1,11 +1,13 @@ @layer components { .yst-root { .yst-pagination { + /* Override direction to be LTR due to this component always being numbers. */ + direction: ltr; + @apply yst-isolate yst-inline-flex yst--space-x-px - rtl:yst-space-x-reverse yst-rounded-md yst-shadow-sm; }