esri / calcite-app-components Goto Github PK
View Code? Open in Web Editor NEWA collection of calcite components for building single page applications
Home Page: https://esri.github.io/calcite-app-components/
License: Other
A collection of calcite components for building single page applications
Home Page: https://esri.github.io/calcite-app-components/
License: Other
Currently, the Tip
component relies on a data attribute data-group-title
.
Using a custom attribute would be a better best practice. There is also no documentation or reference in the code that a user is expected to set this data attribute.
Use a custom attribute starting with text
instead of a data attribute since it is not data, but a text label. Preferably text-group-title
. @Prop textGroupTitle;
text-group-title
.Setup Stencil doc generation
Currently, the cacite-components NPM dependency doesn't have any fies in it when you do an NPM install.
Pain point: There are no files in dependency
Desired outcome: /node_modules/calcite-components/
has files in it we can use.
A Picker component that allows for the following:
Derived from: https://devtopia.esri.com/WebGIS/ui-components-js/issues/6
User wants to use this multiple select item and receive all that items as an event call back.
note: These modes are tentative. @asangma needs to confirm with design
"Selection mode" means that
"Configuration mode" means that
In "selection mode" user should be able to
In "configure mode" user should be able to
Developer should be able to
Interface
interface CalcitePicker {
@Prop({ reflect: true }) textHeading: string;
@Prop({ reflect: true }) mode: "selection" | "configuration" = "selection";
@Prop({ reflect: true }) multiple = false;
@Prop({ reflect: true }) dragEnabled = false; /* ignored unless mode is configuration */
@Prop({ reflect: true }) editEnabled = false; /* ignored unless mode is configuration */
@Prop({ reflect: false }) data = [];
@Event() calcitePickerSelectionChanged: EventEmitter;
@Method() getSelectedRows()
}
<calcite-picker mode="configuration" multiple="true" dragEnabled="true">
<!-- rows -->
</calcite-picker>
interface CalcitePickerGroup {
@Prop({ reflect: true }) textGroupTitle: string;
}
interface CalcitePickerRow {
@Prop() heading: string;
@Prop() description: string;
@Prop() value: string;
@Prop() selected = false;
@Prop({ reflect: true }) icon: "square" | "circle" | "grip" | null = null;
}
<calcite-picker-row heading="hello world" description="hi" selected value="helloWorld">
<calcite-action slot="secondaryAction"></calcite-action>
<calcite-action slot="editAction"></calcite-action>
</calcite-picker-row>
interface CalciteFilterInput {
@Prop() heading: string;
@Prop() data: Array<Object>;
@Event() calciteFilterChange: EventEmitter;
}
<calcite-filter-input heading="search" onCalciteFilterChange="">
</calcite-filter-input>
Enhancement: Create unit test for position class
Unit test.
Tests
Related to: https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/21372
Goal: Allow a dev to set theme in one place at the highest level while also retaining the flexibility to set a theme on an individual component
We need to prototype:
Setup gh pages with docs and examples
Pain point:
Users cannot see the docs from the web nor see examples
Desired outcome:
Users can view examples and see docs
Enhancement: use textString
as @Prop
for all strings
Currently, we use @Prop labels
or the like for strings. Now, each string should be its own property starting with text
for example textClose
Teams discussion:
Add calcite-action-group justify-bottom
by default with a single action to toggle the expanded
attribute.
Use chevrons-left-16
and chevrons-right-16
as the icons.
Which Component: ActionBar
Decide release schedule + milestones
This is installed and ready for styling.
Need information on positioning #2
Create example Component
Pain point: We should have an example class we can use for creating a new components. we can define how the class is organized and how the parts are grouped with comments.
Desired outcome: A clean simple example gist or file we can use.
...
The Tip Manager responds to changes to the tips nested inside. As of now it detects additions/deletions to the list of tips. Some edge-case scenarios can arise that left unmanaged lead to a poor UX. We should nail down the best UX for these scenarios. Depending on the ideal - we may be able to consolidate code between initialLoad logic, and when one of these modifications occur.
(Still needs to be finalized)
When tips are added or removed
Always update the group title when the selected tip is changed.
Which Component: Tip Manager
Example Use Case:
Automate newline formatting.
Stems from #48 (comment).
Pain point: Having to manually check newline formatting.
Desired outcome: Automate newline usage between class members.
cc @pr3tori4n
API Design
<calcite-flow id="flow-control">
<calcite-flow-panel heading="First Panel">
<div slot="menu-actions">
<button>Save</button>
<button>Cancel</button>
</div>
<div slot="footer-actions">
<button>Save</button>
<button>Cancel</button>
</div>
<p>content 1</p>
</calcite-flow-panel>
</calcite-flow>
back() => Promise<any>
Type: Promise<any>
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
heading |
heading |
string |
null |
|
labels |
-- | Labels |
{ back: "Back", openMenu: "Open menu", closeMenu: "Close menu" } |
|
menuOpen |
menu-open |
boolean |
false |
|
showBackButton |
show-back-button |
boolean |
false |
Event | Description | Type |
---|---|---|
calciteFlowPanelBackClick |
CustomEvent<any> |
|
calciteFlowPanelRegister |
CustomEvent<any> |
|
calciteFlowPanelUnregister |
CustomEvent<any> |
For documentation purposes, it would be useful to have an automated way of keeping track of changes/breaking changes.
CHANGELOG.md
and/or BREAKING_CHANGES.md
auto generated from, ideally, commit messages.
https://devtopia.esri.com/WebGIS/ui-components-js/issues/47
https://github.com/lingui/js-lingui/tree/master/examples
https://lingui.js.org/index.html also has more details on this in the Guides.
Setup autoprefixer
Related Issue: calcite-shell component #3 and #2
Add CalciteShell and CalciteShellPanel- New Components
This is the shell or frame of the application which can house panels, content, header, footer and a floating panel.
Please see this slidedeck for proposed concept.
pass: js-frame
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
primary |
primary |
boolean |
false |
<calcite-shell-panel primary>
<calcite-action-bar slot="action-bar" />
<!-- default slot -->
<calcite-flow-control />
<!-- /default slot -->
</calcite-shell-panel>
<calcite-shell>
<calcite-shell-panel slot="primary-panel" primary />
<calcite-shell-panel slot="contextual-panel" />
<h2 slot="header">My App</h2>
<calcite-tip-manager slot="tip-manager" />
<calcite-floating-panel slot="floating-panel" />
<calcite-action-pad slot="action-pad" />
<!-- default slot -->
<div>MapView | SceneView</div>
<!-- /default slot -->
</calcite-shell>
```https://devtopia.esri.com/WebGIS/ui-components-js/issues/5
https://devtopia.esri.com/WebGIS/ui-components-js/pull/40
Should <calcite-block-section>
be its own component? Currently, it's block-specific, but would there be use cases where the same design would apply in a non-block context?
Topic: Possible new component.
Context: Stemmed from Block PR: #78 (comment)
cc @pr3tori4n
Enhancement: Flow - Menu keyboard navigation
Add ability to navigate the action menu in the Flow header by using the arrow keys.
Currently, the dismissible
property on the calcite-tip
component is true by default.
Because the property wasn't reflecting to the DOM, a user wouldn't know if the tip was dismissible because the attribute was not displayed on the DOM. I think for boolean attributes, we should always reflect to the DOM if necessary. This made for some weird logic where to set the dismissible
property to false, you would need to explicitly toggle the attribute.
The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
I'm trying to think of an example where there is a boolean attribute in HTML that is true by default. Usually, all the boolean attributes are false by default. Things like selected
, disabled
, readonly
. I think we should probably follow the same pattern and only have boolean attributes that are false by default.
If that is the case, we should probably rename this attribute to be something that is false by default. For example,
nonDismissible
attribute: non-dismissible
alwaysVisible
attribute: always-visible
The boolean property is kept in sync with its value on the DOM and does not require setting a string to remove it.
See issue 2 above.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#Boolean_Attributes
https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes
Which Component:
calcite-tip
Github: Setup issue templates
There are some conflicting out-of-the-box rules from Prettier and TSLint. Conflicting ones should be disabled for a consistent formatting experience ๐ ๐ .
Pain point: Conflicting Prettier/TSLint formatting.
Desired outcome: No warnings/errors after formatting code with either tool.
Write tests for Action, ActionBar, ActionPad.
Da tests.
Linting is an easy step to miss. A git hook will ensure it gets executed.
Pain point: People are forgetting to lint their code
Desired outcome: Linting is automated so people don't need to worry about it.
@asangma for now let this stay in app components if there is a need we can port this to calcite-components. Please add spec for this along with mike here.
Documentation for calcite-app-components V1:
Components:
Let's take a pass an ensure our markup is semantic, and that we're using proper aria roles, labels and states.
<button>
or <a>
role
attributes to describe purpose, where sensible:role
attributes to describe purposearia-hidden
when something is hidden/visiblearia-disabled
when something is disabled/enabledaria-expanded
when an element is expanded/collapsedaria-haspopup
aria-modal
aria-multiselectable
Which Component: All of them should get a pass.
Example Use Case: Vision impaired person is using an app with our components via a screen-reader.
Testing process: https://arcgis.github.io/interactive-design/a11y/#/Accessibility-testing-process
What labels would be helpful for us? Should we have the same as the API?
There's a bug in Stencil where unit tests (e.g. .spect.ts
files) are failing due to ES6 named imports not being properly compiled. Until that bug is fixed or a workaround is discovered, the spec tests won't be ready to uncomment.
Automating base accessibility tests for each component would help keep a baseline of accessible components.
Pain point: Running accessibility tests manually.
Desired outcome: Automatic testing of accessibility for all components in e2e test suite.
https://www.npmjs.com/package/jest-axe
https://www.npmjs.com/package/axe-puppeteer
This is installed and ready for styling
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
active |
active |
boolean |
false |
|
indicator |
indicator |
boolean |
false |
|
label |
label |
string |
null |
|
text |
text |
string |
null |
|
textEnabled |
text-enabled |
boolean |
false |
Event | Description | Type |
---|---|---|
calciteActionClick |
CustomEvent<any> |
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
expanded |
expanded |
boolean |
false |
should list all inputs and selected and check boxes.
User wants to use this multiple select item and receive all that items as an event call back.
Setup TypeScript and TSLint in package
#14 uses any
to work around an incompatible typing from the postcss plugin. This can be removed once stencil-community/stencil-postcss#16 lands.
A dismissible window that displays information for an end-user.
Jake is a developer who uses Calcite-components to build apps.
Tom is an end user who is using an App that Jake built.
Block header icon should use calcite-action OR button should honor theme color
Code:
<button
aria-label={toggleLabel}
class={CSS.toggle}
onClick={this.onHeaderClick}
title={toggleLabel}
>
{headerContent}
<CalciteIcon
size="16"
path={open ? chevronUp16 : chevronDown16}
svgAttributes={{ class: CSS.toggleIcon }}
/>
</button>
Calcite-Action has a custom event it fires when its clicked. This can be replaced with a native event and works better in some cases than the custom event.
Deprecate the use of calciteActionClick
The Stencil docs encourage the use of native Dom Events on web components.
Which Component: Calcite-action
Example Use Case:
<!-- Works -->
<calcite-action onClick="console.log('clicked');">
</calcite-action>
<!-- Does not work -->
<calcite-action onCalciteActionClick="console.log('clicked');">
</calcite-action>
This icon pattern is showing up often in a few components:
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16">
<path d={ellipsis16} />
</svg>
Signifying the need for a helper to DRY up some code.
Proposal:
<SvgIcon pathData={ellipsis16} size="16" />
Adding a functional component to aid consume calcite-ui-icons.
A container for tips that allows you to scroll through one tip at a time, similar to a carousel.
Jake is a developer who uses Calcite-components to build apps.
Tom is an end user who is using an App that Jake built.
Should we rename calcite-app-components
to calcite-shell-components
?
Topic: Should we rename calcite-app-components
to calcite-shell-components
?
Context: calcite-app-components
somewhat generic. This would narrow our components to being used with the calcite-shell
. Would that be a good thing or too restrictive?
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.