@leafygreen-ui/checkbox - npm Package Compare versions

dist/Check.d.ts

dist/Check.d.ts.map

dist/constants.d.ts

dist/constants.d.ts.map

dist/LegacyCheck.d.ts

dist/LegacyCheck.d.ts.map

dist/SvgCheck.d.ts

dist/SvgCheck.d.ts.map

dist/SvgIndeterminate.d.ts

dist/SvgIndeterminate.d.ts.map

dist/types.d.ts

dist/types.d.ts.map

src/Check.tsx

src/constants.ts

src/LegacyCheck.tsx

src/SvgCheck.tsx

src/SvgIndeterminate.tsx

src/types.ts

16

CHANGELOG.md

		# @leafygreen-ui/checkbox

		## 7.0.0

		### Major Changes

		- acd6919: Updates checkbox for visual brand refresh
		- Updates default `animate` value to `true`
		- Adds `description` prop
		- Adds support for `aria-label` and `aria-labelledby`
		- Currently disregarding `bold` prop, and the label will always be bold. This will be updated in a future update to the `Label` component

		### Patch Changes

		- Updated dependencies [acd6919]
		- Updated dependencies [acd6919]
		- @leafygreen-ui/lib@9.2.0

		## 6.0.6
		@@ -4,0 +20,0 @@

15

dist/Checkbox.d.ts

		import React from 'react';
		import PropTypes from 'prop-types';
		import { HTMLElementProps } from '@leafygreen-ui/lib';
		interface CheckboxProps extends HTMLElementProps<'input', never> {
		darkMode?: boolean;
		checked?: boolean;
		label: React.ReactNode;
		disabled?: boolean;
		indeterminate?: boolean;
		className?: string;
		onChange?: React.ChangeEventHandler<HTMLInputElement>;
		bold?: boolean;
		animate?: boolean;
		}
		declare function Checkbox({ darkMode, checked: checkedProp, label, disabled, indeterminate: indeterminateProp, bold, animate, className, onClick: onClickProp, onChange: onChangeProp, id: idProp, style, name, ...rest }: CheckboxProps): JSX.Element;
		import { CheckboxProps } from './types';
		declare function Checkbox({ darkMode, checked: checkedProp, label, description, disabled, indeterminate: indeterminateProp, animate, className, onClick: onClickProp, onChange: onChangeProp, id: idProp, style, name, ...rest }: CheckboxProps): JSX.Element;
		declare namespace Checkbox {
		@@ -17,0 +6,0 @@ var displayName: string;

8

package.json

		{
		"name": "@leafygreen-ui/checkbox",
		"version": "6.0.6",
		"version": "7.0.0",
		"description": "LeafyGreen UI Kit Checkbox",
		@@ -24,8 +24,10 @@ "main": "./dist/index.js",
		"@leafygreen-ui/hooks": "^7.0.0",
		"@leafygreen-ui/lib": "^9.0.0"
		"@leafygreen-ui/lib": "^9.2.0",
		"@leafygreen-ui/typography": "^9.1.0",
		"@leafygreen-ui/leafygreen-provider": "^2.1.3"
		},
		"devDependencies": {
		"@leafygreen-ui/palette": "^3.2.2"
		"@leafygreen-ui/palette": "^3.3.2"
		},
		"gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0"
		}

29

README.md

		@@ -69,16 +69,19 @@ # Checkbox

		\| Prop \| Type \| Description \| Default \|
		\| --------------- \| ------------------------- \| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- \| ------------------------- \|
		\| `darkMode` \| `boolean` \| Determines whether or not the Checkbox will appear in dark mode. \| `false` \|
		\| `checked` \| `boolean` \| Checks the checkbox \| `false` \|
		\| `label` \| `node` \| The label for the checkbox. \| `''` \|
		\| `disabled` \| `boolean` \| Disables the checkbox. \| `false` \|
		\| `indeterminate` \| `boolean` \| Sets the checkbox as indeterminate. NOTE: the checkbox will become out of sync with the indeterminate prop when it's clicked. Make sure to unset the `indeterminate` prop on change where you're controlling your input. \| `false` \|
		\| `className` \| `string` \| Adds a className to the outermost element. \| `''` \|
		\| `bold` \| `boolean` \| Determines whether the text will be bold or not. \| `false` \|
		\| `animate` \| `boolean` \| Determines whether the checkbox will be animated when checked or unchecked. \| `true` \|
		\| `id` \| `string` or `number` \| Adds an ID only to the input, and it's used elsewhere for accessibility props. \| randomly generated string \|
		\| `onChange` \| `function` \| The event handler function for the `onChange` event. Receives the associated `event` object as the first argument. \| `() => {}` \|
		\| ... \| native `input` attributes \| Any other props will be spread on the root `input` element \| \|
		\| Prop \| Type \| Description \| Default \|
		\| ----------------- \| ------------------------- \| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- \| ------------------------- \|
		\| `darkMode` \| `boolean` \| Determines whether or not the Checkbox will appear in dark mode. \| `false` \|
		\| `checked` \| `boolean` \| Checks the checkbox \| `false` \|
		\| `label` \| `node` \| The label for the checkbox. \| `''` \|
		\| `description` \| `string` \| A description for the checkbox. \| `''` \|
		\| `disabled` \| `boolean` \| Disables the checkbox. \| `false` \|
		\| `indeterminate` \| `boolean` \| Sets the checkbox as indeterminate. NOTE: the checkbox will become out of sync with the indeterminate prop when it's clicked. Make sure to unset the `indeterminate` prop on change where you're controlling your input. \| `false` \|
		\| `className` \| `string` \| Adds a className to the outermost element. \| `''` \|
		\| `animate` \| `boolean` \| Determines whether the checkbox will be animated when checked or unchecked. Note the "ripple" animation will only run when `Checkbox` is rendered within `LeafygreenProvider`, and only on click. \| `true` \|
		\| `id` \| `string` or `number` \| Adds an ID only to the input, and it's used elsewhere for accessibility props. \| randomly generated string \|
		\| `onChange` \| `function` \| The event handler function for the `onChange` event. Receives the associated `event` object as the first argument. \| `() => {}` \|
		\| `bold` \| `boolean` \| Determines whether the text will be bold or not. (Currently disregarded in the new design) \| `false` \|
		\| `aria-labelledby` \| `string` \| A value for `aria-labelledby`. Allows use of the component with an external `<label>` element \| \|
		\| `aria-label` \| `string` \| A value for `aria-label`. Allows use of the component without a `label` \| \|
		\| ... \| native `input` attributes \| Any other props will be spread on the root `input` element \| \|

		_Any other properties will be spread on the `input` element._

6

tsconfig.json

		@@ -21,4 +21,10 @@ {
		"path": "../hooks"
		},
		{
		"path": "../typography"
		},
		{
		"path": "../leafygreen-provider"
		}
		]
		}

dist/Checkbox.d.ts.map