ampleorganics / blaze.vue Goto Github PK

We need a component that can be used for general text styles. For example sake, here is how Polaris handles it: https://polaris.shopify.com/components/titles-and-text/text-style#navigation

link: for making the button look like a link but with the same padding/sizing as a button.
text-only: for removing all padding, borders, etc.

.ao-form-control was used only cause that's what the webapp uses, which is just a bootstrap remenant. We should change this to be .ao-input / .ao-select / .ao-textarea throughout the component and any instances of its use... OR SHOULD WE? Let's talk.

For tables with less padding. Something like:

.ao-table--condensed {
  /deep/ td {
    padding: $spacer-micro !important;
  }

We should have the ability to easily create an input or a select with a button addon, so we don't have to manually put the two components together

problem: search like inputs tend to not have a label by design, and instead use placeholder to identify what to do

solution: make the label prop no longer required

Ex.

• .u-text-right for right-aligning text
• .u-text-xs, u-text-lg
• .u-margin-b-0

Need a text style for a labelling sections within a card. Something like this exists in mockups already.
Should be an h3 since it is hierarchically 1 step lower than the card header.

We could add this in ao-text, or create a new component called ao-heading?

Component: ao-input

Problem: trying to use date as a type and their is a warning saying the validator has failed

possible solutions:

1. add only date as a part of the validations
2. add every valid input as per https://www.w3schools.com/html/html_form_input_types.asp, things like search would also be helpful. avoid 'tel' for lack of compatibility

• putting an input add-on does some funny styling with the button alignment and input width, particularly in card header slots.
• add-ons should emit click events (e.g. as a search button or something)
• nice to have: ghosted icon that's right-aligned and clickable (e.g. search tool, etc)

Common request by customers

Should be 'app-header' or 'primary-header' or something.

right now you need to pass in a default prop that sets the default,
problem is that it's not reactive so if default changes or should be re rendered based on another outside influence it does not work well

Solution:

1. remove default prop, restructure the component to use a proxy that sets value on start using v-model ala Buefy
2. Change default behind the scenes so that stuff can change,

either way it's likely going to be destructive on our current code base so a migration plan must be set when upgrading

inputs/selects (ex. in a PO/SO table)
buttons (ie. actions on a row item)

• If there is nothing to show, have a td that spans the total column count of the table with some generic centred empty state text like "No data to show"
• Create a prop for passing a unique string for that text, ex "No work orders have been created"

The app alert style looks too different from the current AO app alert style.

The sort icon will often break onto another line and appear under its respective th text. This should be easily solved with flexbox.

We should add the ability to give elements an on-hover tooltip. Pretty standard in today's webapp landscape and would be incredibly helpful for our clients.

Uses:

1. Contextualize a button or other element in a few words
2. Contextualize a button on other element with longer help text

I don't know if we could use a singular tool to successfully satisfy both these needs, we should explore.

AC

• Able to pass a string of text into a tooltip
• Tooltip appears on hover after 500ms (just spitballing, we can dial this in)
• Localization-friendly: We will need the ability to have this translated
• Controls for which side of the element the tip appears on (top, bottom, left, right)

Currently our grid just keeps squishing. It's not responsive out of the box.
Unless we are willing to commit to declaring a size value on mobile for every grid item, we need some default behaviour.

Inputs should have a min-width of, oh, say 60px.

Open to discussion on this.
Doing so would require refactoring - we would have to add a vertically-centered prop (or similar) to tables, which would have to be applied to the wholesale PO/SO line-item tables.

get a warning on current chrome (Chrome 65) that /deep/ is being deprecated,
not sure if it's the deep syntax

Possible Solution: use >>> which also is deep

edit: this may be a non issue O_O

problem: when focused or active the highlight colour is a standard blue and not the ample green

solution: change it

Small versions of the input and the buttons should be more compact than they are now. It's not much of a shift currently. This is tied in to better styling for nested table components (#65)

In addition to the instructional text that can be passed in, all input components should be able to have error text passed in.

• Should be below the input
• Should be above the instructional text
• Same font size as instructional text
• Should have the danger colour

Currently we have a slot to pass in the title, which opens the door to getting creative with the DOM element in which said title is in. We should enforce an h1 or something

Inputs don't have any 'destructive' like computed classes that would be useful in showing errors/validations

errors in input component @busheikin

TESTS ARE BROKEN AHHHHHH

Similar to the toolbar in the card header. A place for buttons to be right-aligned and sectioned off

CI is great

tests lint errors all that jazz

note: standard yarn lint fixes the issues so figure out how to make it not automatically lint

answer isssss --no-fix

Already I see inconsistent DOM elements being passed into this slot, h1, h2, h3... it should be locked the fuck down.

Current webapp style is that links are not underlined until hover. We should keep it that way.

We often use 'alerts', in the bootstrap sense - ie. a contextually coloured card with text that gives the user some kind of message. It's more like a 'callout' so maybe that is a better term.

• Should be able to be made flush with card edges, but should also be able to live within a card or outside of a card
• Should have info, success, warning, error/danger, and subtle variations.

problem: certain elements font-family's are set to system-ui or other things,

solution: add a rule in the reset SCSS that sets font-family/font property to 'inherit'

known HTML elements includ : selection, option, input, textarea

comment below if you find any others

Tabs provide more options for content navigation, and are currently in use in the webapp.

Examples:
https://polaris.shopify.com/components/navigation/tabs#navigation
https://getbootstrap.com/docs/4.0/components/navs/#tabs

It would be useful to have a table footer that could have unique styling. Example:

• Thicker border at the top
• will never have grey background

Glyphicons are weak

Since the parameters of the grid are being declared on each app, they are prone to being inconsistent from one to the other. Say we change the gutter width. Or the breakpoints. Now we have to go and change that in every app?

where a prop makes it a radio-style checkbox?

Actual: the right pagination button acts strange when not forced up against the side of something else.

Expected: constant size with the left button
like below

scrapped

The height of an ao-button is controlled by a min-height attribute.
Small buttons get a smaller height, but it is being set by a height attribute, so it has no effect and the height isn't actually changing.

• Change min-height to height on the button, or
• Change height to min-height on the small version

ie. make the text smaller

More comprehensive in terms of components, from my perspective

Goal:

Open to discussion

Currently when we put an input in a table, it takes up quite a bit of real estate with no real reason. So far the application for inputs in cells has been for Sales Orders and Purchase orders, which already have many columns so real estate is precious. For the Sales Order create view I created some styles (below) to condense the inputs, which I think is good.

(Also, the form group margin bottom is removed which I believe makes sense as well)

/deep/ .ao-table .ao-form-group {
  margin-bottom: 0 !important;
  input {
    padding: $spacer-micro !important;
    height: $input-height-sm !important;
    font-size: $font-size-sm;
  }
}