What is happening

React bundle with styled included is missing in the published package.

What should happen

Bundle should be there.

Screenshot

N/A

Playground

N/A

Environment

N/A

What is happening

Docs are not being generated anymore after last merge.

What should happen

Docs need to be generated in order to deploy it.

Screenshot

N/A

Playground

N/A

Environment

N/A

Name

taslonicVue.toaster
taslonicReact.toaster

Common pattern to abstract

Show themed messages disconnected from the regular flow of the page.

Requirements

• Should have four themes: Info, Success, Warning and Danger.
• Should contain a slot to accommodate a custom content.
• Should show at least a message.
• Should optionally show a title.
• Should show a close button.

Note: Use this as a reference.

Properties

No custom properties

Methods

Vue

Name: pop({ title, message, theme })
Description: Pops a toast.

React

Name: open({ title, message, theme })
Description: Pops a toast.

Mockup

You can find the latest mockup version link on the Wiki homepage.

What is happening

It's not possible to pass custom attributes to Vue input.

What should happen

If I set aria-label="Email address" to the <t-input>, this attribute must be set on the final <input> rendered.

Playground

• Playground: Vue

Environment

• MacOS Catalina/10.15.7
• Brave 1.30.87 Chromium: 94.0.4606.71

What is happening

On Vue version 2.6+ form control values are not emitted correctly.

What should happen

Value should be the string entered or option string selected, not an object.

Screenshot

Playground

Not able to reproduce on documentation Playground because documentation uses Vue version 2.5.11.

Environment

• MacOS Catalina/10.15.5*
• Chrome/84.0.4147.135*

What is happening

When running unit tests using Jest, Vue build could not be imported properly.

What should happen

Tests should be able to import Vue build properly.

Screenshot

Playground

N/A

Environment

• MacOS Catalina/10.15.5*
• Jest/24.9.0*

Component's Name

We actually have a component called Stripe. Turns out that it's not so intuitive, so we're preferring to follow the usual name given to that kind of component. Polaris - Shopify's Design System and MongoDB Design call it Banner, so we'll call it too.

Common pattern to be abstracted

The purpose of the Banner component will keep the same as described on #8.

Requirements

The requirements for the Banner component will keep the same as described on #8.

Properties

The properties for the Banner component will keep the same as described on #8.

What is happening

Error callback passed to Vue Fetcher receives no error when invoked.

What should happen

Error callback should receive the error returned by the server.

Screenshot

N/A

Playground

• Playground: Vue

Environment

• MacOS Catalina/10.15.5*
• Chrome/84.0.4147.135*

Component's Name

<t-row> and <t-col>

Common pattern to be abstracted

Row: Sometimes, a row offset is necessary for extra-small screens (mobile), but not necessary on bigger ones. By now, it's not possible to achieve with current props.

Col: Sometimes, a col alignment is desirable for extra-small screens only. While it's possible to achieve, it's not possible to set the alignment as left after another alignment has been set.

That said, the common patterns related to alignment and offset should be improved to include also these use cases.

Requirements

• Add 0 as valid value for offsets (row and col)
• Add left as valid value for align (row and col)
• Add screen-sizes to all row props (row)

Properties (Col)

Properties (Row)

Note: Keep with the current row props (offset, align, vertical-align) without screen size prefix not to break compatibility with previous versions of the lib.

What is happening

When a button is rendered as anchor, it does not follow the elements flow right and seems to be broken.

What should happen

It should respect the elements flow on the DOM and position itself right on screen.

Screenshot

Playground

Playground Link

Environment

• MacOS Catalina/10.15.5*
• Chrome/84.0.4147.135*

Name

<t-stripe>

Common pattern to abstract

Element to be shown usually at the top of screen containing useful information - feedback about the completion of an async process, for example.

Requirements

• Should have four themes: Info, Success, Warning and Danger.
• Should optionally show a text trigger at right bottom to fire some custom action.
• Should optionally show a close button to hide it.
• Should contain a slot to accommodate a custom content, eventually containing HTML.

Properties

Mockup

You can find the latest mockup version link on the Wiki homepage.

Component's Name

<t-textarea>

Common pattern to be abstracted

Abstraction of a native textarea.

Requirements

• Should handle required validation.
• Should allow to set custom sync validations.
• Should show an error message underneath it in case of being invalid (after the first blur only).

Properties

Notes:

• Custom validations are executed every time users interact with select.
• Every validation is an object containing isValid(), a function that must return a Boolean, and errorMessage, a string to be shown when validation fails.
• Error messages should keep hidden until user blurs input for the first time.

Mockup

You can find the latest mockup version link on the Wiki homepage.

🚫 Blocked by: #28, #27, #8 and #7

Name

<t-form>

Common pattern to abstract

Common behavior of any AJAX form: fetch, submission, error/success/processing feedbacks.

Requirements

• Build a model to accommodate every sync error emitted by any kind of form input (input, select, radio, checkbox, etc).
• Make every sync error visible on form submit - if form is not valid - and focus on the first input containing an error.
• If fetch listener has been given, fetch data on initialization calling onFetchSuccess or onFetchError according to server response.
• In case of server side error, show a danger <t-banner> on top of the form with a default error message and a retry button. If error message has been given, use it.
• In case of submit success, pop a toast if success message has been given.

Properties

Mockup

You can find the latest mockup version link on the Wiki homepage.

🚫 Blocked by: #13

Name

taslonicVue.alert
taslonicReact.alert

Common pattern to abstract

Abstraction of the native alert. Should be built on top of taslonic.dialog

Requirements

• Should contain a slot to accommodate a custom content.
• Should show a primary button (Ok).
• Should close on ENTER key press.

Properties

No custom properties

Methods

Vue

Name: open({ title, content, width, dismissButtonText, onDismiss })
Description: Opens an alert dialog.

React

Name: open({ title, content, width, dismissButtonText, onDismiss })
Description: Opens an alert dialog.

Mockup

You can find the latest mockup version link on the Wiki homepage.

Component's Name

The following public components will be affected:

• <t-button>
• <t-field>
• <t-input>
• <t-select>
• <t-textarea>

Common pattern to be abstracted

N/A

Requirements

• Rename prop blocked to block.

Properties

N/A

What is happening

Step 5 is not optional.

What should happen

Both should be run in order to see documentation and make it reload at any code change.

Component's Name

<t-fetcher>

Common pattern to be abstracted

Once in a while data need to be fetched again when something present in the context changes. Imagine a select of users and, right below it, a card that show details for the selected user. Those details need to be fetched again through the user id every time the selected user changes.

Requirements

• Pass the fetcher instance to the parent component via on-mount callback prop.

Properties

🚫 Blocked by: #9

Name

<t-field>

Common pattern to abstract

Fields of a form.

Requirements

• Should encapsulate a <label>
• Should offer a slot to accommodate some form control (input, select, radio, checkbox, text area, etc)
• Should handle Required Star when the form control it contains is required.

Properties

Mockup

You can find the latest mockup version link on the Wiki homepage.

What is happening

• Lookless value is not listing as valid value for theme on properties list.
• In the disabled example, Lookless Button is not disabled.

What should happen

• Lookless should be listed as valid value for theme property.
• Lookless button should be disabled in the disabled example.

Screenshot

What is happening

Form component listeners (onSubmit, onSubmitSuccess, etc) are not being properly updated and all state variables inside them are getting stale.

What should happen

All those state variables should be in sync with the parent component state.

Screenshot

Playground

See this bug on Playground

Environment

• MacOS Catalina/10.15.5*
• Chrome/84.0.4147.135*

Component's Name

<t-button>, <t-close-button>, <t-input>, <t-textarea>, <t-select>

Common pattern to be abstracted

The attribute $listeners was removed on Vue 3. Listeners were incorporated to the attribute $attrs. The components listed above should now being able to handle with this differentiation between Vue versions. One possible strategy would be handle this conditional in a separate service and use it in every component that requires $listeners:

// vue/services/vm/vm.js
const _public = {};

_public.getListeners = vm => vm.$listeners || {}

export default _public

// vue/services/vm/vm.js
const _public = {};

_public.getListeners = vm => vm.$listeners || {}

export default _public

// vue/components/button/button.js
import vmService from '@vue/services/vm/vm';

export const tButton = {
  name: 't-button',
  // ...
  methods: {
    getListeners(){
      return vmService.getListeners(this);
    }
  }
}

<!-- vue/components/button/button.html -->
<component :is="tagName" :class="classes" :type="buttonType" tabindex="0" v-on="getListeners()">
  <!-- ... -->
</component>

Requirements

• Create vmService and apply it to the components that require $listeners

Properties

N/A

What is happening

When I try open an alert in a third party project that is using Taslonic, I got an error saying that template could not be compiled.

What should happen

Alert or any other component compiled on the fly should be rendered properly.

Screenshot

Playground

Issue does not happen on Playground.

Environment

• MacOS Catalina/10.15.5*
• Chrome/84.0.4147.135*

🚫 Blocked by: #28

Name

<t-input>

Common pattern to abstract

Abstraction for a native input

Requirements

• Should handle required validation.
• Should allow to set custom sync validations (to be used by components that extend it, e.g.: email-input).
• Should show an error message underneath it in case of being invalid (after the first blur only).

Properties

Notes:

• Custom validations are executed every time users interact with input.
• Every validation is an object containing isValid(), a function that must return a Boolean, and errorMessage, a string to be shown when validation fails.
• Error messages should keep hidden until user blurs input for the first time.

Mockup

You can find the latest mockup version link on the Wiki homepage.

What is happening

The last release (v1.0.0) renamed prop blocked to block, but no docs have been updated. This commit fixes docs.

What should happen

Block fields, inputs and button should behave like a block.

Screenshot

Playground

N/A

Environment

N/A

Name

<t-loader>

Common pattern to abstract

Inform some async processing to the user

Requirements

• Try to make an animation using pure CSS. If it's not possible, embed some SVG.
• Should work over light or dark backgrounds.

Properties

Tag Name
<tas-button>

Common Patter to Abstract
Native button

Attributes

Methods

Example

<tas-button>Custom Text</tas-button>

const button = document.querySelector('tas-button');

function onClick(){
  alert('clicked!');
}

button.setClickCallback(onClick);

🚫 Blocked by: #9

Name

<t-email-input>

Common pattern to abstract

Native input abstraction containing email address validation. Should be composed with <t-input> to make use of the abstractions that it already offers.

Requirements

• Should handle email validation.
• Should allow to set custom sync validations (to be used by components that will eventually extend it).

Properties

Notes:

• required and custom-validations should be properties that extend these same properties present on <t-input>.

Mockup

You can find the latest mockup version link on the Wiki homepage.

Component's Name

toaster

Common pattern to be abstracted

N/A

Requirements

• Add React Node as valid type for title and message on React toaster docs.

Properties

N/A

What is happening

Validations are not working properly even if passwords match.

What should happen

Validations should work properly.

Screenshot

N/A

Playground

Playground

Environment

• MacOS Catalina/10.15.5*
• Chrome/84.0.4147.135*

Component's Name

<t-tag>

Common pattern to be abstracted

Commonly attached to or placed close to an element bringing further information about that.

Requirements

• Should allow themes

Properties

Demand

Seems no to be possible to keep styles open for customisation when a shadow root is created for some component. Example:

export class Button extends HTMLElement {
  constructor(){
    super();
  }
  connectedCallback(){
    const template = document.createElement('template');
    template.innerHTML = '<button class="tas-button"><slot></slot></button>';
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

That way makes the css class tas-button has no effect. The component is unable to access a global stylesheet and, consequently, is not possible to override any of its styles too.

First attempt
Ok, if shadow root is the cause of this issue, what about removing it and let the component shadowRootLess. Yes, styles work now and can be even overridden. But that raises another issue. Slot no longer works.

Second attempt
This issue represents the second attempt. Handle slots manually through its specific service: slot-service.

Solution

Slot service should be responsible for only one thing: Replace the slot container with the external content given.

Named slots will be not supported for now.

What is happening

State inside fetch callback are getting staled. React only.

What should happen

State should be always fresh.

Screenshot

N/A

Playground

Is it a behavior-related bug? If so, paste here a link to Taslonic playground
containing the simulation of your bug. You just need to implement a layout over
there using the component you think is buggy and then copy/paste that URL here.

• Playground: React

In this link, Fetcher should simulate a failed in the first request and a success on the second one. But, since the count state gets staled, it get stuck in the failed request forever.

Environment

• MacOS Catalina/10.15.5*
• Chrome/84.0.4147.135*

🚫 Blocked by: #13

Name

taslonicVue.confirm
taslonicReact.confirm

Common pattern to abstract

Abstraction of the native confirm. Should be built on top of taslonic.dialog

Requirements

• Should contain a slot to accommodate a custom rich content.
• Should show a primary button (Confirm) and a secondary button (Cancel)
• Should confirm on ENTER press.
• Should decline on ESC press.
• Should hide dialog close button.

Properties

No custom properties

Methods

Vue

Name: open({ template, controller, onConfirm, onCancel, confirmButtonText, cancelButtonText })
Description: Opens a confirmation dialog.

React

Name: open({ controller, onConfirm, onCancel, confirmButtonText, cancelButtonText })
Description: Opens a confirmation dialog.

Mockup

You can find the latest mockup version link on the Wiki homepage.

Component's Name

<t-input> and <t-select>

Common pattern to be abstracted

N/A

Requirements

• Replace the word cooler with funnier

Properties

N/A

Name

taslonicVue.dialog
taslonicReact.dialog

Common pattern to abstract

Show information over the page content.

Requirements

• Should allow an optional title
• Should contain a slot to accommodate a custom content.
• Should contain a button at top right corner to close itself.
• Should close itself on ESC press.

Note: Use this as a reference.

Properties

No custom properties

Methods

Vue

Name: open({ content, title, onClose })
Description: Opens a dialog and returns an object containing close method responsible for closing itself.

Name: close()
Description: Closes dialog.

React

Name: open({ content, title, onClose })
Description: Opens a dialog and returns an object containing close method responsible for closing itself.

Name: close()
Description: Closes dialog.

Mockup

You can find the latest mockup version link on the Wiki homepage.

Name

<t-select>

Common pattern to abstract

Abstraction for a native select

Requirements

• Should handle required validation.
• Should allow to set custom sync validations.
• Should show an error message underneath it in case of being invalid (after the first blur only).

Properties

Notes:

• Custom validations are executed every time users interact with select.
• Every validation is an object containing isValid(), a function that must return a Boolean, and errorMessage, a string to be shown when validation fails.
• Error messages should keep hidden until user blurs input for the first time.

Mockup

You can find the latest mockup version link on the Wiki homepage.

Component's Name

<t-field>
<t-input>
<t-select>
<t-textarea>

Common pattern to be abstracted

Definition of the for attribute for <label> and id for form controls (input, select and textarea).

Requirements

• Make input, select and textarea set id for themselves.
• Make label set that id as its for attribute.

Properties

N/A

Component's Name

<t-close-button>
<t-alert>
<t-dialog>
<t-toast>

Name of the component you suggest to be created or improved.

Common pattern to be abstracted

Set default aria-labels for close buttons to better identify them on screen readers.

Requirements

• Improve close-button to allow aria-label prop
• Add default aria-label to the close button present in the alert component
• Add default aria-label to the close button present in the dialog component
• Add default aria-label to the close button present in the toast component

Properties

Create templates for:

• Bug
• Enhancement
• Question
• Pull Request

What is happening

Documentation for Container component is showing a wrong information. Large Container stretches up to 1200px , not 960px as we see on docs.

What should happen

Should show the correct information.

Screenshot

Attribute should be reactive.

Component's Name

N/A

Common pattern to be abstracted

To avoid having to import a stylesheet (taslonic.css), Taslonic could offer a bundle that already includes all styled in it.

Example

import { Button } from '@glorious/taslonic/react-styled';
...
<Button>That's it</Button>

Requirements

• Generate one more bundle called react-styled.js
• Keep with the previous bundle - JS-Only (react.js)

Properties

N/A

Component's Name

<t-fetcher>

Common pattern to be abstracted

Aria attribute handling for the moments in which content is not visible.

Requirements

• Set aria-hidden as true while fetching and in case of fetch fails.

Properties

N/A

Component's Name

<t-fetcher>

Common pattern to be abstracted

A wrapper for async data that needs to be fetched.

Requirements

• Should show a feedback while processing request.
• Should show a default error banner if request fails.
• Should allow error message customization.
• Should allow user redo the request clicking on error banner trigger (Retry).
• Should present its content is request succeed.

Properties

Name

<tas-fieldset>

Common pattern to abstract

Native fieldsets.

Requirements

• Should encapsulate a native <fieldset>
• Should allow a title
• Should allow to set initial visibility: true, false.
• Should contain a slot to accommodate a custom rich content.

Attributes

Methods

setVisibility(shouldShow)

Sets components's visibility.

What is happening

> react-scripts build

Creating an optimized production build...
Failed to compile.

./node_modules/@glorious/taslonic/taslonic.css
ParserError: Syntax Error at line: 1, column 30

What should happen

Build show happen normally.

Screenshot

N/A

Playground

N/A

Environment

• MacOS Catalina/10.15.5*
• Chrome/84.0.4147.135*

Requirements

Build a diagram illustrating the communication between form and its form controls (input, select, text area etc).

Expectations

1. If a field expects data in a specific format (e.g. email), it should be validated once filled even if field is not mandatory. If users keep a non required field blank, no problem, but once it gets filled, the ideia is not to send an invalid data to the server.
2. Forms were designed to submit data only. It's because when the page loads on the browser it came from server with all necessary data already rendered on it. But in times of Single Page Applications, forms now need to fetch data too. So besides the submit listener, a form component should implement a fetch listener as well, to be executed on its initialization.
3. Remembering to mark a required field label with some sign (e.g. red asterisk) is not funny and we usually forget to do this. So a field label should read the props of a form control contained in it and show a required sign automatically.
4. Field validation errors should be shown after the form control has been blurred at least once. It avoids users see errors while are still entering some data for the first time.
5. Ajax form usually show error messages only. It would be interesting if we have the option of showing a success message for cases in which the entered data is valid.
6. If some form field is invalid on form submit, submission should be aborted, all invalid fields should show their error messages and the first invalid field should be focused.
7. On form submit, submit button should keep disabled until the end of the process. That is, until the server respond with success or with an error.

Component's Name

N/A

Common pattern to be abstracted

N/A

Requirements

Change the distribution directory structure from:

- dist
  - react.js
  - react-styled.js
  - vue-plugin.js
  - taslonic.css

to:

- dist
  - react
    - index.js
    - styled.js
  - vue
    - index.js
    - plugin.js
  - taslonic.css

This change will improve the experience when importing modules in ES6 projects.

By now:

import { Button } from '@glorious/taslonic/react-styled';

Then:

import { Button } from '@glorious/taslonic/react/styled';

Properties

N/A

Component's Name

<t-card>

Common pattern to be abstracted

A visual box to accommodate a group of data. An user card, for example.

Requirements

• Should optionally have a title
• Should title tag name be customizable (default: <h3>)

Properties

Component's Name

N/Z

Common pattern to be abstracted

N/A

Requirements

• Update Circle CI config to use parallel tasks

Properties

N/A