autodesk / hig Goto Github PK
View Code? Open in Web Editor NEWAutodesk's unified design system
Home Page: https://storybook.weave.autodesk.com
License: Apache License 2.0
Autodesk's unified design system
Home Page: https://storybook.weave.autodesk.com
License: Apache License 2.0
I don't think we should put any copy into the hig by default unless you want to fully support internationalization and localization.
Let's remove this in favor of a default/method?
remove global normalize.css, all normalization should be done in the component itself, we cannot rely on global overrides as we need to try to make everything encapsulated
add a section to the README.md
file about how to setup and run the test framework + guidelines on how to write a test
implement typography as defined in https://share.abstractapp.com/231255d4-ce79-4df4-9c58-d904ad660d96
typography
elements that can be used as classes as discussedCreate Grid (in /src/web/basics/grid
) with breakpoints and gutters as defined in this sketch file: https://share.abstractapp.com/269b1d40-a6d7-414f-a2cb-efcdb0237fd6
Consider CSS Wizardry for inspiration
I'd like an API for enumerating icons so that I can build better property validation.
Example of what I'd like to do:
// assuming Item is a react component:
Item.propTypes = {
icon: PropTypes.oneOf(['icon1', 'icon2'])
}
<Item icon="random-icon" />
// Will log an error to the console because random-icon is not icon1 or icon2.
import { Icons } from 'hig.web';
Object.keys(Icons);
This would let me do the following: PropTypes.oneOf(Object.keys(Icons)
@recyclerobot thoughts?
Constructing a hig.web button sets the title attribute, calling setTitle does not modify the title attribute, only the textContent child
write docs about interface.json architecture and reasoning
After discussions with the content team, they strongly urged us to use the term "profile" instead of "avatar" for the top right area in the global nav, so please change the term "avatar" to "profile" to be more in line with the content guidelines of the HIG
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Use uuid module instead
As the system
when an unintended visual change is made
I can fail the build
so hig.web developers don't make unintentional visual changes
Crib Gemini test setup from orion.
Add automated unit tests for HIG.web components.
Consider using jester snapshot approach used in Orion.
As the system
I can deploy a successful build
so developers and stakeholders can see the progress we make
Use GitHub pages
see design: https://wiki.autodesk.com/display/HIG/Form+Elements
Basic form elements list:
methods are not properly implemented according to interface definition
As the system
When a developer pushes to a branch or merges to master
I can run the tests
so developers know if they've broken the build.
See design here: https://wiki.autodesk.com/display/HIG/Global+Nav
Create responsive states of global nav as defined in the wiki docs
see design: https://wiki.autodesk.com/display/HIG/Form+Elements
"TextArea": {
"methods": {
"setLabel": {
"desc": "sets the label",
"params": [
"{String} label - label for the text area"
]
},
"setInstructions": {
"desc": "sets the instruction text",
"params": [
"{String} instructions - instructions for the text area"
]
},
"setPlaceholder": {
"desc": "sets the placeholder",
"params": [
"{String} placeholder - text that appears in the text area when empty"
]
},
"setValue": {
"desc": "sets the value",
"params": [
"{String} value - the text inside of the text area"
]
},
"onBlur": {
"desc": "Calls the provided callback when focus leaves the text area",
"params": "HIG.abstract.EventObject.params",
"returns": "HIG.abstract.EventObject.returns"
},
"onChange": {
"desc": "Calls the provided callback when the user enters text into the text area",
"params": "HIG.abstract.EventObject.params",
"returns": "HIG.abstract.EventObject.returns"
},
"onFocus": {
"desc": "Calls the provided callback when focus enters the text area",
"params": "HIG.abstract.EventObject.params",
"returns": "HIG.abstract.EventObject.returns"
}
},
"defaults": {
"label": "{String} label for the text area",
"instructions": "{String} instructions for the text area",
"placeholder": "{String} text that appears in the text area when empty",
"value": "{String} the text inside of the text area"
}
}
see design: https://wiki.autodesk.com/display/HIG/Form+Elements
Basic form elements list:
Example Flyout: https://wiki.autodesk.com/display/HIG/Profile+Flyout
Create basics flyout, a generic re-usable basic element that has an arrow that attaches itself to a specific location with the arrow
takes a max-height and max-width as input and a top/left/right/bottom arrow location, investigate if automatic placement of flyout on the page is doable with pure CSS (and JS), not breaking the stateless JS goal
add aggressive caching for fonts.autodesk.com
Update the globalnav according to new design spec: https://wiki.autodesk.com/display/HIG/Global+Nav
for design questions around responsive design, ask Valentijn Kint
as @nfiniteset mentioned in the meeting, we can flatten the structure to exclude the container from the interface (https://github.com/adsk-hig/hig/blob/master/src/interface/interface.json#L46)
so GlobalNav has addSidebar
, addTopNav
, addSubNav
and addSlot
As a developer
I want my changes compiled and served
so I can see what I'm working on during development
Add a web server to the development watch command in web pack.
npm run watch
a nohup.out
file is created by circle ci and is failing the diff test
Differing files:
---------------------------------
M dist/hig.css
M dist/hig.js
M index.html
?? nohup.out
---------------------------------
JS:
refactor current code rather than using a polyfill, for example, we use 1 Object.assign, refactoring this instance is more light weight than using a full polyfill for everything
CSS:
look into unsupported properties and weird behaviours on IE11
Tip:
use VM to test IE11, using virtualbox and modern.ie it's easy and free
when double clicking fast on a subnav item, you select that item, make Tab
label unselectable in CSS
As a developer
I can add tabs to the global nav
so my users can access stuff under them
Pull request: #7
Taxonomy on wiki
Sketch file on Abstract
"TextField": {
"methods": {
"setInstructions": {
"desc": "sets the instructions",
"params": [
"{String} instructions for our text field"
]
},
"setLabel": {
"desc": "sets the label",
"params": [
"{String} label for our text field"
]
},
"setName": {
"desc": "sets the name of the field as submitted with a form",
"params": [
"{String} label used to identify the field when submitted"
]
},
"setPlaceholder": {
"desc": "sets the placeholder",
"params": [
"{String} placeholder for our text field"
]
},
"setValue": {
"desc": "sets the value",
"params": [
"{String} value for our text field"
]
},
"required": {
"desc": "makes field required",
"params": [
"{String} required label text"
]
},
"noLongerRequired": {
"desc": "makes field not required"
},
"disable": {
"desc": "Disable the text field, preventing user interaction"
},
"enable": {
"desc": "Enable the text field, reenabling user interaction"
},
"onBlur": {
"desc": "Calls the provided callback when user puts blur on the input field",
"params": "HIG.abstract.EventObject.params",
"returns": "HIG.abstract.EventObject.returns"
},
"onChange": {
"desc": "Calls the provided callback when user changes the value of the text field then moves focus elsewhere",
"params": "HIG.abstract.EventObject.params",
"returns": "HIG.abstract.EventObject.returns"
},
"onFocus": {
"desc": "Calls the provided callback when user puts focus on the input field",
"params": "HIG.abstract.EventObject.params",
"returns": "HIG.abstract.EventObject.returns"
},
"onInput": {
"desc": "Calls the provided callback when user changes the value of the text field",
"params": "HIG.abstract.EventObject.params",
"returns": "HIG.abstract.EventObject.returns"
}
},
"defaults":{
"label": "{String} label for our text field",
"name": "{String} name identifier for our text field",
"placeholder": "{String} placeholder text for our text field",
"value": "{String} (optional) input value for text field",
"instructions": "{String} (optional) instructions under the text field",
"required": "{Boolean} (optional) is the field required or not",
"requiredLabel": "{String} (optional) required text"
}
}
design: https://wiki.autodesk.com/display/HIG/Form+Elements
initial work on features/formelements branch
design: https://wiki.autodesk.com/display/HIG/Buttons
Interface:
Button
Icon Button
Split Button
Segmented
TODO:
add responsive breakpoints as mixin helpers in SASS so we can use them in components to define responsive behaviour: https://share.abstractapp.com/269b1d40-a6d7-414f-a2cb-efcdb0237fd6
Right now all events have the same description "listen to events" which doesn't give a clue as to when the event is triggered.
It would be nice to have a content specific description.
Example:
Item.onClick - triggered when the item is clicked on
Item.onHover - triggered when the item is hovered over.
It seems silly for onClick and onHover but as the events become more abstract this will be important.
implements HIG colors as defined in sketch file: https://share.abstractapp.com/79c35ffa-5f38-4d1c-9cdc-92a614cb1e92 as SASS variables in src/web/basics/colors
wiki docs: https://wiki.autodesk.com/pages/viewpage.action?spaceKey=HIG&title=Colors
All info in Wiki: https://wiki.autodesk.com/pages/viewpage.action?pageId=315334705
As a developer
I can add an avatar to the GlobalNav
so my user knows which account is signed in
A shortcut is a component
that goes inside TopNav
and has an icon
and a link
or an onClick
or a Flyout (?)
See the Components - Global Navigation.sketch file, layer Topnav + Subnav.
pure CSS possible or need JS?
profile partial misses following defaults:
paths in our index.html are wrong for tests: https://adsk-hig.github.io/hig/
also; please exclude gemini test html files from there
Expected Behaviour:
The icon glyph should show up instead of the text
Preferably
Docs: https://wiki.autodesk.com/display/HIG/Profile+Flyout
This issue was filed against Orion, but it's a bug in hig.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.