@atlaskit/radio
Advanced tools
@atlaskit/radio - npm Package Compare versions
Comparing version 6.0.2 to 6.0.3
| # @atlaskit/radio | ||
| ## 6.0.3 | ||
| ### Patch Changes | ||
| - [#78598](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78598) [`cabae83473c3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cabae83473c3) - [ux] Focus styles for Checkbox and Radio components | ||
| ## 6.0.2 | ||
@@ -4,0 +10,0 @@ |
@@ -20,3 +20,3 @@ "use strict"; | ||
| var packageName = "@atlaskit/radio"; | ||
| var packageVersion = "6.0.2"; | ||
| var packageVersion = "6.0.3"; | ||
| var fontFamily = (0, _constants.fontFamily)(); | ||
@@ -98,3 +98,4 @@ var noop = _noop.default; | ||
| '&:focus': { | ||
| '--radio-border-color': "var(--ds-border-focused, ".concat(_colors.B100, ")") | ||
| outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")")), | ||
| outlineOffset: "var(--ds-border-width-indicator, 3px)" | ||
| }, | ||
@@ -116,3 +117,4 @@ '&:checked': { | ||
| '&:checked:focus': { | ||
| '--radio-border-color': "var(--ds-border-focused, ".concat(_colors.B100, ")") | ||
| outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")")), | ||
| outlineOffset: "var(--ds-border-width-indicator, 3px)" | ||
| }, | ||
@@ -160,2 +162,4 @@ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles | ||
| }, (0, _react2.jsx)("input", (0, _extends2.default)({}, rest, { | ||
| // It is necessary only for Safari. It allows to render focus styles. | ||
| tabIndex: 0, | ||
| "aria-label": ariaLabel, | ||
@@ -162,0 +166,0 @@ checked: isChecked, |
@@ -8,6 +8,6 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
| import { getBooleanFF } from '@atlaskit/platform-feature-flags'; | ||
| import { B100, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors'; | ||
| import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors'; | ||
| import { fontFamily as getFontFamily } from '@atlaskit/theme/constants'; | ||
| const packageName = "@atlaskit/radio"; | ||
| const packageVersion = "6.0.2"; | ||
| const packageVersion = "6.0.3"; | ||
| const fontFamily = getFontFamily(); | ||
@@ -89,3 +89,4 @@ const noop = __noop; | ||
| '&:focus': { | ||
| '--radio-border-color': `var(--ds-border-focused, ${B100})` | ||
| outline: `${"var(--ds-border-width-outline, 3px)"} solid ${`var(--ds-border-focused, ${B200})`}`, | ||
| outlineOffset: "var(--ds-border-width-indicator, 3px)" | ||
| }, | ||
@@ -107,3 +108,4 @@ '&:checked': { | ||
| '&:checked:focus': { | ||
| '--radio-border-color': `var(--ds-border-focused, ${B100})` | ||
| outline: `${"var(--ds-border-width-outline, 3px)"} solid ${`var(--ds-border-focused, ${B200})`}`, | ||
| outlineOffset: "var(--ds-border-width-indicator, 3px)" | ||
| }, | ||
@@ -150,2 +152,4 @@ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles | ||
| }, jsx("input", _extends({}, rest, { | ||
| // It is necessary only for Safari. It allows to render focus styles. | ||
| tabIndex: 0, | ||
| "aria-label": ariaLabel, | ||
@@ -152,0 +156,0 @@ checked: isChecked, |
@@ -10,6 +10,6 @@ import _extends from "@babel/runtime/helpers/extends"; | ||
| import { getBooleanFF } from '@atlaskit/platform-feature-flags'; | ||
| import { B100, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors'; | ||
| import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors'; | ||
| import { fontFamily as getFontFamily } from '@atlaskit/theme/constants'; | ||
| var packageName = "@atlaskit/radio"; | ||
| var packageVersion = "6.0.2"; | ||
| var packageVersion = "6.0.3"; | ||
| var fontFamily = getFontFamily(); | ||
@@ -91,3 +91,4 @@ var noop = __noop; | ||
| '&:focus': { | ||
| '--radio-border-color': "var(--ds-border-focused, ".concat(B100, ")") | ||
| outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")), | ||
| outlineOffset: "var(--ds-border-width-indicator, 3px)" | ||
| }, | ||
@@ -109,3 +110,4 @@ '&:checked': { | ||
| '&:checked:focus': { | ||
| '--radio-border-color': "var(--ds-border-focused, ".concat(B100, ")") | ||
| outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")), | ||
| outlineOffset: "var(--ds-border-width-indicator, 3px)" | ||
| }, | ||
@@ -153,2 +155,4 @@ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles | ||
| }, jsx("input", _extends({}, rest, { | ||
| // It is necessary only for Safari. It allows to render focus styles. | ||
| tabIndex: 0, | ||
| "aria-label": ariaLabel, | ||
@@ -155,0 +159,0 @@ checked: isChecked, |
@@ -50,3 +50,3 @@ import React, { SyntheticEvent } from 'react'; | ||
| /** | ||
| * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests | ||
| * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. | ||
| * The specified `testId` is applied to the root element of `RadioGroup`. If no `testId` is supplied in the `options` prop, then the one supplied to `RadioGroup` will also be propagated to | ||
@@ -53,0 +53,0 @@ * the `Radio` children. Otherwise, the `testId` supplied in the `options` prop will be used. |
@@ -14,3 +14,3 @@ import { ReactNode, SyntheticEvent } from 'react'; | ||
| /** | ||
| * The aria-label attribute associated with the radio element. | ||
| * The `aria-label` attribute associated with the radio element. | ||
| */ | ||
@@ -39,3 +39,3 @@ ariaLabel?: string; | ||
| /** | ||
| * OnChange event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`. | ||
| * `onChange` event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`. | ||
| */ | ||
@@ -42,0 +42,0 @@ onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void; |
@@ -50,3 +50,3 @@ import React, { SyntheticEvent } from 'react'; | ||
| /** | ||
| * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests | ||
| * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. | ||
| * The specified `testId` is applied to the root element of `RadioGroup`. If no `testId` is supplied in the `options` prop, then the one supplied to `RadioGroup` will also be propagated to | ||
@@ -53,0 +53,0 @@ * the `Radio` children. Otherwise, the `testId` supplied in the `options` prop will be used. |
@@ -14,3 +14,3 @@ import { ReactNode, SyntheticEvent } from 'react'; | ||
| /** | ||
| * The aria-label attribute associated with the radio element. | ||
| * The `aria-label` attribute associated with the radio element. | ||
| */ | ||
@@ -39,3 +39,3 @@ ariaLabel?: string; | ||
| /** | ||
| * OnChange event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`. | ||
| * `onChange` event handler, passed into the props of each `Radio` Component instantiated within `RadioGroup`. | ||
| */ | ||
@@ -42,0 +42,0 @@ onChange?: (e: React.ChangeEvent<HTMLInputElement>, analyticsEvent: UIAnalyticsEvent) => void; |
| { | ||
| "name": "@atlaskit/radio", | ||
| "version": "6.0.2", | ||
| "version": "6.0.3", | ||
| "description": "A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.", | ||
@@ -47,3 +47,3 @@ "publishConfig": { | ||
| "@atlaskit/theme": "^12.6.0", | ||
| "@atlaskit/tokens": "^1.36.0", | ||
| "@atlaskit/tokens": "^1.39.0", | ||
| "@babel/runtime": "^7.0.0", | ||
@@ -99,2 +99,2 @@ "@emotion/react": "^11.7.1" | ||
| "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1" | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.01%
118177
- Lines of code
- increased by0.9%
1348
Dependency changes
Updated@atlaskit/tokens@^1.39.0