diff --git a/examples/next/pages/ui/components/storage/storage-browser/default-auth/routed/StorageBrowser.ts b/examples/next/pages/ui/components/storage/storage-browser/default-auth/routed/StorageBrowser.ts index 30eb2ac6093..8c3cf063f81 100644 --- a/examples/next/pages/ui/components/storage/storage-browser/default-auth/routed/StorageBrowser.ts +++ b/examples/next/pages/ui/components/storage/storage-browser/default-auth/routed/StorageBrowser.ts @@ -4,6 +4,7 @@ import { createAmplifyAuthAdapter, createStorageBrowser, } from '@aws-amplify/ui-react-storage/browser'; +import '@aws-amplify/ui-react-storage/styles.css'; import config from './aws-exports'; diff --git a/packages/react-storage/package.json b/packages/react-storage/package.json index 47d7ea6eda6..19f8dc0e43e 100644 --- a/packages/react-storage/package.json +++ b/packages/react-storage/package.json @@ -14,12 +14,10 @@ "types": "./dist/types/components/StorageBrowser/index.d.ts", "import": "./dist/esm/browser.mjs" }, - "./styles.css": "./dist/styles.css", - "./storage-browser-styles.css": "./dist/storage-browser-styles.css" + "./styles.css": "./dist/styles.css" }, "browser": { - "./styles.css": "./dist/styles.css", - "./storage-browser-styles.css": "./dist/storage-browser-styles.css" + "./styles.css": "./dist/styles.css" }, "types": "dist/types/index.d.ts", "license": "Apache-2.0", diff --git a/packages/react-storage/rollup.config.mjs b/packages/react-storage/rollup.config.mjs index 46760e761d8..d0e1940a114 100644 --- a/packages/react-storage/rollup.config.mjs +++ b/packages/react-storage/rollup.config.mjs @@ -62,15 +62,6 @@ const config = defineConfig([ }, plugins: [styles({ mode: ['extract'] })], }, - { - input: 'src/styles/storage-browser-styles.ts', - output: { - dir: 'dist', - format: 'cjs', - assetFileNames: '[name][extname]', - }, - plugins: [styles({ mode: ['extract'] })], - }, ]); export default config; diff --git a/packages/react-storage/src/styles/storage-browser-styles.ts b/packages/react-storage/src/styles/storage-browser-styles.ts deleted file mode 100644 index 5683fe9da5c..00000000000 --- a/packages/react-storage/src/styles/storage-browser-styles.ts +++ /dev/null @@ -1 +0,0 @@ -import './storage-browser.css'; diff --git a/packages/react-storage/src/styles/storage-browser.css b/packages/react-storage/src/styles/storage-browser.css deleted file mode 100644 index 6c29b0b2aae..00000000000 --- a/packages/react-storage/src/styles/storage-browser.css +++ /dev/null @@ -1,482 +0,0 @@ -.amplify-storage-browser { - --storage-browser-dropzone-active-color: hsl(190, 95%, 30%); - --storage-browser-gap-small: 0.375rem; - --storage-browser-gap: 0.6rem; - --storage-browser-gap-large: 1.2rem; - --storage-browser-status-error: hsl(0, 95%, 30%); - --storage-browser-status-success: hsl(130, 33%, 37%); - --storage-browser-status-progress: hsl(220, 95%, 30%); - --storage-browser-status-initial: hsl(210, 10%, 58%); - --storage-browser-loading-animation: spin 1s ease-out infinite; - --storage-browser-error-background: hsl(0, 75%, 95%); - --storage-browser-error-text: hsl(0, 100%, 20%); -} - -.storage-browser__pagination { - justify-self: flex-end; -} - -.storage-browser__pagination-list { - gap: var(--storage-browser-gap-small); -} - -.storage-browser__pagination-list { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; -} - -.storage-browser__pagination-list-item { - display: flex; - align-items: center; -} - -.storage-browser__pagination-button-icon, -.storage-browser__data-refresh-icon, -.storage-browser__message-dismiss-icon, -.storage-browser__menu-toggle-icon { - display: block; -} - -.storage-browser__field { - display: flex; - flex-direction: column; - margin-inline-start: var(--storage-browser-gap); - gap: var(--storage-browser-gap); -} - -.storage-browser__message { - align-items: flex-start; - display: flex; - gap: var(--storage-browser-gap); -} - -.storage-browser__message-dismiss { - flex: 0 0 auto; -} -.storage-browser__message-content { - flex: 1 1 auto; -} - -.storage-browser__upload-destination, -.storage-browser__copy-destination { - flex: 1; -} - -.storage-browser__locations-view-data-refresh, -.storage-browser__locations-detail-view-data-refresh { - justify-self: flex-end; -} - -.storage-browser__action-status { - vertical-align: middle; - margin-inline-end: var(--storage-browser-gap-small); -} - -.storage-browser__menu { - position: relative; - display: inline-block; - justify-self: flex-end; -} - -.storage-browser__menu-list { - display: none; - gap: var(--storage-browser-gap-small); - flex-direction: column; - position: absolute; - inset-inline-end: 0; - inset-block-start: 100%; - width: max-content; - max-width: var(--storage-browser-menu-max-width); - z-index: 2; -} - -.storage-browser__menu-list--open { - display: flex; -} - -.storage-browser__menu-item { - display: flex; - gap: var(--storage-browser-gap-small); - align-items: center; -} - -.storage-browser__add-folder { - justify-self: flex-end; -} - -.storage-browser__action-status--action-initial { - color: var(--storage-browser-status-initial); -} -.storage-browser__action-status--action-success { - color: var(--storage-browser-status-success); -} -.storage-browser__action-status--action-progress { - color: var(--storage-browser-status-progress); -} -.storage-browser__action-status--action-error, -.storage-browser__action-status--action-canceled { - color: var(--storage-browser-status-error); -} - -.storage-browser__empty-message { - text-align: center; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -/* Action Views */ - -.storage-browser__action-header { - /* grid-column: 1 / -1; */ - display: flex; - flex-direction: row; - justify-content: space-between; - gap: var(--storage-browser-gap); - align-items: center; -} - -.storage-browser__action-footer { - display: flex; - justify-content: space-between; - gap: var(--storage-browser-gap-medium); - align-items: center; -} - -/* Error boundary */ -.storage-browser__error-boundary { - background-color: var(--storage-browser-error-background); - color: var(--storage-browser-error-text); - padding: var(--storage-browser-gap-large); -} -/** Util class to visually hide content only needed for accessibility */ -.storage-browser-visually-hidden { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - fill: transparent; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -.storage-browser__action-destination, -.storage-browser__action-destination .storage-browser__description-list { - display: flex; - gap: var(--storage-browser-gap-small); - align-items: center; -} - -.storage-browser__action-destination > span { - font-weight: var(--amplify-font-weights-bold); -} - -/* Base component styles */ -/** DescriptionList **/ -.storage-browser__description-list { - margin: 0; - display: flex; - gap: var(--storage-browser-gap-large); - align-items: center; -} - -.storage-browser__description { - display: flex; - align-items: center; - gap: var(--storage-browser-gap-small); -} - -.storage-browser__description-details { - margin: 0; - display: flex; -} - -/** DropZone **/ -.storage-browser__drop-zone--active { - outline: 2px solid var(--storage-browser-dropzone-active-color); -} - -/** LoadingIndicator **/ -.storage-browser__loading-indicator { - display: flex; - gap: var(--storage-browser-gap-small); - padding: var(--storage-browser-gap-large); - justify-content: center; -} - -.storage-browser__loading-indicator-icon { - animation: var(--storage-browser-loading-animation); -} - -/** Breadcrumb Navigation **/ -.storage-browser__breadcrumb-list { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; - gap: var(--storage-browser-gap-small); -} - -.storage-browser__breadcrumb-list-item { - display: flex; - align-items: center; - gap: var(--storage-browser-gap-small); -} - -/** Table **/ -.storage-browser__table { - width: 100%; - position: relative; -} - -.storage-browser__table-wrapper { - flex: 1; - overflow: auto; - position: relative; - border-width: var(--amplify-border-widths-small); - border-style: solid; - border-color: var(--amplify-colors-border-tertiary); - width: 100%; -} - -.storage-browser__table-head { - position: sticky; - top: 0; - background: var(--amplify-colors-background-primary); - box-shadow: var(--amplify-shadows-small); -} - -.storage-browser__table-header { - text-align: start; -} - -.storage-browser__table-sort-header { - padding: var(--storage-browser-gap-small); - display: inline-flex; - align-items: center; -} - -.storage-browser__table-button-data-cell, -.storage-browser__table-date-data-cell, -.storage-browser__table-number-data-cell, -.storage-browser__table-text-data-cell { - display: flex; - width: 100%; - gap: var(--storage-browser-gap-small); - padding: var(--storage-browser-gap-small); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - align-items: center; - justify-content: flex-start; -} -.storage-browser__table-button-data-cell span, -.storage-browser__table-date-data-cell span, -.storage-browser__table-number-data-cell span, -.storage-browser__table-text-data-cell span { - text-overflow: ellipsis; - overflow: hidden; -} - -.storage-browser__table-button-data-cell--icon-only { - width: initial; -} - -.storage-browser__table-text-data-cell-icon { - flex-shrink: 0; -} -.storage-browser__table-text-data-cell-icon--action-queued { - color: var(--storage-browser-status-initial); -} - -.storage-browser__table-text-data-cell-icon--action-success { - color: var(--storage-browser-status-success); -} - -.storage-browser__table-text-data-cell-icon--action-progress { - color: var(--storage-browser-status-progress); -} - -.storage-browser__table-text-data-cell-icon--action-canceled, -.storage-browser__table-text-data-cell-icon--action-error { - color: var(--storage-browser-status-error); -} - -/* Locations view control wrapper styles */ -.storage-browser__locations-view-data-table th:nth-of-type(3) { - width: 8rem; -} - -/* Locations view control wrapper styles */ - -.storage-browser__location-detail-view-data-table th:nth-of-type(1) { - width: 2rem; -} - -.storage-browser__location-detail-view-data-table th:nth-of-type(3), -.storage-browser__location-detail-view-data-table th:nth-of-type(5) { - width: 8rem; -} - -.storage-browser__location-detail-view-data-table th:nth-of-type(4) { - width: 12rem; -} - -.storage-browser__location-detail-view-data-table th:nth-of-type(5) { - text-align: end; -} - -.storage-browser__location-detail-view-data-table th:nth-of-type(6) { - width: 4rem; -} - -.storage-browser__location-detail-view-data-table td:nth-of-type(5) div { - justify-content: end; -} - -.storage-browser__location-detail-view-data-table td:nth-of-type(6) button { - justify-content: center; -} - -/* Upload action view control wrapper styles */ -.storage-browser__upload-view-data-table th:nth-of-type(3), -.storage-browser__upload-view-data-table th:nth-of-type(4), -.storage-browser__upload-view-data-table th:nth-of-type(5), -.storage-browser__upload-view-data-table th:nth-of-type(6) { - width: 8rem; -} - -.storage-browser__upload-view-data-table th:nth-of-type(4) { - text-align: end; -} - -.storage-browser__upload-view-data-table th:nth-of-type(7) { - width: 4rem; -} - -.storage-browser__upload-view-data-table td:nth-of-type(4) div { - justify-content: end; -} - -/* Upload view control wrapper styles */ -.storage-browser__upload-status-display, -.storage-browser__action-status-display { - justify-content: flex-start; - margin: 0; - display: flex; - gap: var(--storage-browser-gap-large); - flex: 1; -} - -.storage-browser__copy-destination-picker { - width: 100%; - flex: 1; - display: flex; - flex-direction: column; -} - -.storage-browser__table-data-cell:first-child, -.storage-browser__table-data-cell:last-child, -.storage-browser__table__data:first-child, -.storage-browser__table__data:last-child, -.storage-browser__table-header:first-child, -.storage-browser__table-header:last-child { - border-left: none; - border-right: none; -} - -.storage-browser__table-header { - border: none; -} - -.storage-browser__location-detail-view-controls { - display: flex; - direction: row; - justify-content: flex-end; - align-items: center; - width: 100%; -} - -/* Copy view styles */ -.storage-browser__copy-destination-header { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; -} - -/* Search view styles */ -.storage-browser__search { - display: flex; - align-items: center; - flex-wrap: wrap; - min-width: 35rem; - flex: 1; -} - -.storage-browser__search-field-clear { - position: absolute; - display: flex; - right: 0.25rem; - top: 50%; - transform: translateY(-50%); -} - -.storage-browser__search .storage-browser__search-field { - position: relative; - display: flex; - height: 3rem; -} - -.storage-browser__search .storage-browser__search-field-icon { - position: absolute; - left: var(--storage-browser-gap-small); - top: 50%; - transform: translateY(-50%); -} - -.storage-browser__search .storage-browser__search-field-input { - border-radius: 0.25rem 0 0 0.25rem; - padding-inline-start: 2rem; - padding-inline-end: 3.25rem; - flex: 1; -} - -.storage-browser__search-submit { - border-radius: 0 0.25rem 0.25rem 0; - min-height: 3rem; -} - -.storage-browser__search-submit:not(:focus) { - border-inline-start-color: transparent; -} - -.storage-browser__search-subfolder-toggle__label { - margin-left: var(--storage-browser-gap); -} - -/* Shared view styles */ -.storage-browser__locations-view-data-table, -.storage-browser__location-detail-view-drop-zone, -.storage-browser__location-detail-view-data-table, -.storage-browser__copy-view-data-table, -.storage-browser__delete-view-data-table, -.storage-browser__upload-view-data-table, -.storage-browser__destination-picker-data-table { - display: grid; - grid-column: 1 / -1; - width: 100%; -}