feat: release O3 form base with Formfields (#1783)

feat: release O3 form base with Formfields
Financial-Times · Aug 20, 2024 · 679bae5 · 679bae5
1 parent eb336e9
commit 679bae5
Show file tree

Hide file tree

Showing 32 changed files with 664 additions and 46 deletions.
diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -124,6 +124,8 @@ o3-button:
   - components/o3-button/**/*
 o3-editorial-typography:
   - components/o3-editorial-typography/**/*
+o3-form:
+  - components/o3-form/**/*
 o3-foundation:
   - components/o3-foundation/**/*
 o3-tooltip:

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -127,6 +127,8 @@ jobs:
             - 'components/o3-button/**'
           components/o3-editorial-typography:
             - 'components/o3-editorial-typography/**'
+          components/o3-form:
+            - 'components/o3-form/**'
           components/o3-foundation:
             - 'components/o3-foundation/**'
           components/o3-tooltip:

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -53,6 +53,7 @@
 	"components/o-visual-effects": "4.2.2",
 	"components/o3-button": "1.1.6",
 	"components/o3-editorial-typography": "1.2.2",
+	"components/o3-form": "0.0.1",
 	"components/o3-foundation": "1.3.0",
 	"components/o3-tooltip": "1.0.6",
 	"components/o3-typography": "1.0.4",

diff --git a/apps/dictionary/tokens/$metadata.json b/apps/dictionary/tokens/$metadata.json
@@ -42,6 +42,7 @@
     "whitelabel/components/o3-tooltip",
     "whitelabel/components/o3-typography",
     "whitelabel/components/o3-editorial-typography",
+    "whitelabel/whitelabel",
     "utility-tokens",
     "icons/icons"
   ]

diff --git a/apps/dictionary/tokens/$themes.json b/apps/dictionary/tokens/$themes.json
@@ -503,7 +503,14 @@
   {
     "id": "67a1e4f5cdc0ed496798cb25e22424a9dc9a7127",
     "name": "whitelabel",
-    "$figmaStyleReferences": {},
+    "$figmaStyleReferences": {
+      "o3.focus.use-case.ring.inner": "S:62052b3800ff36737ae9271a4134b1943b8c35f6,",
+      "o3.focus.use-case.ring.outer": "S:b583c32e6f2351958e90288cdd4750f2f4cb2688,",
+      "o3.focus.use-case.ring.inverse.inner": "S:0fc39e4aba340b2869a41abef74dabb143606122,",
+      "o3.focus.use-case.ring.inverse.outer": "S:9fd473327bb6989acfa43216a92d9b4327ee3851,",
+      "o3.focus.use-case.outline.color": "S:260a19bfb0bea5b7e892a38cc9e2bf16460c8486,",
+      "o3.focus.use-case.outline.inverse.color": "S:16c14e0d2b7459d25f8fd187b3ab4f3d83875aca,"
+    },
     "selectedTokenSets": {
       "utility-tokens": "enabled",
       "whitelabel/base/color": "enabled",
@@ -516,52 +523,114 @@
       "whitelabel/components/o3-typography": "source",
       "whitelabel/components/o3-editorial-typography": "source"
     },
-    "$figmaCollectionId": "VariableCollectionId:6510:3570",
-    "$figmaModeId": "6510:3",
+    "$figmaCollectionId": "VariableCollectionId:4842:355",
+    "$figmaModeId": "4842:3",
     "$figmaVariableReferences": {
-      "DO-NOT-USE": "6058c46435d2ba8ef481faa700bf191c7b031653",
-      "o3.color.use-case.link.text.@": "c12bbcfb5e4e269878eb5d6d2e469e6b6719c402",
-      "o3.color.use-case.link.text.hover": "2699ebd697f030b184d235f2b82071facad7f2fb",
-      "o3.color.use-case.link.underline.@": "36d285adc448e4ed13299fbcbc8f34727d71a6c1",
-      "o3.color.use-case.link.underline.hover": "1f71c8bee0a4da90ed5df256f946991e7e22a3e2",
-      "o3.color.use-case.link-inverse.text.@": "0662cb7d814518cd2c2f0558db30a5ae8b39a12c",
-      "o3.color.use-case.link-inverse.text.hover": "d55295d0875b71987e4eb2cbc0204ca6ad576ea1",
-      "o3.color.use-case.link-inverse.underline.@": "aaef12e98ba8d590e1427d8302506bcd296fe8e8",
-      "o3.color.use-case.link-inverse.underline.hover": "f31b4a45bd2acefb854e4156d4dfff29057a639f",
-      "o3.color.use-case.page.background": "8e62189c5dfca938d28f4a14f3f894735b912c9b",
-      "o3.color.use-case.page-inverse.background": "66a330ec5df1fa56b1490bb818ebed648db6e402",
-      "o3.color.use-case.body.text": "857fe7025dc151db60501dd7e0e22d8e3521651d",
-      "o3.color.use-case.body-inverse.text": "be7965764cb7e084069640d8e199f40da91bbbde",
-      "o3.color.use-case.muted.text": "99cd278334ea1ef5408153f9cff06caaa2d78ed9",
-      "o3.color.use-case.muted-inverse.text": "1fb12659c3f03c3ee142f5d2a74d3a6665bf3b7c",
-      "o3.color.use-case.heading.text": "3835a1c23d59b27a8dd13ccb97a2666639d31717",
-      "o3.color.use-case.heading-inverse.text": "19598ec26086415c018be19e6d1b58206819fdb8",
-      "o3.color.palette.black": "41fd55a138d3872e6ddf37091baab086951a7644",
-      "o3.color.palette.white": "3489abe0ec0e1058ee5eb9208378c5a07c91f9a5",
-      "o3.color.palette.jade": "16a27f45c99d87ad7ae4ad10814612551d8c4c78",
-      "o3.color.palette.crimson": "b9e4591ee0b09f939582f852ead5e17c807356c1",
-      "o3.color.palette.black-5": "69750b49a6f311f86c145f8e52aa84d6aa070a53",
-      "o3.color.palette.black-10": "075a7a4b0f02061b1ad6dbd784b454df690226de",
-      "o3.color.palette.black-20": "1a787c5d6473bec362a99f36a70f4625eccf83e8",
-      "o3.color.palette.black-30": "d917859b5f06b0fd6519040a65cf0fffae5e1240",
-      "o3.color.palette.black-40": "64f73d3ec7cc72ac4e24ff735e4a2b465e3ac0c8",
-      "o3.color.palette.black-50": "7d0fea09fecd489f6337eb6474d07098bf519020",
-      "o3.color.palette.black-60": "ef58a4b469af330129fd97371e894e505f6aab5e",
-      "o3.color.palette.black-70": "a955b3df85b23c70c0037f965b4b441f535ec789",
-      "o3.color.palette.black-80": "6784b9ef7832f9707de83b04ef6e15d5748f6c05",
-      "o3.color.palette.black-90": "e37a7f6df6db2dcb0a23b6144e69f0be6a2cbfbd",
-      "o3.spacing.5xs": "32cc3872e95b9e4d131168048127831bbbe6d9bc",
-      "o3.spacing.4xs": "a0d9a29efb186970b17e01be74d148425cd8d20d",
-      "o3.spacing.3xs": "75b62c35513c94f7bdfbbad43bf9f53c87b1ff16",
-      "o3.spacing.2xs": "e959616d22bf018264fb5a9406e69b398246a92f",
-      "o3.spacing.xs": "4446cc75ae913a81f1f6a9f7e7d01722c4692fc1",
-      "o3.spacing.s": "862b350b1cd1f1f4387811db1b3691a3688d97d7",
-      "o3.spacing.m": "7aef1ca31b1aeb25d4cec79da9ced0cbdca8bd3b",
-      "o3.spacing.l": "61869e6a537912592e328d9a543937f188872bc4",
-      "o3.spacing.xl": "243343a74405c0b528b65bd4f0c0a41e125e442e",
-      "o3.spacing.2xl": "d571d9c8595200bac039b85db1093190368eb422",
-      "o3.spacing.3xl": "3955cae324ba62163d8658ddbecdfd31224cc48a",
-      "o3.spacing.4xl": "679e85451d4cfb204fdb7c032ded0fc76553e4d8"
+      "DO-NOT-USE": "01a576576fb10db1136a05a9677d018123ec3346",
+      "o3.color.use-case.link.text.@": "3a3b03ee10ef6ae9d99063cd132022fbd339d5fd",
+      "o3.color.use-case.link.text.hover": "71e6f3754b399bea8e8cb6dcc805009810db3385",
+      "o3.color.use-case.link.underline.@": "91043970ef5669cd33ba7be7e15c903ab44111bf",
+      "o3.color.use-case.link.underline.hover": "590eb98bb49d1cfda7a537f6e4e7d5f969ca5ca0",
+      "o3.color.use-case.link-inverse.text.@": "eaf4c9199425a2effb4bbb3b92a7948c02d72213",
+      "o3.color.use-case.link-inverse.text.hover": "eff64a0d56a69305746c7a67c66b213874f11852",
+      "o3.color.use-case.link-inverse.underline.@": "2b2cb31bbe28de1c701d3775e2aa7d70c74797c5",
+      "o3.color.use-case.link-inverse.underline.hover": "2e26d245f855fe12cdbb3a910166184a99fe7b88",
+      "o3.color.use-case.page.background": "c0ab57a0153bc7981a35727974cfef264a7cb841",
+      "o3.color.use-case.page-inverse.background": "77e362d231a7178c50b891e82edacb3a9eecf9a6",
+      "o3.color.use-case.body.text": "433d60b223eb1324bd82219c58fb8fa14337068d",
+      "o3.color.use-case.error": "0e886ab6ae03dd17f3daf5a754c0b3ac83da1053",
+      "o3.color.use-case.error-background": "c439322a59d77ad7d48c4775ce237306a4fe9a77",
+      "o3.color.use-case.body-inverse.text": "7cbcf8fea33d1361ee07cd6e99190382cfe5ce63",
+      "o3.color.use-case.muted.text": "89c7aafd91fae876bb81d886da7911612cfcb052",
+      "o3.color.use-case.muted-inverse.text": "ba9cee3dfbccd59386e7432728dc7ea7a88b2dc2",
+      "o3.color.use-case.heading.text": "ec4773c8a96cea6f725058e903c9e2f3ac40de51",
+      "o3.color.use-case.heading-inverse.text": "e15de63ae757bd8c9a57d77e1a51b92883c23fa3",
+      "o3.font.family.metric": "d37f881e76fa2ba3e99d01ab3960f81eda68f34a",
+      "o3.font.family.financier-display": "196288468d798efc46752713376ab233ae1d7dd5",
+      "o3.font.family.georgia": "340ac4aef0df847c49831ca8e72680923d54a48e",
+      "o3.font.weight.light": "81ee2435dd9b8461d0a411c5e05d8e813ae235d5",
+      "o3.font.weight.regular": "25570cc94cb3fc44979bd92c514dcf60217060a6",
+      "o3.font.weight.medium": "757c70804ca75761e7f4d7d4e99596c1e7b9f8c5",
+      "o3.font.weight.semibold": "4e8ebbcd9e4e3c7b0d4b22d0769c57950198b62c",
+      "o3.font.weight.bold": "23d3ff85a9b3b2b486e5cd0078975003024448c1",
+      "o3.font.lineheight.0": "f5e0f0416ef13385b2a3a531c0c842a2126d2d28",
+      "o3.font.lineheight.1": "9c2fdcbc08d921b2927ce3c5381e8b66fca7e8b4",
+      "o3.font.lineheight.2": "a1103ddee3587780bb963028643ed6b86d768221",
+      "o3.font.lineheight.3": "03be4ee8fe057fc60dcfa9718b45dd6f21a4f655",
+      "o3.font.lineheight.4": "fe61cf7a601e9543ccbedf3b69a58bfa24548f6c",
+      "o3.font.lineheight.5": "5ca893026c2879c0b0571c9cfd766d1df0de041e",
+      "o3.font.lineheight.6": "6bf4468c061183a501b33a397f4d757533bbb4ed",
+      "o3.font.lineheight.7": "90459dca5dc65de7470396ad9c0790d73f9e14b7",
+      "o3.font.lineheight.8": "da95f658b556e8316031bf2dad1cd665b9b4b984",
+      "o3.font.lineheight.9": "caaffb43a38fa285c14b4e3d92842e740b0dcb59",
+      "o3.font.lineheight.10": "1e767ddb730373a2c76441f907b61488c19d5523",
+      "o3.font.lineheight.negative-2": "110d177eba7e90cde671b8a0bdfc5341dab5b52c",
+      "o3.font.lineheight.negative-1": "03b2bc3755b284b1d5bf07ebafefa732364fa598",
+      "o3.font.size.0": "decb6ae13419fd16def77df9cd1bd808805e9f1a",
+      "o3.font.size.1": "f6a6a2719b0943f7f1af4a91b9f3bbfce67ec75c",
+      "o3.font.size.2": "d786de1ca4f9ed9ba22b19fa834f8f42985f4c5e",
+      "o3.font.size.3": "f13b90e750ed7957ffcb0c14ff5481a24223c425",
+      "o3.font.size.4": "cfb26c7ea5c7853039236e44ebaba7049d780b95",
+      "o3.font.size.5": "c5a29490cb507f9cddc9b032ee3dec57884c05cc",
+      "o3.font.size.6": "71f9ebbf2f184c445bd48da99f3e326cb5447b4a",
+      "o3.font.size.7": "685d7782054fe5e6cd5d740f5bc42af4559d5817",
+      "o3.font.size.8": "079565a8cbdc608bafc2a9cbe7ca16403ac61ab6",
+      "o3.font.size.9": "7722268e09358f02ca79c169e3035dbb7ab689bc",
+      "o3.font.size.10": "4e23132264ffec24602c0ed275f53f7a4b41a56c",
+      "o3.font.size.negative-2": "8557ec0c1600f34edb821ac7555ce23f4fc0b889",
+      "o3.font.size.negative-1": "fb4142c0f0196ffc8520357daa1ba810d28a9f72",
+      "o3.font.lineheight-metric2.0": "507b1af05faea734aa22b5ae84779d2172d0a732",
+      "o3.font.lineheight-metric2.1": "6cad12fa77b526da9ddd51ba4b41d07fec328976",
+      "o3.font.lineheight-metric2.2": "c5ea15afbd059af4338f39e6e032a0b2c6fbec24",
+      "o3.font.lineheight-metric2.3": "e7bde30c5d4e46cac6671f2f69741cb3fff202a4",
+      "o3.font.lineheight-metric2.4": "5b86af2c4620b11d57dbe21288880d7ccf7f7116",
+      "o3.font.lineheight-metric2.5": "92145f91ff58ecda554094db96ca0d3796759ab1",
+      "o3.font.lineheight-metric2.6": "c2d51aea8c397a44daa5d2f96fc6c77a9f60d014",
+      "o3.font.lineheight-metric2.7": "4993287fb34878ddadc20996527eb53d06215450",
+      "o3.font.lineheight-metric2.8": "83221451eac81f8de38d451c6d4b6823784b836e",
+      "o3.font.lineheight-metric2.9": "eed996d3c5c031280d421b5732f44bae08a872df",
+      "o3.font.lineheight-metric2.10": "77802ab9cee48ac4bc58d4ba9c0691cc585fd4a5",
+      "o3.font.lineheight-metric2.negative-2": "fca22a3bffebd8d8292ad8ad1911e121e3a7b10e",
+      "o3.font.lineheight-metric2.negative-1": "d484ba4f4d43e760566576dc5b09fedb013fd1f0",
+      "o3.font.size-metric2.0": "13376d784255c106a5c04f5dbc29f45a7e024177",
+      "o3.font.size-metric2.1": "8cabe56e4679e48be199a8a12408d3a90a093a9d",
+      "o3.font.size-metric2.2": "a3b242bd0cbe763f980b64a7fe7b0ff8c2d050e6",
+      "o3.font.size-metric2.3": "4b9e59cb02069031820b33402c85d39d6ef417bc",
+      "o3.font.size-metric2.4": "43085f9f9de7a959254afb0e3c0935b92aabffa9",
+      "o3.font.size-metric2.5": "871df100fec65bc030d7da92d74f0a9cf4d85db1",
+      "o3.font.size-metric2.6": "1880266ba0464d4085638b50a7cef8b38a0cf25a",
+      "o3.font.size-metric2.7": "ab8d96f17ba18ea1d835ffb3cb4ee7dbfe67d850",
+      "o3.font.size-metric2.8": "04d34910cf3f4e5baf7d3e62ab4e615c4c353f88",
+      "o3.font.size-metric2.9": "07bb6b8318550cce5520a67882bb84ed2a7b4a33",
+      "o3.font.size-metric2.10": "15916c5f763587a9d199eb1b9db442fbe53cd50a",
+      "o3.font.size-metric2.negative-2": "0ff7dad65612dff3d0669ed4aeb3727483a23197",
+      "o3.font.size-metric2.negative-1": "5e231e439b37a33906d22d4fbeb779c570ebc8fd",
+      "o3.color.palette.black": "0e9c4ab10044a1a44565fe81f1bf7666ab2f9b79",
+      "o3.color.palette.white": "03134d13adc73489246a00f97d6ebf9ff8268cde",
+      "o3.color.palette.jade": "1840bd020a7fb4123538a80d6d933727439616f0",
+      "o3.color.palette.crimson": "221a08fde4444be99ac77ea289aab9e7bf6d443e",
+      "o3.color.palette.black-5": "5f5e99415badb3898ea12930081c146849319908",
+      "o3.color.palette.black-10": "9e40831be74d2493b280ebf45929934dcb4249c3",
+      "o3.color.palette.black-20": "899a2741f193dd5ad6e9701dd88709170750f7a2",
+      "o3.color.palette.black-30": "8895b14945e31b0f4e3cdbb4d1a72ab059e2c344",
+      "o3.color.palette.black-40": "a8c1c8db670c89282f8b168bd166a2eeb838fe7b",
+      "o3.color.palette.black-50": "25637b66e1f74df4be9c21248e1ad1bcb96695e8",
+      "o3.color.palette.black-60": "59dd7d5f8bf29d6715ed583d5222b4af55176952",
+      "o3.color.palette.black-70": "58dfdb13f1b66cfbb8533165b5281f9f79ce5342",
+      "o3.color.palette.black-80": "b3fbb3d6bc5837a0cd4bc30b659db3ab55b0b792",
+      "o3.color.palette.black-90": "c1478f4b211b8f14b7e5c52ef7cdb1326a1c6aee",
+      "o3.spacing.5xs": "f9930fddc2d56383f7243e1f88dbd2c141625e1d",
+      "o3.spacing.4xs": "61e5d0ce679e729604fc6465e28aaf40847035b6",
+      "o3.spacing.3xs": "65a5b6f329c8f52045774d5e917b56398ca2cc6c",
+      "o3.spacing.2xs": "6e7d00c7067c802e99a8ad03c8428b2e50ba1bed",
+      "o3.spacing.xs": "d242d07e0c09d865ab3525aee380c76dea3d6bc2",
+      "o3.spacing.s": "d7fced94330bcf8fcf9c6059f7b5193f5ae0d1ff",
+      "o3.spacing.m": "222c52b5fcb4ae0feb88158116f3a391266637fe",
+      "o3.spacing.l": "c35ec77d7ef13e8e7bc23e36516774be0a1542b9",
+      "o3.spacing.xl": "06104c9060f1174ceb23b8bdfa9171015c48d8f7",
+      "o3.spacing.2xl": "5904ac5dfb80f8d7ae97966682a3691ae2114017",
+      "o3.spacing.3xl": "3d69a498bb9e7da82634c1c1109632e721390e80",
+      "o3.spacing.4xl": "23f476d76dd98d5364846250b605c4ba5d75f418"
     },
     "group": "whitelabel"
   },

diff --git a/apps/dictionary/tokens/whitelabel/use-case/color.json b/apps/dictionary/tokens/whitelabel/use-case/color.json
@@ -65,6 +65,14 @@
             "type": "color"
           }
         },
+        "error": {
+          "value": "{o3.color.palette.crimson}",
+          "type": "color"
+        },
+        "error-background": {
+          "value": "rgba(204,0,0,0.06)",
+          "type": "color"
+        },
         "body-inverse": {
           "text": {
             "value": "{o3.color.palette.white}",
@@ -95,6 +103,10 @@
             "value": "{o3.color.palette.white}",
             "type": "color"
           }
+        },
+        "error": {
+          "value": "{o3.color.palette.crimson}",
+          "type": "color"
         }
       }
     }