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

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

    Vite Version incompatibility with feather styles

    This can potentially be broken into multiple issues:

    1. 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
    1. 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
    1. 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'

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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)

  • 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)

  • v0.12.4(Oct 7, 2022)

  • v0.12.3(Oct 6, 2022)

  • 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)

  • v0.11.1(Aug 9, 2022)

  • 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)

  • v0.10.14(Jun 28, 2022)

  • v0.10.13(Jun 13, 2022)

  • v0.10.12(May 26, 2022)

  • v0.10.11(May 23, 2022)

  • v0.10.10(May 10, 2022)

  • v0.10.9(May 10, 2022)

  • v0.10.8(Apr 26, 2022)

  • v0.10.7(Apr 22, 2022)

  • v0.10.6(Apr 22, 2022)

  • v0.10.5(Apr 22, 2022)

  • 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)

  • 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)

Owner
Feather Design System
Feather Design System
Accessibility auditing for Vue.js applications.

Accessibility auditing for Vue.js applications by running dequelabs/axe-core validation on the page you're viewing, axe-core will run 1 second after the last VueJS update (with a 5 seconds debounce max wait).

Mailbutler 0 Dec 4, 2020
✋ Accessibility analyzer for your frontend.

Enabler’s aim is to give developer ability to increase accessibility in development stage, but not after publishing site/application to production.

Yuriy Musienko 18 Dec 8, 2022
Vue-playground-todo-list - playing around with vue.js

vue-playground-todo-list Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm r

Michael Wagner-Kulovits 0 Jan 3, 2022
Plyaing around with opentype.js

vue-opentypejs Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Simon Tarchichi 1 Aug 9, 2022
A restraunt management system app in vue. It has user login system with validation.

Restraunt-Management-System-Vue - A restraunt management system app in vue. It has user login system with validation.

Anisha Gupta 0 Jan 8, 2022
Ticket-system-app - A Ticket System App Using Vue.Js

Ticket System App ?? Description: It is a basic system in which an employee logs

Luis J. Santana 4 Dec 15, 2022
Solar System - Interactive Solar System 3D replica 🪐

Solar System ?? Interactive Solar System 3D replica ?? Try it out! Made with ThreeJS and Vue How does it work? Move around the Solar system with mouse

Jan Pánek 19 Jan 3, 2023
The @obewds/vue-el modular design system component for Vue.js

The @obewds/vue-el modular design system component for Vue.js

OBE:WDS 1 May 4, 2022
Vue Components for Global Brain Design System.

Sefirot Sefirot is a collection of Vue Components for Global Brain Design System. Components are meant to be clean, sophisticated, and scalable. Sefir

Global Brain 120 Dec 25, 2022
Site de l'incubateur des territoires basé sur le Design System de l'État

incubateur-territoires Build Setup # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn dev # build for production

Incubateur des Territoires 1 Mar 14, 2022
fendThorne - a decentralised cloud storage system built for army personnel to securely upload, download and share files

fendThorne is a decentralised cloud storage system built for army personnel to securely upload, download and share files. It uses Arcana SDK and Google OAuth under the hood for storage of files and authentication of users respectively.

shourya 5 Apr 5, 2022
An e-commerce system based on Spring Boot 2.6 and Vue3

Jake-mall is an e-commerce system based on Spring Boot 2.6 and Vue3 and related technology stack.

Tenode 3 May 18, 2022
Whiteboard: a learning management system built with vue

Table of Contents About Whiteboard Build with Getting Started Desktop Screenshot

Ahmed Mostafa Kamel 5 Oct 30, 2022
Otel Rezervation System Built With Vue

Otel Rezervation System Built With Vue

Mustafa 3 Feb 21, 2022
Solar System SPA website built using Vue.js

solar-system Note: While running dev server, remove '/solar-system/' from public asset paths This template should help get you started developing with

Manan Karnik 2 Oct 20, 2022
Solar System SPA website built using Vue.js

solar-system Note: While running dev server, remove '/solar-system/' from public asset paths This template should help get you started developing with

Manan Karnik 2 Oct 20, 2022
A Cron expression UI component based on Vue3 and Ant Design Vue.

vue3-cron A Cron expression UI component based on Vue3 and Ant Design Vue. English | 简体中文 Preview Supported format * * * * * * * ┬

MaxWu 5 Dec 11, 2022
Vue.js based REST-ful CRUD system

the project is not supported If you want to contribute to this project please fork from this project or email me to add you to what-crud group Vue CRU

What CRUD! 776 Dec 30, 2022
A Vue based web server with an integrated API system

Core Server https://www.core-server.io Quick Installation To install Core Server and start a new project, run the following commands: npm install -g c

bit4you 16 Dec 14, 2022