diff --git a/README.md b/README.md index 2e5a8b6a1..bf7225aa1 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,9 @@ Runs both unit and e2e/accesibility tests. ### Visual Regression Testing +> [!NOTE] +> this has been temporarily disabled due to Vue3 compatibility issues. + Check [backstop](https://github.com/garris/BackstopJS) for general configuration questions. Our visual regressions audits can be performed against all patterns documented within the project's component proving grounds. To do so, follow the steps below: diff --git a/package-lock.json b/package-lock.json index a674eccd3..0743b00f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@rei/cedar", - "version": "14.1.0", + "version": "14.1.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@rei/cedar", - "version": "14.1.0", + "version": "14.1.1", "license": "MIT", "dependencies": { "tabbable": "^4.0.0" diff --git a/package.json b/package.json index 0d5bf8498..cf9f697ab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rei/cedar", - "version": "14.1.0", + "version": "14.1.1", "description": "REI Cedar Component Library", "homepage": "https://rei.github.io/rei-cedar/", "license": "MIT", @@ -31,6 +31,7 @@ "url": "https://github.com/rei/rei-cedar.git" }, "scripts": { + "prepare": "npm run build", "prepublishOnly": "npm-run-all lint build", "dev": "vite", "build": "vue-tsc && vite build && npm run build:umd && npm run build:extractcss && npm run build:icons && npm run build:docgen", diff --git a/src/components/modal/CdrModal.vue b/src/components/modal/CdrModal.vue index 65f54774c..68c149a47 100644 --- a/src/components/modal/CdrModal.vue +++ b/src/components/modal/CdrModal.vue @@ -2,10 +2,19 @@ import { debounce } from '../../utils/debounce' import tabbable from 'tabbable'; import { - useCssModule, computed, ref, watch, onMounted, nextTick, onUnmounted, useAttrs, + useCssModule, + computed, + ref, + watch, + onMounted, + nextTick, + onUnmounted, + useAttrs, } from 'vue'; import { - CdrBreakpointSm, CdrSpaceOneX, CdrSpaceTwoX, + CdrBreakpointSm, + CdrSpaceOneX, + CdrSpaceTwoX, } from '@rei/cdr-tokens/dist/rei-dot-com/js/cdr-tokens.mjs'; import onTransitionEnd from './onTransitionEnd'; import CdrButton from '../button/CdrButton.vue'; @@ -14,14 +23,16 @@ import mapClasses from '../../utils/mapClasses'; /** Disruptive, action-blocking overlays used to display important information */ defineOptions({ - name: 'CdrModal' + name: 'CdrModal', + inheritAttrs: false, }); + const props = defineProps({ /** * Toggles the state of the modal * @demoIgnore true */ - opened: { + opened: { type: Boolean, required: true, }, @@ -78,10 +89,8 @@ const props = defineProps({ }, }); -const emits = defineEmits({ - /** Fires when modal is closed */ - closed: null, -}); +/** Fires when modal is closed */ +const emits = defineEmits({ closed: null }); const attrs = useAttrs(); const style = useCssModule(); @@ -95,8 +104,8 @@ const isOpening = ref(false); interface offsetValues { x: number | undefined, y: number | undefined, -} -const offset = ref({ x: undefined, y: undefined}); +} +const offset = ref({ x: undefined, y: undefined }); const headerHeight = ref(0); const totalHeight = ref(0); const scrollHeight = ref(0); @@ -126,7 +135,7 @@ const onClick = (e?: Event) => { emits('closed', e); }; -const handleKeyDown = ({ key }: { key: string}) => { +const handleKeyDown = ({ key }: { key: string }) => { switch (key) { case 'Escape': case 'Esc': @@ -155,13 +164,13 @@ const addNoScroll = () => { const { documentElement, body } = document; offset.value = { x: window.scrollX - || (documentElement || {}).scrollLeft - || (body || {}).scrollLeft - || 0, + || (documentElement || {}).scrollLeft + || (body || {}).scrollLeft + || 0, y: window.scrollY - || (documentElement || {}).scrollTop - || (body || {}).scrollTop - || 0, + || (documentElement || {}).scrollTop + || (body || {}).scrollTop + || 0, }; if (documentElement) { @@ -203,7 +212,8 @@ const handleOpened = () => { lastActive = activeElement; nextTick(() => { - if (modalEl.value) (modalEl.value as HTMLDivElement).focus(); // wrapped in if so testing error isn't thrown + // wrapped in if so testing error isn't thrown + if (modalEl.value) (modalEl.value as HTMLDivElement).focus(); measureContent(); addHandlers(); @@ -253,6 +263,7 @@ const dialogAttrs = computed(() => ({ 'aria-describedby': props.ariaDescribedby, id: props.id, })); + const verticalSpace = computed(() => { // contentWrap vertical padding const fullscreenSpace = Number(CdrSpaceTwoX); @@ -263,9 +274,10 @@ const verticalSpace = computed(() => { : windowedSpace + fullscreenSpace; // fullscreen, here, would account for outerWrap padding, which is the same CdrSpaceTwoX }); - const scrollMaxHeight = computed(() => totalHeight.value - - headerHeight.value - - verticalSpace.value); + +const scrollMaxHeight = computed(() => totalHeight.value + - headerHeight.value + - verticalSpace.value); const scrollPadding = computed(() => { const isScrolling = scrollHeight.value > offsetHeight.value; @@ -278,6 +290,11 @@ const scrollPadding = computed(() => { return 0; }); +const textContentStyle = computed(() => ({ + maxHeight: `${scrollMaxHeight.value}px`, + paddingRight: `${scrollPadding.value}px`, +})); + watch(() => props.opened, (newValue, oldValue) => { if (!!newValue === !!oldValue) return; // eslint-disable-next-line no-unused-expressions @@ -294,8 +311,6 @@ onMounted(() => { onUnmounted(() => { window.removeEventListener('resize', handleResize); }); - -