From 5592bc5fffa0c9c6938a374ea524585c34c51cf9 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Tue, 6 Dec 2022 11:52:03 -0800 Subject: [PATCH] =?UTF-8?q?`TextField`=20house=20keeping=20=F0=9F=A7=B9=20?= =?UTF-8?q?=20(#16668)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * TextField house keeping updates * ButtonIcon prop name update and uncontrolled fix * Updating snapshot --- .../component-library-components.scss | 1 - .../component-library/text-field/README.mdx | 17 ++++++++++++----- .../__snapshots__/text-field.test.js.snap | 17 +++++++++++++++++ .../text-field/text-field.scss | 10 ---------- .../text-field/text-field.stories.js | 8 +------- .../text-field/text-field.test.js | 3 ++- 6 files changed, 32 insertions(+), 24 deletions(-) create mode 100644 ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap delete mode 100644 ui/components/component-library/text-field/text-field.scss diff --git a/ui/components/component-library/component-library-components.scss b/ui/components/component-library/component-library-components.scss index 02e900189..75508aa69 100644 --- a/ui/components/component-library/component-library-components.scss +++ b/ui/components/component-library/component-library-components.scss @@ -23,7 +23,6 @@ // Molecules @import 'picker-network/picker-network'; @import 'tag-url/tag-url'; -@import 'text-field/text-field'; @import 'text-field-base/text-field-base'; @import 'text-field-search/text-field-search'; @import 'form-text-field/form-text-field'; diff --git a/ui/components/component-library/text-field/README.mdx b/ui/components/component-library/text-field/README.mdx index 52a00f9f7..9f879ac62 100644 --- a/ui/components/component-library/text-field/README.mdx +++ b/ui/components/component-library/text-field/README.mdx @@ -1,5 +1,7 @@ import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import { TextFieldBase } from '../text-field-base'; + import { TextField } from './text-field'; # TextField @@ -12,15 +14,20 @@ The `TextField` component lets users enter and edit text as well as adding a sho ## Props -The `TextField` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) and [TextFieldBase](/docs/ui-components-component-library-text-field-base-text-field-base-stories-js--default-story#props) component props +The `TextField` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props +`TextField` accepts all [TextFieldBase](/docs/ui-components-component-library-text-field-base-text-field-base-stories-js--default-story#props) +component props + + + ### Show Clear Button -Use the `showClearButton` prop to display a clear button when `TextField` has a value. Use the `clearButtonOnClick` prop to pass an `onClick` event handler to clear the value of the input. +Use the `showClearButton` prop to display a clear button when `TextField` has a value. Use the `clearButtonOnClick` prop to pass an `onClick` event handler to clear the value of the input. Otherwise the clear button will not do anything. -The clear button uses [ButtonIcon](/docs/ui-components-component-library-button-icon-button-icon-stories-js--default-story) and accepts all props from that component. +The clear button uses [ButtonIcon](/docs/ui-components-component-library-button-icon-button-icon-stories-js--default-story) and accepts all `ButtonIcon` props. **NOTE: The `showClearButton` only works with a controlled input.** @@ -29,7 +36,7 @@ The clear button uses [ButtonIcon](/docs/ui-components-component-library-button- ```jsx -import { TextField } from '../../ui/components/component-library'; +import { TextField } from '../../component-library'; const [value, setValue] = useState('show clear'); @@ -66,7 +73,7 @@ import { BORDER_RADIUS, } from '../../../helpers/constants/design-system'; -import { TextField } from '../../ui/components/component-library'; +import { TextField } from '../../component-library'; const [value, setValue] = useState('show clear'); diff --git a/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap b/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap new file mode 100644 index 000000000..5c8ac7c66 --- /dev/null +++ b/ui/components/component-library/text-field/__snapshots__/text-field.test.js.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TextField should render correctly 1`] = ` +
+
+ +
+
+`; diff --git a/ui/components/component-library/text-field/text-field.scss b/ui/components/component-library/text-field/text-field.scss deleted file mode 100644 index b21024d81..000000000 --- a/ui/components/component-library/text-field/text-field.scss +++ /dev/null @@ -1,10 +0,0 @@ -.mm-text-field { - // TOD: remove most of these styles when replaced by ButtonIcon - &__button-clear { - height: 24px; - width: 24px; - max-width: 24px; - flex: 0 0 24px; - margin-left: -24px; - } -} diff --git a/ui/components/component-library/text-field/text-field.stories.js b/ui/components/component-library/text-field/text-field.stories.js index ca3d1c0a0..cad7c1edc 100644 --- a/ui/components/component-library/text-field/text-field.stories.js +++ b/ui/components/component-library/text-field/text-field.stories.js @@ -178,6 +178,7 @@ export default { size: SIZES.MD, type: 'text', truncate: false, + value: '', }, }; @@ -209,13 +210,6 @@ ShowClearButton.args = { showClearButton: true, }; -export const ClearButtonOnClick = Template.bind({}); - -ShowClearButton.args = { - placeholder: 'Enter text to show clear', - showClearButton: true, -}; - export const ClearButtonProps = Template.bind({}); ClearButtonProps.args = { value: 'clear button props', diff --git a/ui/components/component-library/text-field/text-field.test.js b/ui/components/component-library/text-field/text-field.test.js index fdf85988a..5e23c50b3 100644 --- a/ui/components/component-library/text-field/text-field.test.js +++ b/ui/components/component-library/text-field/text-field.test.js @@ -11,8 +11,9 @@ import { TextField } from './text-field'; describe('TextField', () => { it('should render correctly', () => { - const { getByRole } = render(); + const { getByRole, container } = render(); expect(getByRole('textbox')).toBeDefined(); + expect(container).toMatchSnapshot(); }); it('should render and be able to input text', async () => { const { user, getByRole } = renderWithUserEvent();