Skip to content

Commit

Permalink
fix: logspam and local test running
Browse files Browse the repository at this point in the history
  • Loading branch information
TheSisb committed Oct 16, 2023
1 parent ee9025d commit f64a876
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 5 deletions.
6 changes: 6 additions & 0 deletions .changeset/cold-brooms-type.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@twilio-paste/meter": patch
"@twilio-paste/core": patch
---

[Meter] Remove console.warn log spam regarding aria-label
1 change: 1 addition & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ module.exports = {
"<rootDir>/packages/(?:.+?)/.next/",
"<rootDir>/templates/(?:.+?)/.next/",
"<rootDir>/packages/(?:.+?)/.netlify/",
"<rootDir>/.netlify/",
],
cacheDirectory: ".jest-cache",
coverageDirectory: ".jest-coverage",
Expand Down
15 changes: 10 additions & 5 deletions packages/paste-core/components/meter/src/Meter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,6 @@ export interface MeterProps extends HTMLPasteProps<"meter">, Pick<BoxProps, "ele
const Meter = React.forwardRef<HTMLMeterElement, MeterProps>(
({ element = "METER", id, minLabel, maxLabel, ...props }, ref) => {
const { value = 0, minValue = 0, maxValue = 100 } = props;
const { meterProps } = useMeter(props);

// Calculate the width of the bar as a percentage
const percentage = (value - minValue) / (maxValue - minValue);
const fillWidth = `${Math.round(percentage * 100)}%`;

/*
* Since Meter isn't a form element, we cannot use htmlFor from the regular Label
Expand All @@ -38,6 +33,16 @@ const Meter = React.forwardRef<HTMLMeterElement, MeterProps>(
labelledBy = `${id}${LABEL_SUFFIX}`;
}

const { meterProps } = useMeter({
...props,
// Appeases useLabel's internal warning about missing labels because we're doing our own thing
"aria-labelledby": labelledBy,
});

// Calculate the width of the bar as a percentage
const percentage = (value - minValue) / (maxValue - minValue);
const fillWidth = `${Math.round(percentage * 100)}%`;

return (
<Box
as="div"
Expand Down

0 comments on commit f64a876

Please sign in to comment.