From b9701f8116cdb0c40d2e300717d506c10dec4fef Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Mon, 13 Dec 2021 14:44:11 -0800 Subject: [PATCH 01/12] Add screener tests for react-checkbox --- apps/vr-tests/package.json | 1 + .../src/stories/CheckboxConverged.stories.tsx | 70 +++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 apps/vr-tests/src/stories/CheckboxConverged.stories.tsx diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index af81eedff564c..b743c485fd44f 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -28,6 +28,7 @@ "@fluentui/react-badge": "9.0.0-beta.4", "@fluentui/react-button": "9.0.0-beta.5", "@fluentui/react-card": "9.0.0-beta.5", + "@fluentui/react-checkbox": "^9.0.0-beta.5", "@fluentui/react-divider": "9.0.0-beta.4", "@fluentui/react-experiments": "^8.4.7", "@fluentui/react-hooks": "^8.3.7", diff --git a/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx new file mode 100644 index 0000000000000..042286c6c7cb7 --- /dev/null +++ b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import Screener, { Steps } from 'screener-storybook/src/screener'; +import { storiesOf } from '@storybook/react'; +import { Checkbox } from '@fluentui/react-checkbox'; +import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; + +storiesOf('Checkbox Converged', module) + .addDecorator(TestWrapperDecoratorFixedWidth) + .addDecorator(story => ( + + {story()} + + )) + .addStory('default', () => ) + .addStory('label', () => ) + .addStory('checked', () => ) + .addStory('mixed', () => ) + .addStory('disabled', () => ) + .addStory('disabled checked', () => ) + .addStory('disabled mixed', () => ) + .addStory('label-before', () => ) + .addStory('label-wrapping', () => ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua + + } + /> + )) + .addStory('required', () => ) + .addStory('required label-before', () => ( + + )) + .addStory('circular', () => ) + .addStory('circular checked', () => ) + .addStory('circular mixed', () => ) + // + // large variants + // + .addStory('large', () => ) + .addStory('large checked', () => ) + .addStory('large mixed', () => ) + .addStory('large label-wrapping', () => ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua + + } + /> + )) + .addStory('large circular', () => ) + .addStory('large circular checked', () => ( + + )) + .addStory('large circular mixed', () => ( + + )); From 11c29dfab749c78e6d214acbe463cc4762aaedd9 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Mon, 13 Dec 2021 16:50:52 -0800 Subject: [PATCH 02/12] Only test rest/hover states for unchecked, checked, mixed, and disabled --- .../vr-tests/src/stories/CheckboxConverged.stories.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx index 042286c6c7cb7..b8378d57b175d 100644 --- a/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx +++ b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx @@ -25,7 +25,15 @@ storiesOf('Checkbox Converged', module) .addStory('mixed', () => ) .addStory('disabled', () => ) .addStory('disabled checked', () => ) - .addStory('disabled mixed', () => ) + .addStory('disabled mixed', () => ); + +storiesOf('Checkbox Converged', module) + .addDecorator(TestWrapperDecoratorFixedWidth) + .addDecorator(story => ( + + {story()} + + )) .addStory('label-before', () => ) .addStory('label-wrapping', () => ( Date: Mon, 13 Dec 2021 18:05:26 -0800 Subject: [PATCH 03/12] More tweaks to stories --- .../react-checkbox/src/CheckboxMixed.stories.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/react-checkbox/src/CheckboxMixed.stories.tsx b/packages/react-checkbox/src/CheckboxMixed.stories.tsx index 8ba86035b454e..7067875c4d616 100644 --- a/packages/react-checkbox/src/CheckboxMixed.stories.tsx +++ b/packages/react-checkbox/src/CheckboxMixed.stories.tsx @@ -8,7 +8,22 @@ export const Mixed = () => { return ( <> +
+ + + + + + + + + + + + +
{ setOption1(!!data.checked); From 2cab6d3c11a8f82188a36c0e71894eff009699c6 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Mon, 13 Dec 2021 18:06:39 -0800 Subject: [PATCH 04/12] Fix color styles to match figma --- .../components/Checkbox/useCheckboxStyles.ts | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts index 78c53f3c6cf8b..6c4807c0bf536 100644 --- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts +++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts @@ -46,7 +46,7 @@ const useRootStyles = makeStyles({ }, }, - ':active': { + ':active:hover': { color: theme.colorNeutralForeground1, [`& .${indicatorClassName}`]: { borderColor: theme.colorNeutralStrokeAccessiblePressed, @@ -59,18 +59,20 @@ const useRootStyles = makeStyles({ [`& .${indicatorClassName}`]: { backgroundColor: theme.colorCompoundBrandBackground, color: theme.colorNeutralForegroundOnBrand, - borderColor: theme.colorBrandBackground, + borderColor: theme.colorCompoundBrandBackground, }, - ':active': { + ':hover': { [`& .${indicatorClassName}`]: { - backgroundColor: theme.colorCompoundBrandBackgroundPressed, + backgroundColor: theme.colorCompoundBrandBackgroundHover, + borderColor: theme.colorCompoundBrandBackgroundHover, }, }, - ':hover': { + ':active:hover': { [`& .${indicatorClassName}`]: { - backgroundColor: theme.colorCompoundBrandBackgroundHover, + backgroundColor: theme.colorCompoundBrandBackgroundPressed, + borderColor: theme.colorCompoundBrandBackgroundPressed, }, }, }), @@ -82,17 +84,17 @@ const useRootStyles = makeStyles({ color: theme.colorCompoundBrandForeground1, }, - ':active': { + ':hover': { [`& .${indicatorClassName}`]: { - borderColor: theme.colorCompoundBrandStrokePressed, - color: theme.colorCompoundBrandForeground1Pressed, + borderColor: theme.colorCompoundBrandStrokeHover, + color: theme.colorCompoundBrandForeground1Hover, }, }, - ':hover': { + ':active:hover': { [`& .${indicatorClassName}`]: { - borderColor: theme.colorCompoundBrandStrokeHover, - color: theme.colorCompoundBrandForeground1Hover, + borderColor: theme.colorCompoundBrandStrokePressed, + color: theme.colorCompoundBrandForeground1Pressed, }, }, }), @@ -102,7 +104,6 @@ const useRootStyles = makeStyles({ [`& .${indicatorClassName}`]: { borderColor: theme.colorNeutralStrokeDisabled, color: theme.colorNeutralForegroundDisabled, - backgroundColor: theme.colorNeutralBackground1, }, }), }); @@ -187,7 +188,7 @@ export const useCheckboxStyles = (state: CheckboxState): CheckboxState => { rootStyles.base, rootStyles.focusIndicator, state.input.disabled && rootStyles.disabled, - // Use exactly one of the color classes, depending on `disabled` and `checked` + // Pick exactly one of the color classes, based on `disabled` and `checked` state.input.disabled ? rootStyles.disabledColors : state.checked === 'mixed' From 3b81cfa6ed34761d6b75cd66580d3a035d779793 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Mon, 13 Dec 2021 18:07:33 -0800 Subject: [PATCH 05/12] Refactor Checkmark, and update to match figma --- .../src/components/Checkbox/Checkmark.tsx | 37 +++++++++++++++++++ .../src/components/Checkbox/DefaultIcons.tsx | 25 ------------- .../src/components/Checkbox/useCheckbox.tsx | 21 +++-------- 3 files changed, 42 insertions(+), 41 deletions(-) create mode 100644 packages/react-checkbox/src/components/Checkbox/Checkmark.tsx delete mode 100644 packages/react-checkbox/src/components/Checkbox/DefaultIcons.tsx diff --git a/packages/react-checkbox/src/components/Checkbox/Checkmark.tsx b/packages/react-checkbox/src/components/Checkbox/Checkmark.tsx new file mode 100644 index 0000000000000..8291b4ab695db --- /dev/null +++ b/packages/react-checkbox/src/components/Checkbox/Checkmark.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; + +export type CheckmarkProps = { + /** + * The width and height of the checkmark. + * + * @defaultvalue 8 + */ + size?: number; + + /** + * Whether the checkmark is in a mixed/indeterminate state. + * + * @defaultvalue false + */ + mixed?: boolean; + + /** + * Whether the checkmark is in a circular checkbox. Only affects the mixed state. + * + * @defaultvalue false + */ + circular?: boolean; +}; + +/** + * The default checkmark icon for Checkbox + */ +export const Checkmark = ({ size = 8, mixed, circular }: CheckmarkProps) => ( + + {mixed ? ( + + ) : ( + + )} + +); diff --git a/packages/react-checkbox/src/components/Checkbox/DefaultIcons.tsx b/packages/react-checkbox/src/components/Checkbox/DefaultIcons.tsx deleted file mode 100644 index f3801f31e1959..0000000000000 --- a/packages/react-checkbox/src/components/Checkbox/DefaultIcons.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; - -export const Mixed12Regular = () => ( - - - -); - -export const Mixed16Regular = () => ( - - - -); - -export const Checkmark12Regular = () => ( - - - -); - -export const Checkmark16Regular = () => ( - - - -); diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx b/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx index 5b48ae8e66ac3..dfd24c8727fa9 100644 --- a/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx +++ b/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx @@ -9,7 +9,7 @@ import { useMergedRefs, } from '@fluentui/react-utilities'; import { CheckboxProps, CheckboxState } from './Checkbox.types'; -import { Mixed12Regular, Mixed16Regular, Checkmark12Regular, Checkmark16Regular } from './DefaultIcons'; +import { Checkmark } from './Checkmark'; import { Label } from '@fluentui/react-label'; /** @@ -36,6 +36,7 @@ export const useCheckbox = (props: CheckboxProps, ref: React.Ref - ) : ( - - ) - ) : checked === 'mixed' ? ( - - ) : ( - - ), + children: , }, }), }; @@ -106,12 +96,11 @@ export const useCheckbox = (props: CheckboxProps, ref: React.Ref element's checked and indeterminate properties based on our tri-state property. // Since indeterminate can only be set via javascript, it has to be done in a layout effect. - const indeterminate = checked === 'mixed'; useIsomorphicLayoutEffect(() => { if (inputRef.current) { - inputRef.current.indeterminate = indeterminate; + inputRef.current.indeterminate = mixed; } - }, [inputRef, indeterminate]); + }, [inputRef, mixed]); return state; }; From da717353cc9d98dcd9cfff7ccb64b0fff1ab79db Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Mon, 13 Dec 2021 18:07:44 -0800 Subject: [PATCH 06/12] More screener story tweaks --- .../src/stories/CheckboxConverged.stories.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx index b8378d57b175d..b1e9defe7264c 100644 --- a/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx +++ b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx @@ -19,13 +19,10 @@ storiesOf('Checkbox Converged', module) {story()} )) - .addStory('default', () => ) - .addStory('label', () => ) + .addStory('unchecked', () => ) .addStory('checked', () => ) .addStory('mixed', () => ) - .addStory('disabled', () => ) - .addStory('disabled checked', () => ) - .addStory('disabled mixed', () => ); + .addStory('disabled', () => ); storiesOf('Checkbox Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) @@ -34,6 +31,9 @@ storiesOf('Checkbox Converged', module) {story()} )) + .addStory('disabled checked', () => ) + .addStory('disabled mixed', () => ) + .addStory('no-label', () => ) .addStory('label-before', () => ) .addStory('label-wrapping', () => ( ) .addStory('large checked', () => ) .addStory('large mixed', () => ) + .addStory('large circular', () => ) + .addStory('large circular checked', () => ( + + )) + .addStory('large circular mixed', () => ( + + )) .addStory('large label-wrapping', () => ( } /> - )) - .addStory('large circular', () => ) - .addStory('large circular checked', () => ( - - )) - .addStory('large circular mixed', () => ( - )); From d584d51c829167ec382ad17d15896d02aa85b611 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Tue, 14 Dec 2021 11:32:10 -0800 Subject: [PATCH 07/12] Revert changes to CheckboxMixed stories --- .../react-checkbox/src/CheckboxMixed.stories.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/react-checkbox/src/CheckboxMixed.stories.tsx b/packages/react-checkbox/src/CheckboxMixed.stories.tsx index 7067875c4d616..8ba86035b454e 100644 --- a/packages/react-checkbox/src/CheckboxMixed.stories.tsx +++ b/packages/react-checkbox/src/CheckboxMixed.stories.tsx @@ -8,22 +8,7 @@ export const Mixed = () => { return ( <> -
- - - - - - - - - - - - -
{ setOption1(!!data.checked); From a6d9dfa62017ce99b0ccd32cc6a56001e6d427ab Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Tue, 14 Dec 2021 11:45:10 -0800 Subject: [PATCH 08/12] Change files --- ...eact-checkbox-5fb1f1da-596a-44e5-bd25-897803e97979.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-checkbox-5fb1f1da-596a-44e5-bd25-897803e97979.json diff --git a/change/@fluentui-react-checkbox-5fb1f1da-596a-44e5-bd25-897803e97979.json b/change/@fluentui-react-checkbox-5fb1f1da-596a-44e5-bd25-897803e97979.json new file mode 100644 index 0000000000000..05ddc58042963 --- /dev/null +++ b/change/@fluentui-react-checkbox-5fb1f1da-596a-44e5-bd25-897803e97979.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Update checkmark icons and color styles to match visual spec", + "packageName": "@fluentui/react-checkbox", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} From 6f9f726ad688e46fc4e12921eea65d6e3be206c3 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Tue, 14 Dec 2021 12:33:31 -0800 Subject: [PATCH 09/12] Use icons from react-icons --- packages/react-checkbox/package.json | 5 ++- .../src/components/Checkbox/Checkmark.tsx | 37 ------------------- .../src/components/Checkbox/useCheckbox.tsx | 22 ++++++++++- 3 files changed, 23 insertions(+), 41 deletions(-) delete mode 100644 packages/react-checkbox/src/components/Checkbox/Checkmark.tsx diff --git a/packages/react-checkbox/package.json b/packages/react-checkbox/package.json index 7730f10fb9fdd..eab923a656452 100644 --- a/packages/react-checkbox/package.json +++ b/packages/react-checkbox/package.json @@ -43,10 +43,11 @@ "@fluentui/babel-make-styles": "9.0.0-beta.4" }, "dependencies": { - "@fluentui/react-make-styles": "9.0.0-beta.4", - "@fluentui/react-utilities": "9.0.0-beta.4", + "@fluentui/react-icons": "^2.0.154-beta.5", "@fluentui/react-label": "9.0.0-beta.4", + "@fluentui/react-make-styles": "9.0.0-beta.4", "@fluentui/react-tabster": "9.0.0-beta.5", + "@fluentui/react-utilities": "9.0.0-beta.4", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/react-checkbox/src/components/Checkbox/Checkmark.tsx b/packages/react-checkbox/src/components/Checkbox/Checkmark.tsx deleted file mode 100644 index 8291b4ab695db..0000000000000 --- a/packages/react-checkbox/src/components/Checkbox/Checkmark.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; - -export type CheckmarkProps = { - /** - * The width and height of the checkmark. - * - * @defaultvalue 8 - */ - size?: number; - - /** - * Whether the checkmark is in a mixed/indeterminate state. - * - * @defaultvalue false - */ - mixed?: boolean; - - /** - * Whether the checkmark is in a circular checkbox. Only affects the mixed state. - * - * @defaultvalue false - */ - circular?: boolean; -}; - -/** - * The default checkmark icon for Checkbox - */ -export const Checkmark = ({ size = 8, mixed, circular }: CheckmarkProps) => ( - - {mixed ? ( - - ) : ( - - )} - -); diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx b/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx index dfd24c8727fa9..dbaaf7200dacf 100644 --- a/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx +++ b/packages/react-checkbox/src/components/Checkbox/useCheckbox.tsx @@ -9,7 +9,14 @@ import { useMergedRefs, } from '@fluentui/react-utilities'; import { CheckboxProps, CheckboxState } from './Checkbox.types'; -import { Checkmark } from './Checkmark'; +import { + Checkmark12Filled, + Checkmark16Filled, + Square12Filled, + Square16Filled, + Circle12Filled, + Circle16Filled, +} from '@fluentui/react-icons'; import { Label } from '@fluentui/react-label'; /** @@ -39,6 +46,17 @@ export const useCheckbox = (props: CheckboxProps, ref: React.Ref : ; + } else { + checkmarkIcon = size === 'large' ? : ; + } + } else { + checkmarkIcon = size === 'large' ? : ; + } + const state: CheckboxState = { circular, checked, @@ -77,7 +95,7 @@ export const useCheckbox = (props: CheckboxProps, ref: React.Ref, + children: checkmarkIcon, }, }), }; From 25d9643e52c0294286cfbaf35a0b2abd3c1904f0 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Tue, 14 Dec 2021 12:49:25 -0800 Subject: [PATCH 10/12] Update test snapshots --- .../__snapshots__/Checkbox.test.tsx.snap | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap index 076b3b3afa4cf..2db8c78d58eed 100644 --- a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -38,13 +38,16 @@ exports[`Checkbox renders a default state 1`] = ` class="fui-Checkbox-indicator" > @@ -67,13 +70,16 @@ exports[`Checkbox renders checked 1`] = ` class="fui-Checkbox-indicator" > @@ -103,17 +109,16 @@ exports[`Checkbox renders mixed 1`] = ` class="fui-Checkbox-indicator" > @@ -142,13 +147,16 @@ exports[`Checkbox renders with a label 1`] = ` class="fui-Checkbox-indicator" > From 4fabfadf35fa815084f94e441d528cd5e3fbf0dd Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 15 Dec 2021 11:24:09 -0800 Subject: [PATCH 11/12] tweak screener story names --- .../src/stories/CheckboxConverged.stories.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx index b1e9defe7264c..fc5e1ce23e200 100644 --- a/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx +++ b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx @@ -27,12 +27,12 @@ storiesOf('Checkbox Converged', module) storiesOf('Checkbox Converged', module) .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( - + {story()} )) - .addStory('disabled checked', () => ) - .addStory('disabled mixed', () => ) + .addStory('disabled+checked', () => ) + .addStory('disabled+mixed', () => ) .addStory('no-label', () => ) .addStory('label-before', () => ) .addStory('label-wrapping', () => ( @@ -46,26 +46,26 @@ storiesOf('Checkbox Converged', module) /> )) .addStory('required', () => ) - .addStory('required label-before', () => ( + .addStory('required+label-before', () => ( )) .addStory('circular', () => ) - .addStory('circular checked', () => ) - .addStory('circular mixed', () => ) + .addStory('circular+checked', () => ) + .addStory('circular+mixed', () => ) // // large variants // .addStory('large', () => ) - .addStory('large checked', () => ) - .addStory('large mixed', () => ) - .addStory('large circular', () => ) - .addStory('large circular checked', () => ( + .addStory('large+checked', () => ) + .addStory('large+mixed', () => ) + .addStory('large+circular', () => ) + .addStory('large+circular+checked', () => ( )) - .addStory('large circular mixed', () => ( + .addStory('large+circular+mixed', () => ( )) - .addStory('large label-wrapping', () => ( + .addStory('large+label-wrapping', () => ( Date: Wed, 15 Dec 2021 17:10:15 -0800 Subject: [PATCH 12/12] Remove extra fixedWidth decorator --- apps/vr-tests/src/stories/CheckboxConverged.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx index fc5e1ce23e200..31acf77e8b089 100644 --- a/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx +++ b/apps/vr-tests/src/stories/CheckboxConverged.stories.tsx @@ -25,7 +25,6 @@ storiesOf('Checkbox Converged', module) .addStory('disabled', () => ); storiesOf('Checkbox Converged', module) - .addDecorator(TestWrapperDecoratorFixedWidth) .addDecorator(story => ( {story()}