From c08ce6a771a5c755abb37cbf587b939ff662570e Mon Sep 17 00:00:00 2001 From: tjuanitas <7311041+tjuanitas@users.noreply.github.com> Date: Tue, 20 Jun 2023 20:49:45 -0700 Subject: [PATCH 1/3] fix: update modal buttons alignments in element dialogs --- scripts/styleguide.styles.scss | 4 ++++ .../common/create-folder-dialog/CreateFolderDialog.js | 6 +++--- src/elements/common/header/Header.scss | 8 +------- src/elements/common/modal.scss | 9 +++++++-- .../content-explorer/DeleteConfirmationDialog.js | 6 +++--- src/elements/content-explorer/RenameDialog.js | 6 +++--- src/styles/common/_forms.scss | 2 +- 7 files changed, 22 insertions(+), 19 deletions(-) diff --git a/scripts/styleguide.styles.scss b/scripts/styleguide.styles.scss index 2b3567442c..97155957fa 100644 --- a/scripts/styleguide.styles.scss +++ b/scripts/styleguide.styles.scss @@ -2,6 +2,10 @@ &.bce, &.bcp { height: 600px; + + .bcu { + height: 100%; + } } &.bcpr { diff --git a/src/elements/common/create-folder-dialog/CreateFolderDialog.js b/src/elements/common/create-folder-dialog/CreateFolderDialog.js index d6acbd2117..6ca726430d 100644 --- a/src/elements/common/create-folder-dialog/CreateFolderDialog.js +++ b/src/elements/common/create-folder-dialog/CreateFolderDialog.js @@ -109,9 +109,6 @@ const CreateFolderDialog = ({
- - - + + +
); diff --git a/src/elements/common/header/Header.scss b/src/elements/common/header/Header.scss index 174ca91ac6..38e4dd1673 100644 --- a/src/elements/common/header/Header.scss +++ b/src/elements/common/header/Header.scss @@ -1,6 +1,6 @@ @import '../variables'; -.be .be-header { +.be-header { display: flex; flex: 0 0 70px; align-items: center; @@ -16,10 +16,4 @@ flex: 1; padding-left: 20px; } - - input[type='search'] { - width: 100%; - font: inherit; - -webkit-appearance: none; - } } diff --git a/src/elements/common/modal.scss b/src/elements/common/modal.scss index 0e5b89e967..af67966b85 100644 --- a/src/elements/common/modal.scss +++ b/src/elements/common/modal.scss @@ -3,13 +3,18 @@ .be-modal { .be-modal-btns { display: flex; - justify-content: center; + justify-content: flex-end; padding: 15px 0 0; .btn { @include bdl-Button--large; - margin-left: 8px; + margin-top: 0; + margin-bottom: 0; + + &:last-of-type { + margin-right: 0; + } } } diff --git a/src/elements/content-explorer/DeleteConfirmationDialog.js b/src/elements/content-explorer/DeleteConfirmationDialog.js index 62c73bcbd7..40c9ea6e31 100644 --- a/src/elements/content-explorer/DeleteConfirmationDialog.js +++ b/src/elements/content-explorer/DeleteConfirmationDialog.js @@ -50,12 +50,12 @@ const DeleteConfirmationDialog = ({ >
- - - + + +
); diff --git a/src/elements/content-explorer/RenameDialog.js b/src/elements/content-explorer/RenameDialog.js index 15ecaec275..613fc8a5e1 100644 --- a/src/elements/content-explorer/RenameDialog.js +++ b/src/elements/content-explorer/RenameDialog.js @@ -120,12 +120,12 @@ const RenameDialog = ({
- - - + + +
); diff --git a/src/styles/common/_forms.scss b/src/styles/common/_forms.scss index f51d9d97b6..3fb3b1b063 100644 --- a/src/styles/common/_forms.scss +++ b/src/styles/common/_forms.scss @@ -16,7 +16,7 @@ input[type='tel'], input[type='number'], div[contentEditable='true'], textarea { - width: 262px; + width: 100%; @include box-inputs; } From 744e406329150791f50e193d9d31778e027eec09 Mon Sep 17 00:00:00 2001 From: tjuanitas <7311041+tjuanitas@users.noreply.github.com> Date: Tue, 20 Jun 2023 21:26:49 -0700 Subject: [PATCH 2/3] fix: move input width to base element stylesheet --- src/elements/common/base.scss | 4 ++-- src/styles/common/_forms.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/elements/common/base.scss b/src/elements/common/base.scss index b9a2196e31..34e3cf5832 100644 --- a/src/elements/common/base.scss +++ b/src/elements/common/base.scss @@ -12,7 +12,6 @@ line-height: 20px; letter-spacing: .3px; - // TODO: Remove when border-color in src/styles/_inputs.scss is accessible input[type='text'], input[type='date'], input[type='password'], @@ -23,7 +22,8 @@ input[type='number'], div[contentEditable='true'], textarea { - border-color: $bdl-gray-50; + width: 100%; + border-color: $bdl-gray-50; // TODO: Remove when border-color in src/styles/_inputs.scss is accessible } /* stylelint-disable */ diff --git a/src/styles/common/_forms.scss b/src/styles/common/_forms.scss index 3fb3b1b063..f51d9d97b6 100644 --- a/src/styles/common/_forms.scss +++ b/src/styles/common/_forms.scss @@ -16,7 +16,7 @@ input[type='tel'], input[type='number'], div[contentEditable='true'], textarea { - width: 100%; + width: 262px; @include box-inputs; } From 8c0e2989690b882b1ce299566ac0105d576ad1ff Mon Sep 17 00:00:00 2001 From: tjuanitas <7311041+tjuanitas@users.noreply.github.com> Date: Wed, 5 Jul 2023 09:45:39 -0700 Subject: [PATCH 3/3] fix: fix typo in README --- src/components/i18n/FormattedCompMessage.js | 2 +- src/elements/content-preview/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/i18n/FormattedCompMessage.js b/src/components/i18n/FormattedCompMessage.js index bffd748bc4..91e553702e 100644 --- a/src/components/i18n/FormattedCompMessage.js +++ b/src/components/i18n/FormattedCompMessage.js @@ -184,7 +184,7 @@ class FormattedCompMessage extends React.Component { // the reviewer finds and submit translation tickets to Jira and/or fixed // translations directly back to Mojito. // 3. It can be used by the planned "text experiment framework" to identify - // whole strings in the UI that can be A/B tested in various langauges without + // whole strings in the UI that can be A/B tested in various languages without // publishing new versions of the code. return React.createElement( tagName, diff --git a/src/elements/content-preview/README.md b/src/elements/content-preview/README.md index 7bc358a4f2..c92a474102 100644 --- a/src/elements/content-preview/README.md +++ b/src/elements/content-preview/README.md @@ -1,5 +1,5 @@ ### Demo ([Documentation](https://developer.box.com/docs/box-content-preview)) -***IMPORTANT:*** The Content Preview UI Element works differently from the other UI Elements above. The React component is a wrapper for the [Preview library](https://developer.box.com/docs/box-content-preview). It also requires a langauge (defaults to en-US) to be passed in since the preview library bundles are localized. Providing a language will automatically pull in the corresponding preview.js bundle and dynamically load it by adding a script tag. It will also dynamically load the additional required preview.css file by adding a link tag. +***IMPORTANT:*** The Content Preview UI Element works differently from the other UI Elements above. The React component is a wrapper for the [Preview library](https://developer.box.com/docs/box-content-preview). It also requires a language (defaults to en-US) to be passed in since the preview library bundles are localized. Providing a language will automatically pull in the corresponding preview.js bundle and dynamically load it by adding a script tag. It will also dynamically load the additional required preview.css file by adding a link tag. ```jsx var ContentPreview = require('./ContentPreview').default;