Field Type Plugin with Design System Bugs

[lukas-a-brand]

First of all - like always a great shoutout to the Storyblok team for creating an awesome product and solutions.

When I played around with the Design System Alpha some time ago with the intention to rewrite my Field Type Plugins using the Design System, I stumbled upon a few problems, that made it unusable to actually continue further at this state.

e.g.: Components described with their documentation and specific properties / functionality does not work, and my guess is that it is currently a bit bugged that stylings are applied accordingly when working with field type plugins.

I went through this guide:

https://www.storyblok.com/faq/how-to-use-the-design-system-with-custom-field-types

and sadly not even the Radio Buttons showed up at all ;)

The same goes for Field items and their helper fields for example like:

https://blok.ink/?path=/docs/design-system-components-form-sbformitem--default

Looking forward to fixes. :)

[brunoluizdesiqueira]

Hello @lukas-a-brand , thank you so much for contributing to the project. We will see these issues shortly. ;)

[emanuelgsouza]

Hey @lukas-a-brand , unfortunately I couldn't reproduce your issue. I created a new custom field type using the plugins page in my user area (so, I created a private plugin) and followed the article that you linked and the styles working well. Please, could you provide a more context?

The npm install command installed the version ^1.0.0-alpha.1 of the storyblok-design-system.

I will share the code which I used here:

My src/Plugin.vue:

<template>
  <div>
    <FormItem
      label="Label Text"
      style="margin-bottom: 20px"
    >
      <TextField
        v-model="content.text"
      />
    </FormItem>

    <FormItem>
      <Radio
        name="example"
        id="inactive"
        label="Unselected"
        v-model="content.selected"
        :native-value="false"
        inline
        style="margin-right: 20px;"
      />

      <Radio
        name="example"
        id="selected"
        label="Selected"
        v-model="content.selected"
        :native-value="true"
        inline
      />
    </FormItem>

    <Button label="Just a button" />
  </div>
</template>
 
<script>
import FormItem from 'storyblok-design-system/src/components/FormItem'
import Button from 'storyblok-design-system/src/components/Button'
import TextField from 'storyblok-design-system/src/components/TextField'
import Radio from 'storyblok-design-system/src/components/Radio'

export default {
  mixins: [window.Storyblok.plugin],
  components: {
    FormItem,
    Button,
    TextField,
    Radio,
  },
  data: () => ({
    content: {
      text: '',
      selected: false,
    }
  }),
  methods: {
    initWith() {
      return {
        // needs to be equal to your storyblok plugin name
        plugin: 'emanuel-test',
        selected: '',
      }
    },
    removeUiKit() {
      this.removeStyleByHref(
        "https://app.storyblok.com/assets/css/index-latest.css"
      ); // in local dev mode
      this.removeStyleByHref(
        "https://plugins.storyblok.com/assets/css/index-latest.css"
      ); // built plugin
    },
    removeStyleByHref(href) {
      const style = document.querySelector(`link[href="${href}"]`);
 
      if (style) {
        style.parentNode.removeChild(style);
      }
    },
    pluginCreated() {
      this.removeUiKit();
    },
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}
</script>
 
<style>
.sb-radio {
  margin: 8px;
}
</style>

In public/index.html file, I removed these lines.

And, the result was:

Just to you know that I didn't test any interaction in this moment, just if the DS styles was integrated well.

If you need anything, let us know.

[lukas-a-brand]

Hmmmm very interesting that suddenly the radio buttons and also the helper button on the fielditem show up which they did not before, whatever i tried.. ;)

Although it seems they still have styling errors:

• the radio hover gets cut off
• the helper icon has a weird active state
• the helper icon does not show the icon text and there is no hover state
• the helper text is just constantly there not only on click

I don't have time right now to go through all of the components, but would be great if they would also work the same way in field type plugins like they are working on blok.ink ;)

btw. I am on "storyblok-design-system": "^1.0.0-alpha.8",

I also have to add

.sb-textfield__input {
  font-size: 1.4rem !important;
}

otherwise I get that weird text size in input fields for example as well...

[thiagosaife]

@lukas-a-brand Does this issue still exists?

[ademarCardoso]

I closed the issue due to inactivity, if there is a problem we can reopen or open a new issue.

cc: @lukas-a-brand