From 84daf2007b3b718ad4c0f6a5b5a39572636a8869 Mon Sep 17 00:00:00 2001 From: Ilza Medeiros Date: Fri, 15 Mar 2024 17:31:15 -0300 Subject: [PATCH] docs(Button): LPD-17350 - Add example of bordeless button and remove null, unstyled, translucent and beta buttons example --- packages/clay-button/docs/button.mdx | 43 ------ packages/clay-button/docs/index.js | 207 +-------------------------- 2 files changed, 5 insertions(+), 245 deletions(-) diff --git a/packages/clay-button/docs/button.mdx b/packages/clay-button/docs/button.mdx index a54017db24..ea49f4f1e9 100644 --- a/packages/clay-button/docs/button.mdx +++ b/packages/clay-button/docs/button.mdx @@ -6,13 +6,10 @@ packageNpm: '@clayui/button' --- import { - ButtonBeta, - ButtonBetaDark, ButtonClayDark, ButtonDisplayTypes, ButtonGroup, ButtonIcon, - ButtonTranslucent, } from '$packages/clay-button/docs/index';
@@ -21,10 +18,6 @@ import { - [Display Types](#display-types) - [Group](#group) - [Icon](#icon) -- [Translucent](#btn-translucent) -- [Clay Dark](#btn-clay-dark) -- [Beta (Deprecated)](#btn-beta) - - [Dark (Deprecated)](#btn-beta-dark)
@@ -52,39 +45,3 @@ Use the [`spaced`](#api-spaced) property to create spacing between buttons. You can use the high-level component `ClayButtonWithIcon` to create a button with only an icon. If you need an icon and text, you need to compose with `ClayIcon` - -## Translucent(#btn-translucent) - -The boolean attribute `translucent` renders a button with an opaque background color optimized for light backgrounds. It renders as an extra small button with rounded borders. - - - -## Dark(#btn-clay-dark) - -The boolean attribute `dark` renders a button with an opaque background color optimized for dark backgrounds. It adds the class `clay-dark` to the button. The class `clay-dark` can be added to the parent element to make buttons contained inside render the dark variant. When adding `clay-dark` to the parent element, the `dark` attribute on the button should be omitted. - - - -## Beta (Deprecated)(#btn-beta) - -
- The property displayType="beta" has been deprecated in favor of - semantic attributes displayType="info" and{' '} - translucent. -
- -A component to indicate beta features in DXP. The Button variant should be used when the component can be placed close to a non-interactive UI element, such as a title or a section. Also, a default popover is shown if the user interacts with it. - - - -### Beta Dark (Deprecated)(#btn-beta-dark) - -
- The property displayType="beta-dark" has been deprecated in - favor of semantic attributes dark,{' '} - displayType="info" and translucent. -
- -`btn-beta-dark` is a dark variant of `btn-beta` to be used with dark backgrounds. - - diff --git a/packages/clay-button/docs/index.js b/packages/clay-button/docs/index.js index ccbd9d7b2d..e6e2dc6891 100644 --- a/packages/clay-button/docs/index.js +++ b/packages/clay-button/docs/index.js @@ -19,14 +19,11 @@ const ButtonDisplayTypesCode = `const Component = () => { Button Secondary - - Base Button - Button Link - - Button Unstyled + + Button Borderless ); @@ -52,8 +49,8 @@ const ButtonJSPCode = ` `; const ButtonDisplayTypes = () => { @@ -132,198 +129,4 @@ const ButtonIcon = () => { return ; }; -const buttonTranslucentImportsCode = `import ClayButton from '@clayui/button'; -import ClayIcon from '@clayui/icon;'`; - -const ButtonTranslucentCode = `const Component = () => { - return ( - <> - - - {'Primary'} - - - - - - {'Success'} - - - - - - {'Info'} - - - - - - - - - - {'Warning'} - - - - - - - - - - {'Danger'} - - - - ); -} - -render();`; - -const ButtonTranslucent = () => { - const scope = {ClayButton, ClayButtonWithIcon, ClayIcon}; - const code = ButtonTranslucentCode; - - return ( - - ); -}; - -// START - -const buttonClayDarkImportsCode = `import ClayButton from '@clayui/button'; -import ClayIcon from '@clayui/icon;'`; - -const ButtonClayDarkCode = `const Component = () => { - return ( - <> -
- - - {'Primary'} - - - - - - {'Success'} - - - - - - {'Info'} - - - - - - - - - - {'Warning'} - - - - - - - - - - {'Danger'} - - -
- - ); -} - -render();`; - -const ButtonClayDark = () => { - const scope = {ClayButton, ClayButtonWithIcon, ClayIcon}; - const code = ButtonClayDarkCode; - - return ( - - ); -}; - -// END - -const buttonBetaImportsCode = `import ClayButton from '@clayui/button'; -import ClayIcon from '@clayui/icon;'`; - -const ButtonBetaCode = `const Component = () => { - return ( - <> - - - {'Beta'} - - - - - - - - ); -} - -render();`; - -const ButtonBeta = () => { - const scope = {ClayButton, ClayButtonWithIcon, ClayIcon}; - const code = ButtonBetaCode; - - return ; -}; - -const buttonBetaDarkImportsCode = `import ClayButton from '@clayui/button'; -import ClayIcon from '@clayui/icon;'`; - -const ButtonBetaDarkCode = `const Component = () => { - return ( - <> -
- - - {'Beta'} - - - - - - -
- - ); -} - -render();`; - -const ButtonBetaDark = () => { - const scope = {ClayButton, ClayButtonWithIcon, ClayIcon}; - const code = ButtonBetaDarkCode; - - return ( - - ); -}; - -export { - ButtonDisplayTypes, - ButtonGroup, - ButtonIcon, - ButtonBeta, - ButtonBetaDark, - ButtonTranslucent, - ButtonClayDark, -}; +export {ButtonDisplayTypes, ButtonGroup, ButtonIcon};