Feather DS - a Vue 3 based design system built around simplicity, consistency, and accessibility

Last update: Dec 15, 2022

Related tags

Overview

Feather Design System

Introduction

Feather Design System is a Vue-based design system for creating consistent web UIs that follow best practices for typography, contrast, and layout.

Documentation

Full documentation can be found at https://feather.nanthealth.com/

Install

All Feather Design System packages exist under the @featherds npm scope. For details on all packages available please checkout the Documentation specifically the Components section which will detail what package to install to begin using the component.

Comments

Vite Version incompatibility with feather styles
This can potentially be broken into multiple issues:

When trying to integrate feather packages (0.11.2) with vite 3 (using vite-plugin-ssr), I get the following error when trying to load my app: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for C:\projects\shared\allpayer-plan-updates-portal\[email protected]\styles\dist\style.css at new NodeError (node:internal/errors:372:5)

Relevant packages:

vite-plugin-ssr 0.4.19

vite 3.0.3

@vitejs/plugin-vue 3.0.3

@featherds/styles 0.11.2

When I use @feather 0.11.2 and vite 2.9.15, I receive the same error as mentioned above: 1:31:18 PM [vite] Error when evaluating SSR module /renderer/PageShell.vue: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for C:\projects\shared\allpayer-plan-updates-portal\[email protected]\styles\dist\style.css

Relevant packages:

vite-plugin-ssr 0.4.19

vite 2.9.15

@vitejs/plugin-vue 2.3.4

@featherds/styles 0.11.2

When I use @feather 0.10.7 and vite 3.0.3 I get a different error: C:\projects\shared\allpayer-plan-updates-portal\app\[email protected]\styles\dist\app.js:1 import "./style.css"; ^^^^^^

SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:352:18)

Relevant packages:

vite-plugin-ssr 0.4.19

vite 3.0.3

@vitejs/plugin-vue 3.0.3

@featherds/styles 0.10.7
opened by mrw006 6

TS compile errors 'Timeout' is not assignable to type 'number'

A couple build errors with 0.10.3. --skipLibCheck not working in this case as it seems to only apply to .d.ts files. Perhaps there's another workaround but I'm not sure.

node_modules/@featherds/ripple/src/components/FeatherRipple.vue:67:11 - error TS2322: Type 'Timeout' is not assignable to type 'number'.

67           this.failsafe = setTimeout(() => {

node_modules/@featherds/select/src/components/FeatherSelect.vue:315:7 - error TS2322: Type 'Timeout' is not assignable to type 'number'.

315       this.delayTimeout = setTimeout(() => {

opened by mikewrosey 6

Tooltip type errors

A couple more for the tooltip, related to #87. Not sure about the one with the missing [RefSymbol].

node_modules/@featherds/tooltip/src/components/FeatherTooltip.vue:75:9 - error TS2322: Type 'Timeout' is not assignable to type 'number'.

75         timeout = setTimeout(showTooltip, props.enterDelay);
           ~~~~~~~

node_modules/@featherds/tooltip/src/components/FeatherTooltip.vue:80:7 - error TS2322: Type 'Timeout' is not assignable to type 'number'.

80       timeout = setTimeout(hideTooltip, props.exitDelay);
         ~~~~~~~

node_modules/@featherds/tooltip/src/components/FeatherTooltip.vue:103:38 - error TS2345: Argument of type 'Ref<Document>' is not assignable to parameter of type 'Ref<Window | HTMLElement | Document>'.
  Property '[RefSymbol]' is missing in type 'Ref<Document>' but required in type 'Ref<Window | HTMLElement | Document>'.

103     const activateScroll = useScroll(documentRef, () => hideTooltip(true));
                                         ~~~~~~~~~~~

  node_modules/@vue/reactivity/dist/reactivity.d.ts:194:5
    194     [RefSymbol]: true;
            ~~~~~~~~~~~
    '[RefSymbol]' is declared here.


Found 3 errors in the same file, starting at: node_modules/@featherds/tooltip/src/components/FeatherTooltip.vue:75

opened by mikewrosey 5

Cannot get latest versions working with Vitest

Tests work fine in v0.10.17. If we update to any version beyond that, we get the following. Any suggestions would be helpful. Thanks.

FATAL ERROR: v8::ToLocalChecked Empty MaybeLocal.
 1: 00007FF714151B4F v8::internal::CodeObjectRegistry::~CodeObjectRegistry+115135
 2: 00007FF7140E0BA6 v8::internal::MicrotaskQueue::GetMicrotasksScopeDepth+67398
 3: 00007FF7140E1A5D node::OnFatalError+301
 4: 00007FF714AF58B5 v8::api_internal::ToLocalEmpty+53
 5: 00007FF7140D842F v8::internal::MicrotaskQueue::GetMicrotasksScopeDepth+32719
 6: 00007FF7140CBE8B v8::base::CPU::has_sse+42331
 7: 00007FF7141B3A57 uv_timer_stop+1207
 8: 00007FF7141AFFFB uv_async_send+331
 9: 00007FF7141AF78C uv_loop_init+1292
10: 00007FF7141AF92A uv_run+202
11: 00007FF71417E825 node::SpinEventLoop+309
12: 00007FF71401BBF0 v8::internal::interpreter::BytecodeLabel::bind+35760
13: 00007FF714017438 v8::internal::interpreter::BytecodeLabel::bind+17400
14: 00007FF71419FFFD uv_poll_stop+557
15: 00007FF715097C20 v8::internal::compiler::RepresentationChanger::Uint32OverflowOperatorFor+146432
16: 00007FFE13607034 BaseThreadInitThunk+20
17: 00007FFE137426A1 RtlUserThreadStart+33
error Command failed with exit code 134.

opened by mikewrosey 4

Review the interaction paradigm for Date Input
The Date Input control has two methods of entering data - the spinners in the input control and the date picker menu. The internal value is then set until;

The clear button is pressed

A different value is selected

The spinners do not get parsed as a value until they are fully completed, and while this is desirable on initial input. this results in some quirks. The main issue is that if you are to edit a value, we have a situation where the internal value and the value displayed in the spinners do not match. This means you can delete parts of the values in the spinners, tab out of the control and now the values are inconsistent with the value represented in the form.

I suggest there are several possible solutions to this;

When the user tabs away from the control, reset all the spinners to represent the internal value if a new valid value is not parse-able

If the user presses delete on any spinner to clear the value, clear the internal value

Prevent pressing of delete on the spinners and simply rely on the 'clear' functionality

Will consult with other stakeholders
bug enhancement
opened by jmillar-nanthealth 3
add a basic README that points to the docs

I assume eventually the docs will be at a "real" URL, but this at least gives a pointer to the docs for now since the repo is still very sparse on info.

opened by RangerRick 3
AutoComplete single selection acts differently in some scenarios

In some scenarios, I'm seeing that the Autocomplete will auto-select elements, and in other scenarios it will not. I have been comparing for instance the Feather Single Autocomplete demo (https://feather.nanthealth.com/demos#/Autocomplete-Single) with the equivalent in our internal Nuxt playground. In the Nuxt demo, if you open the dropdown, it will have an element highlighted, and then when you blur the control, it will auto-select the highlighted element. In the Feather demo linked above, it does not auto-highlight an element and will therefore not auto-select it.

This is a bug, and I believe the Nuxt behaviour is as designed, but this results in some disparities which we will need to consider - in the Nuxt instance, it is difficult to actually clear the input to be empty and it's non intuitive. In the Feather demo, you simply click clear and unless you specifically select or highlight something, then the element will remain cleared.
bug enhancement

opened by jmillar-nanthealth 2
Rendering Lists can be expensive

Fixes #66

I delayed rendering lists that appear in menus until after the menu has been asked to open. The only real benefit here is when a user would have multiple selects for example on a page, improves initial render speed.

Quite an impactful change but from what I can see everything is behaving as expected.

opened by rikbrowning 2
feat(wdio): input and autocomplete objs

Something strange is going on with Safari seems to be failing but passing on retries, let me know if you are happy for me to release and we can try to triage after?

opened by rikbrowning 1
FeatherDialog 'relative' option is broken and is rendered in body

There is a Teleport element at the base of Feather Dialog and it should be disabled for the use of the relative option. As of now, the relative option is being applied the styles but is not in the correct position in the DOM
bug

opened by jmillar-nanthealth 1
NuxtJS 3 Warning

I am getting this warning when importing featherds modules for the new NuxtJS 3 app we are developing. Any idea what to do about this? (it happens to all feather modules)

WARN @featherds/button doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
enhancement

opened by cdeepal 1
Accessibility tweak for PDF Viewer - tab order

There has been discussion around the tab order in PDF Viewer - the back button is currently placed at the end of the DOM and so that element is the final element in the tab order after the internal PDF viewer etc. As the control has more internal controls and more complexity over time, the concern is that this will be an issue as it will take longer and longer to find. The proposed solution is to re-order it so it tabs as it is visually on the page - that is, it should be the first tab stop, rather than the last.
enhancement question

opened by jmillar-nanthealth 0

Releases(0.12.14)

0.12.14(Dec 15, 2022)
Bug Fixes

DateInput: prevent immediate update of day/month/year to undefined #164 (1b31830)

What's Changed

fix(DateInput): prevent immediate update of day/month/year to undefined #164 by @gchesnel in https://github.com/feather-design-system/feather-design-system/pull/166

New Contributors

@gchesnel made their first contribution in https://github.com/feather-design-system/feather-design-system/pull/166

Full Changelog: https://github.com/feather-design-system/feather-design-system/compare/v0.12.13...0.12.14
Source code(tar.gz)
Source code(zip)
v0.12.13(Dec 14, 2022)
Bug Fixes

wdio: moving gitignore so that JS files can be published (64a9c1b), closes #162

What's Changed

fix(wdio): moving gitignore so that JS files can be published by @rikbrowning in https://github.com/feather-design-system/feather-design-system/pull/163

Full Changelog: https://github.com/feather-design-system/feather-design-system/compare/v0.12.12...v0.12.13
Source code(tar.gz)
Source code(zip)
v0.12.12(Nov 22, 2022)
Bug Fixes

date-input: resolves #101 - date input calendar dropdowns occasionally cut off text (46901ad)

date-input: trying to improve the way the date parsing and spinners interact (21d532d)

input-wrapper: allow toggling of provided props to correctly toggle classes (908d6bd), closes #160

Features

wdio: input and autocomplete objs (b5fc761)

What's Changed

feat(wdio): input and autocomplete objs by @rikbrowning in https://github.com/feather-design-system/feather-design-system/pull/159

Feature/109 - trying to improve the way the date parsing and spinners interact by @jmillar-nanthealth in https://github.com/feather-design-system/feather-design-system/pull/155

fix(input-wrapper): allow toggling of provided props to correctly toggle classes by @rikbrowning in https://github.com/feather-design-system/feather-design-system/pull/161

Full Changelog: https://github.com/feather-design-system/feather-design-system/compare/v0.12.11...v0.12.12
Source code(tar.gz)
Source code(zip)
v0.12.11(Nov 9, 2022)
Bug Fixes

drawer: making close icon optional (1fa3306)

Full Changelog: https://github.com/feather-design-system/feather-design-system/compare/v0.12.10...v0.12.11
Source code(tar.gz)
Source code(zip)
v0.12.10(Nov 8, 2022)
Bug Fixes

autocomplete: trying to make sync results work (57136b6)

Features

wdio: adding a sample wdio page object for FeatherSelect (51c2f10)

wdio: selectbyText for FeatherSelect (40bd85e)

What's Changed

feat(wdio): adding a sample wdio page object for FeatherSelect by @rikbrowning in https://github.com/feather-design-system/feather-design-system/pull/158

Full Changelog: https://github.com/feather-design-system/feather-design-system/compare/v0.12.9...v0.12.10
Source code(tar.gz)
Source code(zip)
v0.12.6(Nov 3, 2022)
Bug Fixes

date-input: date could not be updated via typing on spin buttons (be86439)

dialog: allowing data-ref-id to be passed in (805044c)

What's Changed

Internal fixes by @rikbrowning in https://github.com/feather-design-system/feather-design-system/pull/156

build: updated unit tests to use vitest by @rikbrowning in https://github.com/feather-design-system/feather-design-system/pull/157

Full Changelog: https://github.com/feather-design-system/feather-design-system/compare/v0.12.5...v0.12.6
Source code(tar.gz)
Source code(zip)
v0.12.5(Oct 12, 2022)
Bug Fixes

app-layout: addresses #152 - SkipToContent link changes routes in vue-router (279e881)

Source code(tar.gz)
Source code(zip)
v0.12.4(Oct 7, 2022)
Bug Fixes

AppLayout: tweaked the resolution made prior for 'skip to content' when using vue-router (8ebcf9c)

Source code(tar.gz)
Source code(zip)
v0.12.3(Oct 6, 2022)
Bug Fixes

aligning border radius to 4px (f424fac)

app-rail: hover functionality should now work with SSR (eac8932), closes #148

AppBar: resolving jumping to main content when vue-router is in use (58612f6)

Features

dialog: adding lightbox-background variable (8a0da7f), closes #138

Source code(tar.gz)
Source code(zip)
v0.12.2(Sep 8, 2022)
Bug Fixes

date-input: no longer emits 2 update:modelValue events (7dd5b80), closes #142

input: wrapper color fix now doesn't need background prop (16839dd)

input: wrapper color fix now doesn't need background prop (971d2d9), closes #136

nav-rail: adding keyboard support for expand (1753ba7), closes #141

Features

date-input: adding ability to paste in preformatted date strings (d8ccf7b), closes #123

popover: adding new popover component (060044a)

Source code(tar.gz)
Source code(zip)
v0.12.1(Aug 26, 2022)
0.12.0 (2022-08-26)

Bug Fixes

demos: resolving a couple of demo issues so they work correctly in SSR (d3f8c67)

dialog: resolving #128 - 'relative' option is broken as elements being appended to body (05e504c)

Source code(tar.gz)
Source code(zip)
v0.11.2(Aug 9, 2022)

Source code(tar.gz)
Source code(zip)
v0.11.1(Aug 9, 2022)
Bug Fixes

keyCode: remove unused import (a29f35f)

Features

build: ensuring that all packages are being built with the correct extensions (f9bd481)

Source code(tar.gz)
Source code(zip)
v0.10.17(Jul 28, 2022)
Bug Fixes

snackbar: timeout not resuming when snackbar is blurred (188e418)

Features

adding ability to clear form validation (bffb2d1), closes #121

menu: align to attrs/on api from tooltip (e2d1425), closes #118

BREAKING CHANGES

menu: No longer need to use the menu-trigger attribute. Instead you need to use the trigger scoped slot properties attrs and on. This change is a breaking change for FeatherDropdown.

Source code(tar.gz)
Source code(zip)
v0.10.15(Jul 14, 2022)
Bug Fixes

app-layout: moved mobile logic for rail slot to theme were it is used (c4991e8)

ci: rolling back external PR change (2206445)

Features

app-rail: adding app rail and app header #94 (9c9d1d2)

card: card implementation (b480d82)

Source code(tar.gz)
Source code(zip)
v0.10.14(Jun 28, 2022)
Bug Fixes

menu: fixing issues with aria ids (5810df6)

menu: ssr fix, #110 (0c8ff2a)

Source code(tar.gz)
Source code(zip)
v0.10.13(Jun 13, 2022)
Bug Fixes

app-bar: cast to fix type issue for #103 (382a66e)

autocomplete: addressing some suggested accessibility fixes (0d61471)

Autocomplete: attempting to improve autocomplete with screen readers (4915cf0)

Autocomplete: review comments (6964816)

autocomplete: wip - trying to fix the accessibility issues (4b73709)

ci: trying to allow external PR build (a8942e4)

Source code(tar.gz)
Source code(zip)
v0.10.12(May 26, 2022)
Bug Fixes

typings: updated to latest deps, fixes #100 (651b299)

Source code(tar.gz)
Source code(zip)
v0.10.11(May 23, 2022)
Bug Fixes

protected-input: emitting update event and fix type issue (5fe52d4)

Source code(tar.gz)
Source code(zip)
v0.10.10(May 10, 2022)
Bug Fixes

toolip: tooltip doc examples broken due to SSR, tracking ticket #95, also force close on scroll (daa3224)

Source code(tar.gz)
Source code(zip)
v0.10.9(May 10, 2022)
Features

tooltip: creation of FeatherTooltip (c932f2e)

Source code(tar.gz)
Source code(zip)
v0.10.8(Apr 26, 2022)

Source code(tar.gz)
Source code(zip)
v0.10.7(Apr 22, 2022)
Bug Fixes

ripple: resolving #87 (12a84d7)

Source code(tar.gz)
Source code(zip)
v0.10.6(Apr 22, 2022)
Bug Fixes

ts: rework of solution for #87 (534341f)

Source code(tar.gz)
Source code(zip)
v0.10.5(Apr 22, 2022)
Bug Fixes

addresses #87 - TS compile errors 'Timeout' is not assignable to type 'number' (4e5be62)

Source code(tar.gz)
Source code(zip)
v0.10.3(Apr 19, 2022)
Bug Fixes

bringing Textarea in line with naming of data-ref-ids/classes and updating snapshots (3eaae9d)

date-input: no longer fires validation when moving between spinners (1db8dc1)

date-picker: resolving a set of spacing issues - closes #77 (4079107)

dropdown: standard mode now works when being toggled from a different width (298cbb4)

menu: resolves #73 - making data-ref-id tags clearer for testing (28e6069)

menu: trying to improve initial render performance (f9fd2cf)

validation: restored prior errorMessages prop in Validation Header (fedb1f3)

Features

checkbox: converted to typescript (ede65f0)

chip: adding better TS support (0ec8b6d)

date-input: adding an ability to reset back to initial state (251c160)

date-input: update to use TS (f3331ae)

dialog: updated to TS (26774ab)

drawer: upgraded to TS (808a699)

dropdown: update to TS (b0b97ad)

expansion: upgrade to TS (45f6d79)

footer: updated to TS (9dc09fd)

icon: updating to ts (28faf24)

input-helper: updated to ts (a970a1c)

input: update to TS (f7ac2a7)

list: updated to TS (5d8a17f)

megamenu: upgraded to TS, (1e7adaa)

menu: updating to TS (d099b71)

navigation-rail: updated to ts (a59721f)

pagination: updated to TS (e86b742)

pdf-viewer: updated to TS (33368c6)

progress: updated to TS (145fa87)

protected-input: updated to TS (decc311)

radio: updated to TS (f2e8487)

ripple: updated to TS (717512d)

select: updated to TS (5b1309b)

snackbar: updating to TS (28338aa)

switch: updated to TS (8cfcbf7)

table: udpate to TS (c986cd6)

tabs: update to TS (8036125)

validation: improving typing (ccfaa3c)

Source code(tar.gz)
Source code(zip)
v0.10.2(Mar 29, 2022)
Bug Fixes

build: resolved #70 - featherds/styles theme CSS files not being generated (06d9367)

layers: removing the visibility:hidden from the calculating portion (af8db3c)

validation: refactored validation unmounting pattern and some demos (d97eb6c)

Source code(tar.gz)
Source code(zip)
v0.10.1(Mar 22, 2022)
0.10.0 (2022-03-22)

Bug Fixes

app-layout: adding dialog dep (466d0e9)

button: prevent default on disabled btn as anchor tag (586dc3a)

date-input: resolving esc key propagating when closing calendar (f1a9d4a)

input-helper: resolving typo in TS types (616a840)

layers: various issues with correct focus, positioning and tests resolved (6f4a671)

snackbar: breaking out Snackbar Group props with better defaults and proper z-index values (d8756a0)

spacing: removing external spacing from form components, moved to rem #25 (18fb8d5)

validation: deregister controls from validation when they are unmounted, resolves #64 (cf04bec)

Features

menu: using teleport/layering system (141823b)

snackbar: feather snackbar implementation (5e9bafb)

ts: add better TS support to buttons (e5afe57)

ts: app-bar converted to have better prop typing (651d176)

Source code(tar.gz)
Source code(zip)
v0.9.6(Feb 17, 2022)
Bug Fixes

#35: feather PDF Viewer changes the route when the back button is clicked (06fd9a5), closes #35

#39: date input clear button works when value is typed in (f73645f), closes #39

build: adding CDN purge to the 'docs' action (151309f)

date input tests now fully running (74e2ab2)

date-input: preventing data-ref-id duplication. fixes #51 (945a660)

input: hide label should now be accessible with axe wcag standards, fixes #36 (b735b67)

select: clicking clear icon now behaves as expected #33 (2dd719f)

select: fixing validation on keyboard navigation, fix #44 (9cec288)

updating PDF viewer titles and updated missed Readme for Autocomplete (2c9e4cd)

Features

algolia: updating algolia and fixing skipped urls, closing #52 (bc22cc0)

validation: review ideas (27979a9)

vuepress: upgrading vuepress beta, closing #52 (5bf8b2e)

Source code(tar.gz)
Source code(zip)
v0.9.5(Feb 14, 2022)
Bug Fixes

adding data-ref-id to autocomplete and error icon (f2ef596)

Source code(tar.gz)
Source code(zip)