carbon-design-system / carbon-components-vue Goto Github PK

Carbon react favours placing config in the package.json file where possible. Move to this pattern in this repo.

Update settings where appropriate and they differ from carbon-react and do not conflict with vue-cli.

The modal component has a prop "visible" which is used to show and hide the component. Vue is more than capable of doing this with v-if and v-show.

Should we remove the property?

Is your feature request related to a problem? Please describe.
In order to allow developers to preview components, we should deploy previews to a suitable location.

Describe the solution you'd like
Deploy the existing storybook stories via storybook at vue.carbondesignsystem.com

Describe alternatives you've considered
None

Additional context
The React implementation of Carbon components uses storybook to deploy component previews.

Steps to reproduce the issue

1. Open the storybook page http://vue.carbondesignsystem.com/?selectedKind=CvPagination
2. Set the number of items knob to 1003
3. Note the page count does not change.
4. Change the number of items per page in the live component.
5. Note the page count does change to the correct value
6. Select the last page
7. Change the number of items to 103
8. Note neither page number not updated

Additional information

• Screenshots or code
• Notes

Is your feature request related to a problem? Please describe.
Add a Vue.js implementation of the carbon pie-chart component http://www.carbondesignsystem.com/data-vis/pie-chart

Describe the solution you'd like
Single file templates, notes and story as per other components.

Ideally, it should not rely on core javascript.

Describe alternatives you've considered
Initial version can rely on core carbon javascript.

Additional context
Add any other context or screenshots about the feature request here.

The progress component, for instance, has setCurrent(step) method.

While initial values may make sense for components that are able to change their own state (eg. input) it does not make much sense for components that cannot.

Remove such functions in favour of using props only?

Messages like invalid message text or helper text could have icons, or not. Allow the user to specify prop or slotted content for these.

@moores2 to provide an example slop implementation.

carbon-elements produces the package @carbon/icons-vue

Remove cv-icon in favour of using icons from carbon-elements.

Is a bx--form-item really needed as part of form components?

carbon-components-react places it around 16

This repo currently 10.

If needed should we use cv-form-item.

Is your feature request related to a problem? Please describe.
Add a Vue.js implementation of the carbon guage component http://www.carbondesignsystem.com/data-vis/gauge

Describe the solution you'd like
Single file templates, notes and story as per other components.

Ideally, it should not rely on core javascript.

Describe alternatives you've considered
Initial version can rely on core carbon javascript.

Additional context
Add any other context or screenshots about the feature request here.

Carbon styling is in the process of being updated, there are some breaking changes in the HTML structure.

DO NOTE BREAK V1.

Steps to migrate

• Create an experimental branch with styling switch
• Document components with breaking changes and create issues.

Components with non-breaking changes

• CvAccording
• CvButton
• CvCodeSnippet
• CvContentSwitcher
• CvDatePicker
• CvDropdown

Pending in PR #272

• CvBreadcrumb
• CvCheckbox
• CvDataTAble
• CvFileUploader
• CvForm
• CvInlineLoader
• CvInlineNotification
• CvLink
• CvList
• CvLoading
• CvModal
• CvNumberInput
• CvOverflowMenu
• CvPagination
• CvRadioButton
• CvSkeletonText
• CvSlider
• CvTabs
• CvToastNotification
• CvTag
• CvTextInput
• CvTextArea
• CvTile
• CvTimePicker
• CvToggle
• CvToolbar

Not started

• CvProgress
• CvSearch
• CvSelect
• CvStructuredList

A number of component parts can be simple text or HTML content. When they are text they're easier to use as a prop but less flexible as a result.

Review component slots and props with the intention of having prop/slot hybrids hence slops ;-)

See invalid-message and helper-text for examples of a slop.

Components in need of update

• Toggle left and right text
• add more...

A standard HTML input with type="number" uses and returns a string as it's value.

Should wrapped components like cv-number-input take a value of type number or string?

Many components have a loading form, referred to as a skeleton the Carbon Design System.

See https://www.carbondesignsystem.com/patterns/loading

Add skeleton components (not all at once). Either create a work item or reference this issue.

Skeletons for

• CvAccordion
• CvBreadcrumb
• CvButton
• CvCheckbox
• CvCodeSnippet
• CvDataTable - See #51
• CvDatePicker
• CvDropdown
• CvFileUploader
• CvNumberInpu
• CvPagination
• CvProgress
• CvRadioButton
• CvSearch
• CvSkeletonText
• CvSlider
• CvStructuredList
• CvTabs
• CvTag
• CvTextArea
• CvTextInput
• CvToggle

Review components to see which if any should be made functional and update as appropriate.

A number of components have methods, data and computed values which should not be exposed.

Prefix with _ as per javascript convention.

Review component strucutre to ensure they have a similar pattern.

In regards to:

• "private" parts
• VModel
• kinds
• consistency or props
• parent/child component pattern
• events

Ensure all components have class 'cv-name' in their root element. Where name is hte name of the component.

The modal dialog should close when it no longer contains focus.

Currently, only the CvTag component has any tests.

Add more tests (not all at once). Either create a work item or reference this issue.

Tests for

• CvAccordion
• CvBreadcrumb
• CvButton
• CvCheckbox
• CvCodeSnippet
• CvContentSwitcher
• CvDataTable
• CvDatePicker
• CvDropdown
• CvFileUploader
• CvNumberInput
• CvInlineLoading
• CvInlineNotification
• CvLink
• CvList
• CvLoading
• CvModal
• CvMultiSelect
• CvOverflowMenu
• CvPagination
• CvProgress
• CvRadioButton
• CvSearch
• CvSelect
• CvSkeletongText
• CvSlider
• CvStructuredList
• CvTabs
• CvTag
• CvTextArea
• CvTextInput
• CvTile
• CvTimePicker
• CvToastNotification
• CvToggle
• CvToolbar
• CvTooltip
• CvUIShell
• CvWrapper

Note: Tests should include

• prop type, default and required checks
• Snapshots covering each property option
• Functional tests based on usage

Is your feature request related to a problem? Please describe.
Stories with kinds are not searchable, break 'Kind' knob into individual stories.

As an example searching for 'danger' does not show any of the components of where kind="danger"

Describe the solution you'd like
Present kind's as separate stories

Describe alternatives you've considered
None.

Additional context
None.

The current CvContnetSwitcher uses direct DOM manipulation to hide and show content.

A more Vue like solution would be to have a shared Vue instance that either uses events or data to display the content. Ideally, we would maintain support for the current implementation, but not if it makes the solution complicated.

Targetted at v1.0 to ensure any breaks are prior to the initial release.

Carbon components has a dynamically applied prefix. This will make it possible in future to shift fom bx to another prefix e.g. ibm.

Should we provide a similar mechanism? If so propose one.

Find and replace for 'contnent' in order.

Is your feature request related to a problem? Please describe.
There are codepens to illustrate the vanilla Carbon components. It would be great to have similar codepends illustrating the Carbon-Vue components.

Describe the solution you'd like
A codepen in the Carbon codepen org for each Carbon-Vue component.

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.
Add a Vue.js implementation of the carbon dropdown component http://www.carbondesignsystem.com/components/dropdown

Describe the solution you'd like
Single file templates, notes and story as per other components.

Ideally, it should not rely on core javascript.

Describe alternatives you've considered
Initial version can rely on core carbon javascript.

Additional context
Add any other context or screenshots about the feature request here.

v-model was introduced to allow components built-in components to be wrapped, but can also be used with custom components.

v-model is a little unwieldy when it comes to multiple properties, but it can be achieved by using an object as the model prop. This can lead to maintaining a "value" data object or computed when it would otherwise not be needed.

v-bind.sync allows individual properties to raise events named "update:XXXX" where XXXX is the name of the prop.

https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

Tasks

• Determine which, if any components should use the prop.sync pattern instead.
• Implement or raise issues

The following components still use the vanilla javascript which bloats the built bundle size

• CvSearch
• CvNumberInput
• CvStructuredList
• CvTabs
• CvInteractiveTooltip

Is your feature request related to a problem? Please describe.
I currently cannot make a TextInput with password style (hidden/show chars)

Describe the solution you'd like
Feature import of TextInput password field : https://www.carbondesignsystem.com/components/text-input/code

Describe alternatives you've considered
Alternative is to build my own password field from an usual textinput with calculated variable.

Steps to reproduce the issue

1. In storybook change the page size value 20 to 25
2. Note the page size dropdown is not blank.

In a number of places setTimeout is used to encourage a particular sequence of events. Perhaps Vue.nextTick or this.$nextTick was being used incorrectly or failing for some other reason.

Investigate and determine if use of setTimeout can be eradicated.

Storybook has been on version 4 for quite some time. Update accordingly.

Is your feature request related to a problem? Please describe.
Add a Vue.js implementation of the carbon time picker component http://www.carbondesignsystem.com/components/date-picker

Describe the solution you'd like
Single file templates, notes and story as per other components.

Ideally, it should not rely on core javascript.

Describe alternatives you've considered
Initial version can rely on core carbon javascript.

Additional context
Add any other context or screenshots about the feature request here.

The date picker relies on core carbon code. Switching to use the flatpickr component directly will allow some of the advanced features found in carbon-react to be added.

The current file uploader is missing the label and label description parts shown here https://www.carbondesignsystem.com/components/file-uploader/code

Review and update the component taking into account the carbon-react implementation where the properties etc need changing from the current implementation. E.g. label to button-label

Brief

Some core styles are missing (e.g. bx--body) and when using the library styles are duplicated.

Detailed description

Currently, neither the storybook or users receive some core styling such as bx--body and plex fonts. This is because each component is importing only the styles specific to that component, missing out a number of settings and base styling.

Further to this when this library is used in another project style definitions can be duplicated. This is most obvious with bx--label which is used in a number of components. While the core SCSS libraries in carbon-components do put in place strategies to prevent this, they rely on a globally compiled file. However, .vue files appear to be treated as individual sandboxes which are then concatenated post-compile in Vue-CLI.

The strategy of importing only component specific files to ensure a user only gets the styles for the components they use may, as a result, be flawed.

While a Vue-CLI 3 project does by deafult remove duplicates in production, it does not in development which causes dev tools to slow down significantly.

Review and document strategy for carbon-components-vue and usage.

Detailed description

It is a bug related to notes of gauge component. After the change to storybook4 they are not rendered correctly.

Steps to reproduce the issue

1. Run storybook
2. Open Notes for the Gauge component

The repository does not currently have a build to create a packaged, minified version of the compoentts.

Investigate/create a build for a the library.

Detailed description

Buttons should be assigned type button|submit|reset as per https://www.w3schools.com/tags/att_button_type.asp

Not doing so means buttons wrapped in a form submit in chrome by deault.

Steps to reproduce the issue

1. Type some text into the input
2. Click the button, it automatically submits. This may be desirable.
3. Click on the tiles expand button, the same happens. This is not desirable.

Solution

• Add a default type for all buttons but allow the user to override.
• submit for actual CvButton
• button for others.

Additional information

• Screenshots or code
  https://codepen.io/lee-chase/pen/6065b0e5f1ee791aedb6069380366baa
  

A number of components are wrapped with bx--form-item which adds styling. Make this optional in all cases, as per cv-select which formItem can be set to false.

Note: Need to consider that some components would have multiple roots if we simply removed the bx--form-item element.

• cv-checkbox
• cv-date-picker
• cv-file-uploader
• cv-number-input
• cv-radio-group
• cv-search
• cv-select
• cv-slider
• cv-text-area
• cv-text-input
• cv-time-picker
• cv-toggle

Is your feature request related to a problem? Please describe.
Add a Vue.js implementation of the carbon data-table components http://www.carbondesignsystem.com/components/data-table

Describe the solution you'd like
Single file templates, notes and story as per other components.

Ideally, it should not rely on core javascript.

Describe alternatives you've considered
Initial version can rely on core carbon javascript.

Additional context
Add any other context or screenshots about the feature request here.

Todo:

• Add filter
• Add selection and associated controls
• Add toolbar
• Add overflow menu to rows
• HTML table cell content
• Update notes file

Provide a v-model for CvFileUploader.

NOTE: It is understood that valid file handlers are only available via a file selection dialog.

The library does not currently run any tests during compilation, introduce a testing system to the library.

NOTE: It is not expected that tests for the whole library are added. Testing as part of the build for one component and documentation as to how tests are added to components.

SEE: React and Angular test implemenations for possible patterns to follow.

Is your feature request related to a problem? Please describe.
according to the textinput description, adding a bx--form-requirement element below the element should display a correctly formatted error message.

Describe the solution you'd like
cv-text-input should accept slots for helper text and error text (similar to number-input)

Describe alternatives you've considered
This could be done with text properties instead, but slots give more control and this is the strategy already used by numberinput

Additional context
Number field looks like it already includes both of these options, so this may already be on the queue for making text-input vue native, I don't know. I would think cv-text-input is the most common of all the form fields

Is your feature request related to a problem? Please describe.
Add a Vue.js implementation of the carbon bar-graph component http://www.carbondesignsystem.com/data-vis/bar-graph

Describe the solution you'd like
Single file templates, notes and story as per other components.

Ideally, it should not rely on core javascript.

Describe alternatives you've considered
Initial version can rely on core carbon javascript.

Additional context
Add any other context or screenshots about the feature request here.

Items left to do:

• Make y-axis grid lines optional via an attribute.
• Enable locales for formatting x and y scale labels.
• Enable accessibility of generated content
• Enable client to supply data values to be used on the scales when there is no data.
• More and better stories.
• Full review of API and code.

Is your feature request related to a problem? Please describe.
Add a Vue.js implementation of the carbon guage component http://www.carbondesignsystem.com/data-vis/scatter-plot

Describe the solution you'd like
Single file templates, notes and story as per other components.

Ideally, it should not rely on core javascript.

Describe alternatives you've considered
Initial version can rely on core carbon javascript.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
Add a Vue.js implementation of the carbon line-graph component http://www.carbondesignsystem.com/data-vis/line-graph

Describe the solution you'd like
Single file templates, notes and story as per other components.

Ideally, it should not rely on core javascript.

Describe alternatives you've considered
Initial version can rely on core carbon javascript.

Additional context
Add any other context or screenshots about the feature request here.

Detailed description

With .babelrc in the root folder it is not possible to run "yarn build" successfully.

Detailed description

It is a bug related to Gauge Component. When a user updates 'amount' or 'total' property, arc is not visually updated.

Steps to reproduce the issue

1. Run storybook
2. Set 'amount' to 5 (arc is not visual updated)
3. Set 'total' to 10 (arc is not visual updated)

Additional information

• Discovered by @lee-chase

Version 0.2.0
http://vue.carbondesignsystem.com/?selectedKind=CvTile&selectedStory=expandable

Additional information

• Screenshots or code