Skip to content

Commit

Permalink
Merge branch 'master' into alpha-merge-master [skip release]
Browse files Browse the repository at this point in the history
  • Loading branch information
Birkbjo committed Nov 28, 2023
2 parents 8c665c7 + adb0d0d commit b74d24a
Show file tree
Hide file tree
Showing 12 changed files with 106 additions and 59 deletions.
14 changes: 14 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
# [8.15.0](https://github.com/dhis2/ui/compare/v8.14.13...v8.15.0) (2023-11-27)


### Features

* **button:** destructive secondary variant ([b72a04a](https://github.com/dhis2/ui/commit/b72a04a93cfb08180c030a94b8ad6008f3084bcf))

## [8.14.13](https://github.com/dhis2/ui/compare/v8.14.12...v8.14.13) (2023-11-26)


### Bug Fixes

* **translations:** sync translations from transifex (master) ([cefd956](https://github.com/dhis2/ui/commit/cefd956826c7ab12c16b30f90e3c9c494f3c682a))

## [8.14.12](https://github.com/dhis2/ui/compare/v8.14.11...v8.14.12) (2023-11-22)


Expand Down
6 changes: 3 additions & 3 deletions collections/ui/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,15 +94,15 @@ import { Button } from '@dhis2/ui'
|children|node|||Component to render inside the button|
|className|string|||A className that will be passed to the `<button>` element|
|dataTest|string|`'dhis2-uicore-button'`||A string that will be applied as a `data-test` attribute on the button element<br/>for identification during testing|
|destructive|custom|||Indicates that the button makes potentially dangerous<br/>deletions or data changes.<br/>Mutually exclusive with `primary` and `secondary` props|
|destructive|boolean|||Applies 'destructive' button appearance, implying a dangerous action.|
|disabled|boolean|||Applies a greyed-out appearance and makes the button non-interactive|
|icon|element|||An icon element to display inside the button|
|initialFocus|boolean|||Use this variant to capture the initial focus on the page.|
|large|custom|||Makes the button large. Mutually exclusive with `small`|
|loading|boolean|||Sets the button into a loading state|
|name|string|||Sets `name` attribute on button element.<br/>Gets passed as part of the first argument to callbacks (see `onClick`).|
|primary|custom|||Applies 'primary' button appearance.<br/>Mutually exclusive with `destructive` and `secondary` props|
|secondary|custom|||Applies 'secondary' button appearance.<br/>Mutually exclusive with `primary` and `destructive` props|
|primary|boolean|||Applies 'primary' button appearance, implying the most important action.|
|secondary|boolean|||Applies 'secondary' button appearance.|
|small|custom|||Makes the button small. Mutually exclusive with `large` prop|
|tabIndex|string|||Tab index for focusing the button with a keyboard|
|toggled|boolean|||Changes appearance of button to an on/off state|
Expand Down
6 changes: 3 additions & 3 deletions components/button/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@ import { Button } from '@dhis2-ui/button'
|children|node|||Component to render inside the button|
|className|string|||A className that will be passed to the `<button>` element|
|dataTest|string|`'dhis2-uicore-button'`||A string that will be applied as a `data-test` attribute on the button element<br/>for identification during testing|
|destructive|custom|||Indicates that the button makes potentially dangerous<br/>deletions or data changes.<br/>Mutually exclusive with `primary` and `secondary` props|
|destructive|boolean|||Applies 'destructive' button appearance, implying a dangerous action.|
|disabled|boolean|||Applies a greyed-out appearance and makes the button non-interactive|
|icon|element|||An icon element to display inside the button|
|initialFocus|boolean|||Use this variant to capture the initial focus on the page.|
|large|custom|||Makes the button large. Mutually exclusive with `small`|
|loading|boolean|||Sets the button into a loading state|
|name|string|||Sets `name` attribute on button element.<br/>Gets passed as part of the first argument to callbacks (see `onClick`).|
|primary|custom|||Applies 'primary' button appearance.<br/>Mutually exclusive with `destructive` and `secondary` props|
|secondary|custom|||Applies 'secondary' button appearance.<br/>Mutually exclusive with `primary` and `destructive` props|
|primary|boolean|||Applies 'primary' button appearance, implying the most important action.|
|secondary|boolean|||Applies 'secondary' button appearance.|
|small|custom|||Makes the button small. Mutually exclusive with `large` prop|
|tabIndex|string|||Tab index for focusing the button with a keyboard|
|toggled|boolean|||Changes appearance of button to an on/off state|
Expand Down
14 changes: 5 additions & 9 deletions components/button/src/button/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,9 @@ Button.propTypes = {
*/
dataTest: PropTypes.string,
/**
* Indicates that the button makes potentially dangerous
* deletions or data changes.
* Mutually exclusive with `primary` and `secondary` props
* Applies 'destructive' button appearance, implying a dangerous action.
*/
destructive: sharedPropTypes.buttonVariantPropType,
destructive: PropTypes.bool,
/** Applies a greyed-out appearance and makes the button non-interactive */
disabled: PropTypes.bool,
/** An icon element to display inside the button */
Expand All @@ -121,15 +119,13 @@ Button.propTypes = {
*/
name: PropTypes.string,
/**
* Applies 'primary' button appearance.
* Mutually exclusive with `destructive` and `secondary` props
* Applies 'primary' button appearance, implying the most important action.
*/
primary: sharedPropTypes.buttonVariantPropType,
primary: PropTypes.bool,
/**
* Applies 'secondary' button appearance.
* Mutually exclusive with `primary` and `destructive` props
*/
secondary: sharedPropTypes.buttonVariantPropType,
secondary: PropTypes.bool,
/** Makes the button small. Mutually exclusive with `large` prop */
small: sharedPropTypes.sizePropType,
/** Tab index for focusing the button with a keyboard */
Expand Down
6 changes: 6 additions & 0 deletions components/button/src/button/button.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,12 @@ Destructive.parameters = {
},
},
}
export const DestructiveSecondary = Template.bind({})
DestructiveSecondary.args = {
destructive: true,
secondary: true,
name: 'Destructive secondary button',
}

export const Disabled = (args) => (
<>
Expand Down
29 changes: 29 additions & 0 deletions components/button/src/button/button.styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,35 @@ export default css`
fill: ${colors.white};
}
.destructive.secondary {
border-color: rgba(74, 87, 104, 0.25);
background: transparent;
color: ${colors.red700};
fill: ${colors.red700};
font-weight: 400;
}
.destructive.secondary:hover {
border-color: ${colors.red600};
background: ${colors.red050};
color: ${colors.red800};
fill: ${colors.red800};
}
.destructive.secondary:active,
.destructive.secondary:active:focus {
background: ${colors.red100};
border-color: ${colors.red700};
box-shadow: none;
}
.destructive.secondary:disabled {
background: transparent;
border-color: rgba(74, 87, 104, 0.25);
color: rgba(183, 28, 28, 0.6);
fill: rgba(183, 28, 28, 0.6);
}
.icon-only {
padding: 0 0 0 5px;
}
Expand Down
6 changes: 3 additions & 3 deletions components/select/i18n/uz_UZ_Cyrl.po
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
#
# Translators:
# Ibatov <[email protected]>, 2021
# Ibatov <[email protected]>, 2023
#
msgid ""
msgstr ""
"Project-Id-Version: i18next-conv\n"
"POT-Creation-Date: 2021-05-10T11:56:32.496Z\n"
"PO-Revision-Date: 2021-06-24 12:50+0000\n"
"Last-Translator: Ibatov <[email protected]>, 2021\n"
"Last-Translator: Ibatov <[email protected]>, 2023\n"
"Language-Team: Uzbek (Cyrillic) (https://app.transifex.com/hisp-uio/teams/100509/uz@Cyrl/)\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
Expand All @@ -25,7 +25,7 @@ msgid "Type to filter options"
msgstr ""

msgid "Loading options"
msgstr ""
msgstr "Вариантлар юкланмоқда"

msgid "No options found"
msgstr ""
30 changes: 15 additions & 15 deletions components/sharing-dialog/i18n/uz_UZ_Cyrl.po
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
#
# Translators:
# Ibatov <[email protected]>, 2021
# Ibatov <[email protected]>, 2023
#
msgid ""
msgstr ""
"Project-Id-Version: i18next-conv\n"
"POT-Creation-Date: 2021-11-25T09:59:40.995Z\n"
"PO-Revision-Date: 2021-10-01 23:39+0000\n"
"Last-Translator: Ibatov <[email protected]>, 2021\n"
"Last-Translator: Ibatov <[email protected]>, 2023\n"
"Language-Team: Uzbek (Cyrillic) (https://app.transifex.com/hisp-uio/teams/100509/uz@Cyrl/)\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
Expand All @@ -16,13 +16,13 @@ msgstr ""
"Plural-Forms: nplurals=1; plural=0;\n"

msgid "View only"
msgstr ""
msgstr "Фақат кўриш учун"

msgid "View and edit"
msgstr ""
msgstr "Кўриш ва таҳрирлаш"

msgid "Give access to a user or group"
msgstr ""
msgstr "Фойдаланувчи ёки гуруҳга киришга рухсат бериш"

msgid "Access level"
msgstr "Кириш мумкин бўлган босқичлар"
Expand All @@ -34,16 +34,16 @@ msgid "Not available offline"
msgstr "Оффлайн режимда мавжуд эмас"

msgid "Give access"
msgstr ""
msgstr "Рухсат бериш"

msgid "Users and groups that currently have access"
msgstr ""
msgstr "Рухсати бор бўлган яойдаланувчилар ёки гуруҳлар"

msgid "User / Group"
msgstr ""
msgstr "Фойдаланувчи/Гуруҳ"

msgid "All users"
msgstr ""
msgstr "Барча фойдаланувчилар"

msgid "No access"
msgstr "Кириш ҳуқуқи мавжуд эмас"
Expand All @@ -52,16 +52,16 @@ msgid "Can view"
msgstr "Кўриш мумкин"

msgid "Can view and edit"
msgstr ""
msgstr "Кўриш ва таҳрирлаш имкони"

msgid "Metadata"
msgstr "МетаМаълумот"

msgid "Remove access"
msgstr ""
msgstr "Рухсатни бекор қилиш"

msgid "User or group"
msgstr ""
msgstr "Фойдаланувчи ёки гуруҳ"

msgid "Search"
msgstr "Қидириш"
Expand Down Expand Up @@ -127,13 +127,13 @@ msgid ""
msgstr ""

msgid "Sharing and access: {{- objectName}}"
msgstr ""
msgstr "Уланиш ва кириш: {{- objectName}}"

msgid "Sharing and access"
msgstr ""
msgstr "Уланиш ва кириш"

msgid "Close"
msgstr "Ёпиш"

msgid "Dashboard sharing"
msgstr ""
msgstr "Бошқарув панелига уланиш"
22 changes: 22 additions & 0 deletions components/table/i18n/uz_UZ_Cyrl.po
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
#
# Translators:
# Ibatov <[email protected]>, 2023
#
msgid ""
msgstr ""
"Project-Id-Version: i18next-conv\n"
"POT-Creation-Date: 2021-06-15T13:35:03.608Z\n"
"PO-Revision-Date: 2021-06-24 12:50+0000\n"
"Last-Translator: Ibatov <[email protected]>, 2023\n"
"Language-Team: Uzbek (Cyrillic) (https://app.transifex.com/hisp-uio/teams/100509/uz@Cyrl/)\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Language: uz@Cyrl\n"
"Plural-Forms: nplurals=1; plural=0;\n"

msgid "Toggle filter"
msgstr "Фильтрни алмаштириш"

msgid "Sort items"
msgstr "Элементларни саралаш"
2 changes: 0 additions & 2 deletions constants/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@
- [layers](src/layers.js)
- [statusPropType](src/shared-prop-types.js)
- [statusArgType](src/shared-prop-types.js)
- [buttonVariantPropType](src/shared-prop-types.js)
- [buttonVariantArgType](src/shared-prop-types.js)
- [sizePropType](src/shared-prop-types.js)
- [sizeArgType](src/shared-prop-types.js)
- [insideAlignmentPropType](src/shared-prop-types.js)
Expand Down
22 changes: 0 additions & 22 deletions constants/src/shared-prop-types.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,28 +20,6 @@ export const statusArgType = {
control: { type: 'boolean' },
}

/**
* Button variant propType
* @return {PropType} Mutually exclusive variants:
* primary/secondary/destructive
*/
export const buttonVariantPropType = mutuallyExclusive(
['primary', 'secondary', 'destructive'],
PropTypes.bool
)
export const buttonVariantArgType = {
// No description because it should be set for the component description
table: {
type: {
summary: 'bool',
detail: "'primary', 'secondary', and 'destructive' are mutually exclusive props",
},
},
control: {
type: 'boolean',
},
}

/**
* Size variant propType
* @return {PropType} Mutually exclusive variants:
Expand Down
8 changes: 6 additions & 2 deletions docs/docs/components/button.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Buttons are used to trigger actions. There are different button variants that ar
| ------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `Basic` | Default. Will suit the majority of actions on a page. |
| `Primary` | Use for the most important action on a page, like a _Save data_ button in a form. Only use one `primary` button on a page. |
| `Secondary` | Use for less important actions, usually in combination with other buttons. |
| `Secondary` | Use for less important actions, usually in combination with other buttons. Can be applied to `Destructive`. |
| `Destructive` | Only for primary-type actions that will delete or destroy something. Don't use several on a single page. |

#### Basic
Expand Down Expand Up @@ -67,12 +67,16 @@ Buttons are used to trigger actions. There are different button variants that ar
#### Destructive

<Demo>
<Button destructive>Destructive button</Button>
<div class="stacked-examples-horizontal">
<Button destructive>Destructive button</Button>
<Button destructive secondary>Destructive secondary button</Button>
</div>
</Demo>

- Only use for primary-type actions that will destroy data.
- Don't use if the action will only remove an item from the current context.
- Only use a one `destructive` button per page.
- `Destructive secondary` can be used more than once per page for less important destructive actions.

### Format

Expand Down

0 comments on commit b74d24a

Please sign in to comment.