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.

Sign up for GitHub

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

New MeterGroup Component #5977

Merged
merged 15 commits into from
Mar 12, 2024
Merged

New MeterGroup Component #5977

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7c36a49
Revert "Added empty message into tree"
nitrogenous Jan 29, 2024
0b402db
meter-group init
nitrogenous Feb 2, 2024
b0b7258
Demo pages added
nitrogenous Feb 7, 2024
aa40c76
MeterGroup Templating Added
nitrogenous Feb 9, 2024
3acbc42
MeterGroup PT options and Apidoc
nitrogenous Feb 14, 2024
d2aa701
wireframe image update
nitrogenous Feb 15, 2024
87ed03a
NPM Format
nitrogenous Feb 15, 2024
f78e993
Fixed duplicated function usage
nitrogenous Feb 18, 2024
35e174a
Gitignore update for vscode options
nitrogenous Feb 18, 2024
407ccf9
Removed unnecessary file
nitrogenous Feb 18, 2024
3bcc2b6
Updated metergroup d ts
nitrogenous Mar 11, 2024
8da810c
Removed tailwind preset
nitrogenous Mar 12, 2024
02775af
Updated themes
nitrogenous Mar 12, 2024
7ed1ad8
Merge remote-tracking branch 'upstream/master' into meter-group
nitrogenous Mar 12, 2024
f2de513
Synced other components
nitrogenous Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
264 changes: 264 additions & 0 deletions components/doc/common/apidoc/index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34496,6 +34496,270 @@
}
}
},
"metergroup": {
"description": "MeterGroup displays scalar measurements within a known range.\n\n[Live Demo](https://www.primereact.org/metergroup/)",
"components": {
"MeterGroup": {
"description": "MeterGroup is an extension to standard input element with theming and keyfiltering.",
"methods": {
"description": "Defines methods that can be accessed by the component's reference.",
"values": []
},
"props": {
"description": "Defines valid properties in MeterGroup component. In addition to these, all properties of HTMLDivElement can be used in this component.",
"values": [
{
"name": "className",
"optional": true,
"readonly": false,
"type": "string",
"default": "",
"description": "Additional CSS classes to apply to the MeterGroup."
},
{
"name": "end",
"optional": true,
"readonly": false,
"type": "Function",
"default": ""
},
{
"name": "labelListRenderer",
"optional": true,
"readonly": false,
"type": "Function",
"default": ""
},
{
"name": "labelOrientation",
"optional": true,
"readonly": false,
"type": "\"horizontal\" | \"vertical\"",
"default": "'horizontal'",
"description": "The orientation of the label. Can be either 'horizontal' or 'vertical'."
},
{
"name": "labelPosition",
"optional": true,
"readonly": false,
"type": "\"end\" | \"start\"",
"default": "'end'",
"description": "The position of the label. Can be either 'start' or 'end'."
},
{
"name": "max",
"optional": true,
"readonly": false,
"type": "number",
"default": "100",
"description": "The maximum value for the MeterGroup."
},
{
"name": "meterRenderer",
"optional": true,
"readonly": false,
"type": "Function",
"default": ""
},
{
"name": "min",
"optional": true,
"readonly": false,
"type": "number",
"default": "0",
"description": "The minimum value for the MeterGroup."
},
{
"name": "orientation",
"optional": true,
"readonly": false,
"type": "\"horizontal\" | \"vertical\"",
"default": "'horizontal'",
"description": "The orientation of the MeterGroup. Can be either 'horizontal' or 'vertical'."
},
{
"name": "start",
"optional": true,
"readonly": false,
"type": "Function",
"default": ""
},
{
"name": "values",
"optional": true,
"readonly": false,
"type": "MeterGroupValue[]",
"default": "",
"description": "An array of values to be represented by the MeterGroup."
}
]
},
"callbacks": {
"description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
"values": []
}
}
},
"interfaces": {
"description": "Defines the custom interfaces used by the module.",
"values": {
"MeterGroupContext": {
"description": "Defines current options in MeterGroup component.",
"relatedProp": "",
"props": [
{
"name": "disabled",
"optional": false,
"readonly": false,
"type": "boolean",
"description": "Current disabled state of the component as a boolean."
}
],
"callbacks": []
},
"MeterGroupPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.",
"relatedProp": "",
"props": [
{
"name": "props",
"optional": false,
"readonly": false,
"type": "MeterGroupProps"
},
{
"name": "context",
"optional": false,
"readonly": false,
"type": "MeterGroupContext"
}
],
"callbacks": []
},
"MeterGroupPassThroughOptions": {
"description": "Custom passthrough(pt) options.",
"relatedProp": "MeterGroupProps.pt",
"props": [
{
"name": "root",
"optional": true,
"readonly": false,
"type": "MeterGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Used to pass attributes to the root's DOM element."
},
{
"name": "labellist",
"optional": true,
"readonly": false,
"type": "MeterGroupPassThroughType<HTMLAttributes<HTMLOListElement>>",
"description": "Used to pass attributes to the label list's DOM element."
},
{
"name": "labellistitem",
"optional": true,
"readonly": false,
"type": "MeterGroupPassThroughType<HTMLAttributes<HTMLLIElement>>",
"description": "Used to pass attributes to the label list item's DOM element."
},
{
"name": "labellisttype",
"optional": true,
"readonly": false,
"type": "MeterGroupPassThroughType<HTMLAttributes<any>>",
"description": "Used to pass attributes to the label list type's DOM element."
},
{
"name": "label",
"optional": true,
"readonly": false,
"type": "MeterGroupPassThroughType<HTMLAttributes<HTMLSpanElement>>",
"description": "Used to pass attributes to the label's DOM element."
},
{
"name": "metercontainer",
"optional": true,
"readonly": false,
"type": "MeterGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Used to pass attributes to the meter container's DOM element."
},
{
"name": "meter",
"optional": true,
"readonly": false,
"type": "MeterGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
"description": "Used to pass attributes to the meter's DOM element."
}
],
"callbacks": []
},
"MeterGroupValue": {
"relatedProp": "",
"props": [
{
"name": "value",
"optional": true,
"readonly": false,
"type": "number"
},
{
"name": "label",
"optional": true,
"readonly": false,
"type": "string | HTMLElement"
},
{
"name": "color",
"optional": true,
"readonly": false,
"type": "string"
},
{
"name": "[key: string]",
"optional": false,
"readonly": false,
"type": "any"
}
],
"callbacks": []
},
"CustomRenderProps": {
"relatedProp": "",
"props": [
{
"name": "totaLPercent",
"optional": false,
"readonly": false,
"type": "number"
},
{
"name": "percentages",
"optional": false,
"readonly": false,
"type": "number[]"
},
{
"name": "values",
"optional": false,
"readonly": false,
"type": "MeterGroupValue[]"
}
],
"callbacks": []
}
}
},
"types": {
"description": "Defines the custom types used by the module.",
"values": {
"MeterGroupPassThroughType": {
"values": "PassThroughType<T, MeterGroupPassThroughMethodOptions>"
},
"MeterGroupPassThroughTransitionType": {
"values": "ReactCSSTransitionProps | Function | undefined"
}
}
}
},
"multiselect": {
"description": "MultiSelect is used to select multiple items from a collection.\n\n[Live Demo](https://www.primereact.org/multiselect/)",
"components": {
Expand Down
26 changes: 26 additions & 0 deletions components/doc/metergroup/accessibilitydoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { DevelopmentSection } from '@/components/doc/common/developmentsection';
import { DocSectionCode } from '@/components/doc/common/docsectioncode';
import { DocSectionText } from '@/components/doc/common/docsectiontext';
import Link from 'next/link';

export function AccessibilityDoc() {
const code = {
basic: `
<span id="dd1">Options</span>
<MultiSelect aria-labelledby="dd1" />
<MultiSelect aria-label="Options" />
`
};

return (
<DocSectionText id="accessibility" label="Accessibility">
<h3>Screen Reader</h3>
<p>
MeterGroup component uses <i>meter</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> prop.
</p>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</DocSectionText>
);
}
55 changes: 55 additions & 0 deletions components/doc/metergroup/basicdoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { DocSectionCode } from '@/components/doc/common/docsectioncode';
import { DocSectionText } from '@/components/doc/common/docsectiontext';
import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';

export function BasicDoc(props) {
const code = {
basic: `
<MeterGroup values={values} />
`,
javascript: `
import React, { useEffect, useRef } from 'react';
import { MeterGroup } from 'primereact/metergroup';
export default function BasicDemo() {
const values = [{ label: 'Space used', value: 15 }];
return (
<div className="card flex justify-content-center">
<MeterGroup values={values} />
</div>
)
}
`,
typescript: `
import React, { useEffect, useRef } from 'react';
import { MeterGroup } from 'primereact/metergroup';
export default function BasicDemo() {
const values = [{ label: 'Space used', value: 15 }];
return (
<div className="card flex justify-content-center">
<MeterGroup values={values} />
</div>
)
}
`
};

const values = [{ label: 'Space used', value: 15 }];

return (
<>
<DocSectionText {...props}>
<p>
MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.
</p>
</DocSectionText>
<div className="card">
<MeterGroup values={values} />
</div>
<DocSectionCode code={code} />
</>
);
}
Loading
Loading