@funidata/fudis-core 0.0.3 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funidata/fudis-core",
-  "version": "0.0.3",
+  "version": "1.0.0",
   "description": "Core styles and foundations for Fudis Design System",
   "files": [
     "src",
@@ -32,11 +32,11 @@
   "devDependencies": {
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
     "@storybook/blocks": "^8.6.12",
     "@storybook/html": "^8.6.12",
     "@storybook/html-vite": "^8.6.12",
     "@storybook/test": "^8.6.12",
+    "@whitespace/storybook-addon-html": "^7.0.0",
     "nodemon": "^3.1.10",
     "sass-embedded": "^1.86.3",
     "storybook": "^8.6.12"

package/src/components/fieldset/fieldset.scss

@@ -13,6 +13,7 @@
 
   display: grid;
   grid-template-columns: 1fr;
+  align-items: baseline;
 
   &__legend {
     @include utilities.box-reset;
@@ -21,13 +22,14 @@
 
     &__main {
       display: flex;
-      align-items: flex-end;
+      align-items: baseline;
 
       &:focus-visible {
         @include focus.focus-generic;
       }
 
       &__text-content {
+        display: inline-block;
         margin: spacing.$spacing-xxs 0;
         min-height: spacing.$spacing-md;
       }
@@ -35,7 +37,18 @@
       &__text {
         @include colorMixin.text-color('gray-dark');
 
-        margin-right: spacing.$spacing-xs;
+        display: inline-block;
+        white-space: break-spaces;
+      }
+
+      &__space {
+        display: inline-block;
+        margin-left: spacing.$spacing-xs;
+        width: 0;
+
+        &::before {
+          content: ' ';
+        }
       }
 
       &__required {
@@ -43,14 +56,13 @@
         @include colorMixin.text-color('gray-middle');
 
         display: inline-block;
-        vertical-align: bottom;
         text-transform: initial;
         /* stylelint-disable-next-line property-disallowed-list */
         font-size: typographyTokens.$body-text-sm-font-size;
       }
 
-      &__tooltip-button {
-        margin-top: auto;
+      &__popover-button {
+        align-self: flex-end;
       }
     }
 

package/src/components/guidance/guidance.scss

@@ -7,15 +7,6 @@
   justify-content: space-between;
   width: 100%;
 
-  &:not(:has(&__errors)):has(&__help-text) {
-    margin-top: spacing.$spacing-xs;
-  }
-
-  /* stylelint-disable no-descending-specificity */
-  &:not(:has(&__errors)) &__character-limit-indicator {
-    margin-top: 0;
-  }
-
   &__help-text {
     @include colorMixin.text-color('gray-dark');
     @include typography.body-text-sm-regular;

package/src/components/label/label.scss

@@ -8,15 +8,38 @@
   @include typography.text-field-label;
 
   display: flex;
-  align-items: flex-end;
+  align-items: baseline;
   justify-content: space-between;
 
   &__content {
+    display: inline-block;
     margin: spacing.$spacing-xxs 0;
     min-height: spacing.$spacing-md;
 
+    &__button {
+      display: inline-block;
+      margin-left: spacing.$spacing-xxs;
+
+      /** The button element inside the fudis-button exceeds the 32px because
+      button likely has different font metrics, that affects the baseline calculations. We set here
+      the container width to be the expected size of the button, so it does not affect the height of the container
+      when we use baseline */
+      height: spacing.$spacing-md;
+    }
+
     &__text {
-      margin-right: spacing.$spacing-xs;
+      display: inline-block;
+      white-space: break-spaces;
+    }
+
+    &__space {
+      display: inline-block;
+      margin-left: spacing.$spacing-xs;
+      width: 0;
+
+      &::before {
+        content: ' ';
+      }
     }
 
     &__required {
@@ -24,8 +47,11 @@
       @include colorMixin.text-color('gray-middle');
 
       display: inline-block;
-      vertical-align: bottom;
+      vertical-align: baseline;
       text-transform: initial;
+
+      /* stylelint-disable-next-line property-disallowed-list */
+      line-height: typographyToken.$text-input-line-height;
       /* stylelint-disable-next-line property-disallowed-list */
       font-size: typographyToken.$body-text-sm-font-size;
     }