Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(meter): Add Meter component #7401

Merged
merged 69 commits into from
Aug 22, 2023

Conversation

macandcheese
Copy link
Contributor

@macandcheese macandcheese commented Aug 1, 2023

Related Issue: #2249

Summary

Adds new Meter component with a variety of display capabilities.

Screen.Recording.2023-08-08.at.2.01.43.PM.mov

@github-actions github-actions bot added the enhancement Issues tied to a new feature or request. label Aug 1, 2023
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. new component Issues tied to a new component. labels Aug 1, 2023
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 1, 2023
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 1, 2023
@macandcheese macandcheese marked this pull request as ready for review August 1, 2023 22:18
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 1, 2023
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review round 1! 🥊

packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
Copy link
Member

@geospatialem geospatialem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💥💥Great work!💥💥

A few doc-related considerations.

Also, unable to hear JAWS reading out the value (NVDA works in FF), so thinking it might be related to the aria-label attribute. Will dive into the a11y tomorrow.

packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
packages/calcite-components/src/components/meter/meter.tsx Outdated Show resolved Hide resolved
@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 18, 2023
@geospatialem geospatialem self-requested a review August 18, 2023 20:55
Copy link
Member

@geospatialem geospatialem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Final a11y check looks good. 🟢

@macandcheese macandcheese added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Aug 19, 2023
@ashetland
Copy link
Contributor

Looking good on my end 🚀

Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭
🍭🎚️🎚️🎚️🎚️🍭🎚️🍭🍭🍭🍭🍭🎚️🍭🎚️🎚️🎚️🎚️🍭🍭🎚️🎚️🎚️🍭🍭🎚️🎚️🍭🍭🎚️🍭🍭🍭🎚️🍭🎚️🎚️🎚️🎚️🍭🎚️🍭
🍭🎚️🍭🍭🎚️🍭🎚️🍭🍭🍭🍭🍭🎚️🍭🎚️🍭🍭🍭🍭🎚️🍭🍭🍭🍭🎚️🍭🍭🎚️🍭🎚️🎚️🍭🎚️🎚️🍭🎚️🍭🍭🍭🍭🎚️🍭
🍭🎚️🎚️🎚️🎚️🍭🎚️🍭🍭🎚️🍭🍭🎚️🍭🎚️🎚️🎚️🍭🍭🍭🎚️🎚️🍭🍭🎚️🍭🍭🎚️🍭🎚️🍭🎚️🍭🎚️🍭🎚️🎚️🎚️🍭🍭🎚️🍭
🍭🎚️🍭🍭🎚️🍭🎚️🍭🎚️🍭🎚️🍭🎚️🍭🎚️🍭🍭🍭🍭🍭🍭🍭🎚️🍭🎚️🍭🍭🎚️🍭🎚️🍭🍭🍭🎚️🍭🎚️🍭🍭🍭🍭🍭🍭
🍭🎚️🍭🍭🎚️🍭🍭🎚️🍭🍭🍭🎚️🍭🍭🎚️🎚️🎚️🎚️🍭🎚️🎚️🎚️🍭🍭🍭🎚️🎚️🍭🍭🎚️🍭🍭🍭🎚️🍭🎚️🎚️🎚️🎚️🍭🎚️🍭
🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭🍭

}

/**
*
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can probably be dropped since the function signature is pretty expressive and typed.

}

private intersects(el1: HTMLDivElement, el2: HTMLDivElement): boolean {
return el1 && el2
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion:

return el1 && el2 && intersects(el1.getBoundingClientRect(), el2.getBoundingClientRect());

You already guard against elements being defined, so no need for optional chaining. Sidebar: I think we could also improve the util to handle null to simplify this type of logic. 🤓

@macandcheese macandcheese merged commit 47163ed into main Aug 22, 2023
@macandcheese macandcheese deleted the macandcheese/2249-new-component-meter branch August 22, 2023 20:21
@github-actions github-actions bot added this to the 2023 August Priorities milestone Aug 22, 2023
benelan pushed a commit that referenced this pull request Sep 1, 2023
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-components: 1.7.0</summary>

##
[1.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.6.1...@esri/calcite-components@1.7.0)
(2023-09-01)


### Features

* **action-bar, action-pad, action-group:** Add label properties for
group context
([#7415](#7415))
([b34f36d](b34f36d))
* **combobox:** Add single-persist selection mode
([#7583](#7583))
([dab06a3](dab06a3))
* **flow:** Add support for custom flow-item elements
([#7608](#7608))
([197adfe](197adfe))
* **input-date-picker:** Normalize year to current century for user
typed values only
([#7638](#7638))
([a1db718](a1db718))
* **input-number:** Add integer property
([#7646](#7646))
([cd66a6d](cd66a6d))
* **input-time-picker:** Support fractional seconds
([#7532](#7532))
([c2bf34b](c2bf34b))
* **meter:** Add Meter component
([#7401](#7401))
([47163ed](47163ed))
* **sheet:** Add Sheet component
([#7561](#7561))
([f12a393](f12a393))
* **sheet:** Update default widths
([#7617](#7617))
([47d2c0b](47d2c0b))
* **shell:** Add "Sheets" Slot
([#7579](#7579))
([e798765](e798765))
* **table:** Add Table and related components
([#7607](#7607))
([b067e72](b067e72))


### Bug Fixes

* **accordion, accordion-item:** Improve a11y
([#7560](#7560))
([b5170b6](b5170b6))
* Add drag styles for improved UX
([#7644](#7644))
([afbb764](afbb764))
* **block, block-section:** Improve a11y
([#7557](#7557))
([1f44f6b](1f44f6b))
* **chip-group:** Add existence checks
([#7586](#7586))
([5ca64f1](5ca64f1))
* **color-picker:** Update value when alphaChannel is toggled
([#7563](#7563))
([1f753dd](1f753dd))
* **combobox:** Prevent deselecting items via keyboard in single-persist
mode
([#7634](#7634))
([4f5f8b0](4f5f8b0))
* **combobox:** Update combobox height to follow design spec
([#7558](#7558))
([ec08845](ec08845))
* **date-picker:** Set start of week to monday in zh-CN
([#7578](#7578))
([7e385cb](7e385cb))
* **dropdown:** Prevents navigating dropdown items with Tab key
([#7527](#7527))
([3ea658d](3ea658d))
* Ensure label only focuses the first labelable child
([#7553](#7553))
([426159c](426159c))
* **flow:** Catch error when beforeBack promise is rejected
([#7601](#7601))
([cb70671](cb70671))
* **input-date-picker, input-time-picker:** Do not show dropdown
affordance when read-only
([#7559](#7559))
([5a3f19c](5a3f19c))
* **input, input-number:** Correctly sanitize numbers when pasting
string with 'e'
([#7648](#7648))
([b8bc11c](b8bc11c))
* **list, sortable-list, value-list:** Emit calciteListOrderChange when
dragging between lists
([#7614](#7614))
([4653581](4653581))
* **list:** Fixes dragging nested list items
([#7555](#7555))
([c25f7b3](c25f7b3))
* **list:** Stop emitting calciteListChange when a list-item is disabled
or closed.
([#7624](#7624))
([7008463](7008463))
* **loader:** Tweak loading animations to work in Safari
([#7564](#7564))
([2103654](2103654))
* **modal:** Catch error when beforeClose promise is rejected
([#7600](#7600))
([70405d0](70405d0))
* **modal:** Handle removal of open attribute and prevent multiple
beforeClose calls
([#7470](#7470))
([f31588f](f31588f))
* **rating:** Adds focus outline on click
([#7341](#7341))
([af30073](af30073))
* **segmented-control:** Refresh items when added dynamically
([#7567](#7567))
([2e36eb3](2e36eb3))
* **split-button:** Update divider and borders to follow design spec
([#7568](#7568))
([8df59ab](8df59ab))
* **tree-item:** Move focus outline to item label area
([#7581](#7581))
([1327cef](1327cef))
* **tree-item:** Updates state when selection changes programmatically
for `selection-mode='ancestors'`
([#7572](#7572))
([40758c5](40758c5))
* **tree:** Improve keyboard navigation
([#7618](#7618))
([826a5cb](826a5cb))
</details>

<details><summary>@esri/calcite-components-react: 1.7.0</summary>

##
[1.7.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.6.1...@esri/calcite-components-react@1.7.0)
(2023-09-01)


### Bug Fixes

* Make sure components are defined in environments like in codesandbox
([#7632](#7632))
([7005cce](7005cce))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from ^1.7.0-next.22 to ^1.7.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Issues tied to a new feature or request. new component Issues tied to a new component. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants